浏览器的构成和运行机制

浏览器的构成和运行机制

　　浏览器内核：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。

　　浏览器的功能模块： HTML 解释器：将 HTML 文档经过词法分析输出 DOM 树。

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

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

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

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

　　渲染机制： 

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

• 解析CSS                                                                                                                                                                                                                                                                                                       用Css解析器解析css文件生成CSSOM树。

• 合并CSS和HTML
  浏览器将CSS树与 DOM 树合并，最终生成页面 render 树（:after :before 这样的伪元素会在这个环节被构建到 DOM 树中）。

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

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

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