渲染页面的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