面试真题

前端 · 简单 · 腾讯

重排和重绘在什么阶段做的?怎么尽量避免重排重绘?

简单 前端 🎤 腾讯
参考答案
结论:重排发生在渲染流水线中的布局(Layout/Reflow)阶段,计算元素几何位置尺寸;重绘发生在绘制(Paint)阶段,填充像素。避免方法:1.用transform、opacity走合成层(Compositing)跳过布局和绘制;2.批量DOM操作使用DocumentFragment或离线修改display:none后再改;3.避免逐行改style,用class切换集中改;4.动画用requestAnimationFrame;5.复杂元素position:absolute脱离文档流减少影响范围。读取offsetWidth等会强制同步重排,应缓存值。
题目整理自公开面经,答案由校招宝自研生成,仅供参考