超级会员免费看
本文介绍了浏览器页面呈现的流程，包括DOM树、样式结构体和渲染树的构建。详细讨论了回流和重绘的概念，强调回流的成本高于重绘。文中列举了可能导致回流和重绘的各种操作，并提供了减少回流、重绘的优化建议，如一次性更改样式、离线处理元素和避免频繁读取特定样式属性。
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。
页面呈现流程：
1、 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)。
dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构，里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。
2、浏览器把所有样式（主要包括css和浏览器的样式设置）解析成样式结构体。
在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。
3、dom tree和样式结构体结合后构建呈现渲染树（render tree），render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。
注意：visibility:hidden隐藏的元素还是会包含到render tre
订阅专栏 解锁全文
扫一扫
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
