浏览器渲染页面流程

1、浏览器是如何渲染页面的

   浏览器渲染页面主要分为五步：

       #获取html文档并解析生成DOM树  

       #处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。

       #将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象

       #渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。

       #将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting.

2、浏览器渲染网页的具体流程

    2.1构建DOM树

    当浏览器客户端从服务器那接受到HTML文档后，就会遍历文档节点然后生成DOM树，DOM树结构和HTML标签一一对应。需要注意记下几点：

    DOM树在构建的过程中可能会被CSS和JS的加载而执行阻塞。

    display:none 的元素也会在DOM树中。

    注释也会在DOM树中

    script标签会在DOM树中

    2.2 CSS解析

    浏览器会解析CSS文件并生成CSS规则树，在过程中，每个CSS文件都会被分析成StyleSheet对象，每个对象都包括CSS规则，CSS规则对象包括对应的选择器和声明对象以及其他对象。

    在这个过程需要注意的是：

    CSS解析可以与DOM解析同进行。

    CSS解析与script的执行互斥 。

    在Webkit内核中进行了script执行优化，只有在JS访问CSS时才会发生互斥。

    2.3 构建渲染树（Rendr tree construction）

    通过DOM树和CSS规则树，浏览器就可以通过它两构建渲染树了。浏览器会先从DOM树的根节点开始遍历每个可见节点，让后对每个可见节点找到适配的CSS样式规则并应用。具体的规则有以下几点需要注意：

    Render Tree和DOM Tree不完全对应。

    display: none的元素不在Render Tree中

    visibility: hidden的元素在Render Tree中

    2.4 渲染树布局(layout of the render tree)

    布局阶段会从渲染树的更节点开始遍历，由于渲染树的每个节点都是一个Render Object对象，包含宽高，位置，背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。需要注意的是：

float元素，absoulte元素，fixed元素会发生位置偏移。

    我们常说的脱离文档流，其实就是脱离Render Tree。

2.5 渲染树绘制（Painting the render tree）

    在绘制阶段，浏览器会遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

3 几条关于优化渲染效率的建议:

    结合上文和我看到的一些文章，有以下几点可以优化渲染效率

    合法地去书写 HTML 和 CSS ，且不要忘了文档编码类型。

    样式文件应当在 head 标签中，而脚本文件在 body 结束前，这样可以防止阻塞的方式。

    简化并优化CSS选择器，尽量将嵌套层减少到最小。

    尽量减少在 JavaScript 中进行DOM操作。

    修改元素样式时，更改其class属性是性能最高的方法。

    尽量用 transform 来做形变和位移