浏览器渲染页面的流程

  渲染页面的5个过程：

　　1.解析HTML

　　2.解析CSS

　　3.构建Render Tree

　　4.布局（layout）

　　5.渲染（Paiting）

　　在解析HTML 构建DOM树和解析CSS构建CSSOM（CSS Object Model）的过程中如果碰到script标签就会停止对DOM书和CSSOM的构建，会立即进行script脚本的运行，因为

script脚本能操作DOM以及CSS，script在操作DOM以及CSS的时候可能会对DOM树以及CSSOM进行一些修改或者添加就会使一些节点发生变化，也就是让树的解构发生了变化，所以

会先进行script标签中的内容解析，所以我们的script标签最好写在最后一个body的上边。

　　CSS解析时一些注意的事项：

　　　　1.CSS解析可以与DOM解析同时进行

　　　　2.CSS解析与JS解析是互斥的

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

　　构建渲染树时需要注意：

　　　　1.Render Tree和DOM Tree不完全对应

　　　　2.display:none的元素不在Render Tree树中

　　　　3.visibility：hidden的元素在Render Tree树中

　　渲染树布局时需要注意的：

　　　　1.float元素 absolute元素 fixed元素都会发生位置偏移

　　　　2.我们常说的脱离文档流就是脱离Render Tree

　　script标签的位置很重要我们在开发中应该尽量坚持这两个规则：

　　　　1.在引入顺序上，CSS资源先于javascript资源

　　　　2.JavaScript应该尽量少去影响DOM的构建

　　HTML默认是流失布局的，CSS和JavaScript都会打破这种布局，都会改变DOM的外观样式及大小

　　　　1.reflow（回流）:当浏览器发生某个部分发生了变化从而影响了布局，这个时候就需要倒回去重新渲染，这个过程为回流

　　　　2.repaint（重绘）：repaint则是当我们改变某个元素的背景色，文字颜色，边框颜色等等不影响他周围或内部布局的属性时，屏幕的一部分重绘，但是元素的几何尺寸和位置都没有发生改变

　　　　需要注意的是：display:none会触发reflow，而visibility：hidden则不会触发reflow触发的是repaint会重新渲染

　　　　我们不能避免reflow，但还是能通过一些操作来减少回流：

　　　　　　1.用transform来做形变和位移

　　　　　　2.通过绝对位移来脱离当前层叠上下文，形成新的Render Layer

　　　　

有以下几点可以优化渲染效率

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

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

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

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

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

6.尽量用 transform 来做形变和位移