页面的渲染

Posted 2020-11-24 zhanghaifeng123

1.浏览器会讲html解析成DOM Tree，构建DOM树是一个深度遍历的过程，当前节点的所有子节点都构建好以后才会去构建当前节点的下一个兄弟节点

2.将css样式解析成CSS Ruler Tree  

如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

3.DOM Tree和 CSS Ruler Tree 组合构建 Render Tree  像header和display：none；这种没有具体内容的东西就不在render树中； 

一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。

回流必将引起重绘，而重绘不一定会引起重回流

 

引起回流

1、添加或者删除可见的DOM元素；

2、元素位置改变——display、float、position、overflow等等；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

如何减少和避免重排

回流的成本比 重绘的成本高得多的多。一个节点的 回流很有可能导致子节点，甚至父节点以及兄弟节点的 回流。在一些高性能的电脑上也许还没什么，但是如果 回流发生在手机上，那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介

1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；

2. 让要操作的元素进行”离线处理”，处理完后一起更新；

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；

4. 让元素脱离动画流，减少回流的Render Tree的规模