浏览器--渲染引擎&JavaScript引擎

渲染引擎

1. 渲染引擎的主要作用是，将网页代码渲染为用户视觉可以感知的平面文档。
   1. Firefox：Gecko 引擎
   2. Safari：WebKit 引擎
   3. Chrome：Blink 引擎
   4. IE: Trident 引擎
   5. Edge: EdgeHTML 引擎
2. 渲染引擎处理网页，通常分成四个阶段。
   1. 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
   2. 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
   3. 布局：计算出渲染树的布局（layout）。
   4. 绘制：将渲染树绘制到屏幕。
3. 重绘回流 优化技巧
   1. 读取 DOM 或者写入 DOM，尽量写在一起，不要混杂。不要读取一个 DOM 节点，然后立刻写入，接着再读取一个 DOM 节点。
   2. 缓存 DOM 信息。
   3. 不要一项一项地改变样式，而是使用 CSS class 一次性改变样式。
   4. 使用documentFragment操作 DOM
   5. 动画使用absolute定位或fixed定位，这样可以减少对其他元素的影响。
   6. 使用window.requestAnimationFrame()，因为它可以把代码推迟到下一次重绘之前执行，而不是立即要求页面重绘。

JavaScript 解释器（又称 JavaScript 引擎）

1. 常见的一些 JavaScript 虚拟机
   1. Chakra (Microsoft Internet Explorer)
   2. Nitro/JavaScript Core (Safari)
   3. Carakan (Opera)
   4. SpiderMonkey (Firefox)
   5. V8 (Chrome, Chromium)