浏览器的重绘和重排
2016-09-21 11:46:33 6 举报AI智能生成
这个思维导图是根据博文《浏览器的重绘和重排》（http://kb.cnblogs.com/page/169820/）所整理，如有异议烦请不吝赐教
作者其他创作
大纲/内容
浏览器加载页面的过程
1. 构建DOM树
2. 构建渲染树
3. 绘制页面
重绘（redraw）
重绘是一个元素外观的改变所触发的浏览器行为
重绘不会带来重新布局，并不一定伴随重排
触发重绘的操作
改变visibility、outline、背景色等属性
重排（reflow）
重排是更明显的一种改变，可以理解为渲染树需要重新计算
重排一定会引起浏览器的重绘
子主题
触发重排的操作
DOM元素的几何属性变化
渲染树中的相关节点会失效并重新构建
DOM树的结构变化
例如节点的增减、移动等
通常当前元素不会再影响其前面已经遍历过的元素
获取某些属性
例如offsetTop、scrollTop、clientTop
调整浏览器窗口大小
改变元素的一些样式
优化重排的方案
尽量减少重排次数
将多次改变样式属性的操作合并成一次操作
操作多个样式属性改为操作类
先在内存中操作节点，再添加到文档中
获取那些引起浏览器重排的属性值时先缓存到变量
浏览器引擎的优化
等到有足够数量的变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排
少用table，因为table系元素可能需要多次计算才能确定好其在渲染树中节点的属性
缩小重排的影响范围
将需要多次重排的元素脱离文档流
position设为absolute或fixed
操作隐藏的元素不会引起其它元素的重排
display设为none
0 条评论
下一页
