本文详细解析了Web页面中重绘与回流的概念，解释了何时会发生回流（涉及元素尺寸和布局变化）和重绘（仅影响元素外观）。讨论了触发回流的属性，如盒子模型和定位，以及只触发重绘的属性。提出了避免重绘回流的策略，包括限制修改影响范围、使用CSS替代方案和离线修改DOM。并给出了优化技巧，如避免循环内获取DOM属性、避免table布局、利用硬件加速等。
什么是回流？
1、当render tree 中的一部分（或全部）因为元素的规模尺寸，布局、隐藏等改变而需要重新构建，这就称为回流
2、当页面布局和几何属性改变时就需要回流
什么是重绘？
1、当render tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就称为重绘。
回流必将引起重绘，而重绘不一定会引起回流
触发页面重布局的属性（回流）
- 盒子模型相关属性会触发重布局
- 定位属性及浮动会触发重布局
- 改变节点内部文字结构会触发重布局
订阅专栏 解锁全文
扫一扫
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
