浏览器渲染页面的流程
渲染页面的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
