css 减少页面重绘重排怎么做

减少页面重绘重排的核心就是一句话：尽量少动布局属性，多用 GPU 加速属性，DOM 操作要批量。只要避开强制浏览器重新计算页面布局，就能显著提升页面渲染性能。

CSS 中哪些属性会导致重排

结论：凡是改变元素在文档流中物理位置的属性（宽高、内外边距、边框、定位）都会触发重排，字体属性和定位属性也会触发。解释：重排是指浏览器需要重新计算元素的位置和几何形状。修改 width、height、margin、padding、top、left、border 等属性，浏览器必须重新计算整个文档流，这是最耗性能的操作。注意：visibility: hidden 仅触发重绘，不会触发重排，因为元素位置没变，只是看不见了。

如何使用 CSS 优化技巧减少重绘

结论：优先使用 transform 和 opacity 进行动画，配合 will-change 属性提前告知浏览器。解释：transform: translate3d(0, 0, 0) 或 scale() 可以开启 GPU 硬件加速，这些属性只触发重绘，不触发重排。相比之下，使用 top、left 进行位移是触发重排的元凶。will-change: transform 属性告诉浏览器“这个元素马上要变了，请提前做好准备”，能将合成操作推迟到下一帧，减少主线程压力。

批量操作 DOM 时如何避免重排

结论：使用文档片段和 requestAnimationFrame 进行批量更新。解释：在循环中频繁操作 DOM（如 appendChild）会触发多次重排，性能极差。正确做法是先在内存中构建好 HTML 结构，包裹在 DocumentFragment 中，然后一次性插入页面，这样只触发一次重排。此外，使用 requestAnimationFrame 将 DOM 操作安排在浏览器的下一帧渲染前执行，确保布局计算与渲染周期同步，避免阻塞主线程。