浏览器背后的运行机制、浏览器内核

 

　　浏览器内核

           Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。

　　浏览器的功能模块

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

　　　（2）CSS 解释器：解析 CSS 文档, 生成样式规则，生成CSSOM树。

　　　（3）图层布局计算模块：布局计算每个对象的精确位置和大小，生成render树。

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

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

　　渲染机制

（1）解析 HTML

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

（2）解析CSS                                                                                                                                                                                    用Css解析器解析css文件生成CSSOM树。

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

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

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

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

看看这篇文章