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