DEV Community
·
🌊布局抖动：它是什么以及如何消除它
💡
原文英文，约1500词，阅读约需6分钟。
📝
内容提要
布局抖动是指因JavaScript修改布局或样式导致浏览器强制同步重计算，从而影响性能。为避免此问题，应将DOM修改和测量操作延迟到帧结束前和下一帧开始后，使用requestAnimationFrame和高优先级任务调度器。
🎯
关键要点
- 布局抖动是指因JavaScript修改布局或样式导致浏览器强制同步重计算，影响性能。
- 布局重计算和重绘是资源密集型操作，频繁执行会导致页面卡顿和无响应。
- 布局重计算和重绘的频率取决于屏幕刷新率和JavaScript的操作。
- 为了避免布局抖动，应将DOM修改和测量操作延迟到帧结束前和下一帧开始后。
- 使用requestAnimationFrame来批量和延迟所有样式修改。
- 在测量布局属性时，确保在样式无效化之前进行，以避免强制重计算。
- 可以使用高优先级任务调度器（如Scheduler或MessageChannel）来安排测量任务。
- 浏览器的性能监控工具可以帮助识别强制重计算的情况。
❓
延伸问答
什么是布局抖动？
布局抖动是指因JavaScript修改布局或样式导致浏览器强制同步重计算，从而影响性能。
布局抖动的原因是什么？
布局抖动发生在用户与页面交互时，浏览器需要不断重新渲染页面的最新版本，导致频繁的布局重计算和重绘。
如何避免布局抖动？
应将DOM修改和测量操作延迟到帧结束前和下一帧开始后，使用requestAnimationFrame来批量和延迟样式修改。
布局重计算和重绘对性能的影响是什么？
布局重计算和重绘是资源密集型操作，频繁执行会导致页面卡顿和无响应。
如何使用浏览器工具监控布局抖动？
可以使用浏览器的性能监控工具，记录操作并检查时间线，强制重计算会显示为紫色框，指示样式重新计算的情况。
requestAnimationFrame在避免布局抖动中有什么作用？
requestAnimationFrame用于批量和延迟所有样式修改，确保在合适的时间进行DOM修改，减少布局抖动的发生。
🏷️
标签
➡️
