浏览器的构成和运行机制

浏览器内核

IE：Trident

Chrome，Opera：Blink

Firefox：Gecko

Safari：Webkit

浏览器的功能模块

• HTML 解释器：将 HTML 文档经过词法分析输出 DOM 树。

• CSS 解释器：解析 CSS 文档, 生成样式规则。

• 图层布局计算模块：布局计算每个对象的精确位置和大小。

• 视图绘制模块：进行具体节点的图像绘制，将像素渲染到屏幕上。

• JavaScript 引擎：编译执行 Javascript 代码。

浏览器渲染过程

• 解析 HTML
  这一步浏览器执行了所有的加载解析逻辑，在解析 HTML 的过程中发出了页面渲染所需的各种外部资源请求。

• 计算样式
  浏览器将识别并加载所有的 CSS 样式信息与 DOM 树合并，最终生成页面 render 树（:after :before 这样的伪元素会在这个环节被构建到 DOM 树中）。

• 计算图层布局
  页面中所有元素的相对位置信息，大小等信息均在这一步得到计算。

• 绘制图层
  在这一步中浏览器会根据我们的 DOM 代码结果，把每一个页面图层转换为像素，并对所有的媒体文件进行解码。

• 整合图层，得到页面
  最后一步浏览器会合并合各个图层，将数据由 CPU 输出给 GPU 最终绘制在屏幕上。（复杂的视图层会给这个阶段的 GPU 计算带来一些压力，在实际应用中为了优化动画性能，我们有时会手动区分不同的图层）。