优化重排（Reflow）与重绘（Repaint）的策略

描述
重排（Refflow）与重绘（Repaint）是浏览器渲染过程中的关键环节，直接影响前端性能。重排指浏览器重新计算元素几何属性（如尺寸、位置），导致页面布局变化；重绘则是在元素外观改变（如颜色、背景）但布局不变时触发的像素更新。重排必然引发重绘，但重绘不一定触发重排。高频操作（如滚动、动画）可能引发连续重排重绘，导致页面卡顿。

解题过程

1. 理解触发条件

   • 重排常见场景：
     • 修改元素尺寸（width/height）、边距（margin/padding）或位置（top/left）。
     • 增删DOM节点或元素内容变化。
     • 页面初始化或窗口缩放（resize）事件。
   • 重绘常见场景：
     • 修改颜色（color）、背景（background）、边框样式（border-style）等非几何属性。

2. 优化原则：减少重排范围与次数

   • 批量DOM操作：
     使用文档片段（DocumentFragment）或离线DOM（如隐藏元素）进行多次修改，完成后一次性插入页面。
     示例：

     // 不推荐：每次修改触发重排  
     for (let i = 0; i < 100; i++) {  
       const div = document.createElement('div');  
       document.body.appendChild(div); // 每次appendChild可能触发重排  
     }  
     
     // 推荐：使用DocumentFragment批量操作  
     const fragment = document.createDocumentFragment();  
     for (let i = 0; i < 100; i++) {  
       const div = document.createElement('div');  
       fragment.appendChild(div);  
     }  
     document.body.appendChild(fragment); // 仅一次重排  
     

   • 避免逐项修改样式：
     通过CSS类名（className）或cssText一次性修改样式，而非多次操作style属性。
     示例：

     // 不推荐：多次重排  
     element.style.width = '100px';  
     element.style.height = '200px';  
     
     // 推荐：合并修改  
     element.style.cssText = 'width: 100px; height: 200px;';  
     // 或通过类名切换  
     element.className = 'new-style';  
     

3. 减少重排影响范围

   • 使用绝对定位（absolute/fixed）：
     对复杂动画元素设置position: absolute/fixed，使其脱离文档流，重排时仅影响自身而非整个页面。
   • 避免表格布局：
     表格（table）中某个单元格的重排可能引发整个表格重新计算，优先使用Flex/Grid布局。

4. 利用浏览器优化机制

   • 缓存布局信息：
     多次读取偏移量属性（如offsetTop、clientWidth）时，先缓存到变量，避免浏览器强制重排以返回最新值。
     示例：

     // 不推荐：每次读取触发重排  
     const width = element.clientWidth;  
     element.style.width = width + 10 + 'px';  
     const height = element.clientHeight; // 此处浏览器需重排以获取最新高度  
     element.style.height = height + 10 + 'px';  
     
     // 推荐：缓存布局信息  
     const width = element.clientWidth;  
     const height = element.clientHeight;  
     element.style.width = width + 10 + 'px';  
     element.style.height = height + 10 + 'px'; // 仅一次重排  
     

   • 使用现代API：
     CSS3的transform和opacity属性动效由合成层单独处理，跳过重排与重绘，直接触发合成（Composite）。

5. 开发者工具检测

   • 浏览器DevTools的Performance面板可录制页面操作，分析重排重绘的触发频率与耗时。
   • Rendering工具中开启“Paint flashing”高亮重绘区域，定位性能瓶颈。

总结
优化核心是将重排重绘控制在最小范围和频率。通过批量操作、减少布局信息读取、优先使用CSS3动效等手段，可显著提升页面流畅度。