浏览器渲染流程如下图所示:
渲染的流程如下:
1. 解析HTML文件,创建 DOM 树
(自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。)
2. 解析CSS文件,构建 CSSOM Tree(CSS规则树)
优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
3. 将CSS与DOM合并,构建渲染树(Render Tree)
4. reflow(重排):根据Render tree进行节点信息计算(Layout)
5. repaint(重绘):根据计算好的信息绘制整个页面(Painting)
理论上,每一次的dom更改或者css几何属性更改,都会引起一次浏览器的重排/重绘过程,而如果是css的非几何属性更改,则只会引起重绘过程。所以说重排一定会引起重绘,而重绘不一定会引起重排
JS也参与DOM 树的构建,浏览器会先执行js再开始构建渲染树。所以说:JS脚本会阻塞
Render tree的构建,阻塞了页面的渲染
。
我们可以在把script脚本放于body后面,来解决上面的问题。
重排也叫回流:实际上,reflow的字面意思也是回流,之所以有的叫做重排,也许是因为更符合中国人的思维。标准文档之所以叫做回流(Reflow),是因为浏览器渲染是基于“流式布局”的模型,流实际就使我们常说的文档流,当dom或者css几何属性发生改变的时候,文档流会受到波动联动的去更改。
重绘repaint:就是当页面中元素样式的改变并不影响它在文档流中的位置时,例如更改了字体颜色,浏览器会将新样式赋予给元素并重新绘制的过程称。
常见引起浏览器绘制过程的属性:
重排一定会引起重绘,而重绘不一定会引起重排 那如何减少重排 如下:
1.避免设置大量的style属性 style属性改变结点样式,每设置一次会触发一次reflow重排(回流) 最好使用class属性
2.position属性 最好是设为absoulte或fixe 不会影响其他布局;
3.动画实现的速度的如果太慢 以1个像素
为单位移动这样最平滑 大量消耗CPU,以3个像素为单位移动则会好很多
4.不要使用table布局,因为table中某个元素旦触发了reflow,那么整个table的元素都会触发reflow。
原文地址:https://www.cnblogs.com/yang1997/p/12104932.html