Bridge 个人博客

浏览器

2022/9/8

# 浏览器内核

1. 概念
浏览器内核即浏览器所采用的渲染引擎，是浏览器最核心的部分，决定了浏览器如何显示网页的内容及页面元素的格式。

2. 常用浏览器的内核

  • IE：Trident, js引擎-chakra(9.0以上)
  • firefox：Gecko
  • Safari：webkit
  • chrome：Chromium/Blink，js引擎-V8
  • Opera： blink
  • Edge：Chromium，js引擎-chakra

3. 主要组件
浏览器的主要组件包括：

用户界面 (User Interface) － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
浏览器引擎 (Browser engine) － 用来查询及操作渲染引擎的接口。
渲染引擎 (Rendering engine) － 负责解析用户请求的内容(如 HTML 或 XML，渲染引擎会解析 HTML 或 XML，以及相关 CSS，然后返回解析后的内容)
网络(Networking)－ 用来完成网络调用，例如 http 请求，它具有平台无关的接口，可以在不同平台上工作。
UI 后端(UI backend) － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
JS 解释器(JavaScript interpreter) － 用来解释执行 JS 代码。
数据存储 (Data storage) － 属于持久层，浏览器需要在硬盘中保存类似 cookie 的各种数据，HTML5 定义了 web database 技术，这是一种轻量级完整的客户端存储技术

# 浏览器渲染页面的过程 (opens new window)

# js 文件为什么要放在尾部？

首先我们从浏览器的渲染过程可以得知，JS 线程会阻塞 GUI 渲染线程的执行。因为 js 可能会涉及到对 dom 元素的操作，导致样式改变，所以应该等待js加载完后再进行构建 dom 树，避免一些不必要的操作。而放在尾部等dom树构建完之后再执行 js 就不会阻塞 dom 的构建，也不会出现因为 dom 还没构建就要对其进行操作的错误。

# css 文件为什么要放在头部？

css 规则树和 dom 树是分开的，放在首部并不会阻塞 dom 树的构建，而放在尾部可能会导致页面出现无样式再变成有样式的过程，带给用户不好的体验

Node