浏览器内核、JS 引擎、页面呈现原理及其优化

浏览器内核又叫渲染引擎，主要负责 HTML、CSS 的解析，页面布局、渲染与复合层合成。浏览器内核的不同带来的主要问题是对 CSS 的支持度与属性表现差异。

webkit

Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核

Blink

Blink是在Wekbit的基础上的改进，是现在对新特性支持度最好的内核

Gecko

Firefox

Trident

微软的IE，IE4+ 的内核，一直持续到 IE11，EdgeHTML 是微软抛弃 IE 后开发的全新内核

webkit组成

• webkit 包含了许多不同平台对webkit封装的实现，即抽象出了与浏览器所能直接对应的一些概念的实现。如，WebView, WebPage, WebFrame等
• WebCore 实现了对文档的模型化，包括了CSS，DOM，Render等的实现
• JavaScript Core 对JavaScript支持的实现

浏览器内核与 JS 引擎一览

JavaScript 引擎

JavaScript 负责 JavaScript 代码的解释与执行，主流的 JavaScript 引擎有：V8、SpiderMonkey、JavaScriptCore、Chakra。

页面呈现原理

一个页面的呈现，粗略的说会经过以下这些步骤：

1. DOM 树的构建（Parse HTML）
2. 构建 CSSOM 树（Recaculate Style） 为什么是 Re-caculate Style 呢？这是因为浏览器本身有 User Agent StyleSheet，所以最终的样式是我们的样式代码样式与用户代理默认样式覆盖/重新计算得到的。
3. 合并 DOM 树与 CSSOM 树为 Render 树
4. 布局（Layout）
5. 绘制（Paint）
6. 复合图层化（Composite）图层化是自己理解后形象的意译其中布局（Layout）环节主要负责各元素尺寸、位置的计算，绘制（Paint）环节则是绘制页面像素信息，合成（Composite）环节是多个复合层的合成，最终合成的页面被用户看到。

• 当遇到 JavaScript 脚本或者外部 JavaScript 代码时，浏览器便停止 DOM 的构建（阻塞 1）

那是否停下 DOM 的构建的同时，立马就执行 JavaScript 代码或者下载外部脚本执行，其实还是要视情况而定，见2

• 当遇到 <script> 标签需要执行脚本代码时，浏览器会检查是否这个 <script> 标签以上的 CSS 文件是否已经加载并用于构建了 CSSOM，如果 <script> 上部还有 CSS 样式没加载，则浏览器会等待 <script> 上方样式的加载完成才会执行该 <script> 内的脚本（阻塞 2）
• DOM 树与 CSSOM 树的成功构建是后面步骤的根基（同步阻塞）
• 同时外部脚本、外部样式表的下载也是耗费时间较多的点

CSS解析器

JavaScript 负责 JavaScript 代码的解释与执行，主流的 JavaScript 引擎有：V8、SpiderMonkey、JavaScriptCore、Chakra。

页面呈现原理

CSS规范定义了css的词法及语法文法。

这个结构在下面的定义中正式的定义了：

ruleset
    : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
    ;

这说明，一个规则集合具有一个或是可选个数的多个选择器，这些选择器以逗号和空格（S表示空格）进行分隔。每个规则集合包含大括号及大括号中的一条或多条以分号隔开的声明。声明和选择器在后面进行定义。

Webkit CSS解析器（Webkit CSS parser）

Webkit使用Flex和Bison解析生成器从CSS语法文件中自动生成解析器。回忆一下解析器的介绍，Bison创建一个自底向上的解析器，Firefox使用自顶向下解析器。它们都是将每个css文件解析为样式表对象，每个对象包含css规则，css规则对象包含选择器和声明对象，以及其他一些符合css语法的对象。