- 重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘
- 回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流
- 注意:JS获取Layout属性值(如:
offsetLeft、scrollTop、getComputedStyle等)也会引起回流。因为浏览器需要通过回流计算最新值 - 回流必将引起重绘,而重绘不一定会引起回流
如何最小化重绘(repaint)和回流(reflow):
- 需要要对元素进行复杂的操作时,可以先隐藏(
display:"none"),操作完成后再显示 - 需要创建多个
DOM节点时,使用DocumentFragment创建完后一次性的加入document - 缓存
Layout属性值,如:var left = elem.offsetLeft;这样,多次使用left只产生一次回流 - 尽量避免用
table布局(table元素一旦触发回流就会导致table里所有的其它元素回流) - 避免使用
css表达式(expression),因为每次调用都会重新计算值(包括加载页面) - 尽量使用
css属性简写,如:用border代替border-width,border-style,border-color - 批量修改元素样式:
elem.className和elem.style.cssText代替elem.style.xxx

本文介绍如何通过隐藏元素、使用DocumentFragment、缓存Layout属性、避免table布局和css表达式,来减少DOM操作引发的重绘和回流。了解这些技巧有助于提升网页渲染效率和用户体验。
932

被折叠的 条评论
为什么被折叠?



