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

摘要：浏览器内核又叫渲染引擎，主要负责的解析，页面布局渲染与复合层合成。页面呈现原理规范定义了的词法及语法文法。解析器使用和解析生成器从语法文件中自动生成解析器。回忆一下解析器的介绍，创建一个自底向上的解析器，使用自顶向下解析器。

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

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

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

Firefox

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

webkit 包含了许多不同平台对webkit封装的实现，即抽象出了与浏览器所能直接对应的一些概念的实现。如，WebView, WebPage, WebFrame等

WebCore 实现了对文档的模型化，包括了CSS，DOM，Render等的实现

JavaScript Core 对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

当遇到