请解释回流（Reflow）和重绘（Repaint）的概念，什么场景下会触发？

核心概念解析

回流（Reflow）

当页面布局发生几何属性变化时，浏览器需要重新计算元素的位置和尺寸，这个过程称为回流。回流会导致子节点和祖先节点连锁更新，是性能消耗的主要来源。

// 典型回流场景示例
const element = document.getElementById('box');
element.style.width = '300px'; // 触发回流
element.style.height = '200px'; // 再次触发回流

重绘（Repaint）

当元素外观样式改变但不影响布局时（如颜色、背景等），浏览器会执行重绘操作。重绘不涉及布局计算，性能消耗相对较小。

// 典型重绘场景示例
element.style.color = 'red'; // 仅触发重绘
element.style.backgroundColor = '#f0f0f0'; // 再次触发重绘

高频触发场景分析

强制触发回流的操作

1. 几何属性修改：width/height/padding/margin
2. 布局相关属性：display/position/float
3. 内容变化：文字数量/图片尺寸
4. 窗口缩放：viewport尺寸变化
5. 滚动操作：scrollTop/scrollLeft

仅触发重绘的操作

1. 颜色属性：color/background-color
2. 装饰属性：visibility/outline
3. 背景样式：background-image/background-size
4. 文字样式：text-decoration/font-style

性能优化实战策略

1. 样式集中处理（减少操作次数）

// 错误示范：多次触发回流
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';

// 正确做法：使用class或cssText
element.classList.add('new-style');
// 或
element.style.cssText = 'width:100px; height:200px; margin:10px;';

2. 文档碎片优化DOM操作

// 常规插入方式（多次回流）
const ul = document.getElementById('list');
for(let i = 0; i < 10; i++) {
    const li = document.createElement('li');
    ul.appendChild(li); // 每次插入都触发回流
}

// 使用文档碎片（单次回流）
const fragment = document.createDocumentFragment();
for(let i = 0; i < 10; i++) {
    const li = document.createElement('li');
    fragment.appendChild(li);
}
ul.appendChild(fragment);

3. 读写分离原则

// 错误写法：读写交替导致强制同步布局
const width = element.offsetWidth; // 触发回流
element.style.width = width + 10 + 'px'; // 写操作
const height = element.offsetHeight; // 再次触发回流

// 正确写法：批量读取后统一写入
const width = element.offsetWidth;
const height = element.offsetHeight;

element.style.width = width + 10 + 'px';
element.style.height = height + 10 + 'px';

4. 动画性能优化

// 传统动画的问题
function animate() {
    element.style.left = (parseInt(element.style.left) + 1) + 'px';
    requestAnimationFrame(animate); // 每帧都可能触发回流
}

// 优化方案：使用transform
function optimizedAnimate() {
    element.style.transform = `translateX(${pos}px)`; // 启用GPU加速
    requestAnimationFrame(optimizedAnimate);
}

5. 布局抖动（Layout Thrashing）防范

// 典型布局抖动案例
const elements = document.querySelectorAll('.item');
elements.forEach(el => {
    const width = el.offsetWidth; // 触发回流
    el.style.width = width + 10 + 'px'; // 再次触发回流
});

// 优化方案：分离读写
const elements = document.querySelectorAll('.item');
const sizes = [];

// 批量读取
elements.forEach(el => {
    sizes.push(el.offsetWidth);
});

// 批量写入
elements.forEach((el, index) => {
    el.style.width = sizes[index] + 10 + 'px';
});

实战注意事项

1. CSS选择器优化：避免深层级嵌套选择器（如 .nav > ul > li > a），建议使用 BEM 命名规范

2. 表格布局陷阱：避免使用 table 布局，单个单元格变化会触发整个表格回流

3. CSS3硬件加速：合理使用 transform/opacity/filter 等属性，但注意避免滥用导致内存问题

4. 可视区域优化：对长列表使用虚拟滚动技术，参考方案：

// 虚拟滚动核心逻辑
function renderVisibleItems() {
    const scrollTop = container.scrollTop;
    const startIdx = Math.floor(scrollTop / itemHeight);
    const endIdx = startIdx + visibleCount;
    
    // 复用DOM节点
    items.slice(startIdx, endIdx).forEach((item, index) => {
        const top = (startIdx + index) * itemHeight;
        item.style.transform = `translateY(${top}px)`;
    });
}

1. ResizeObserver 使用：现代浏览器布局监听方案

const observer = new ResizeObserver(entries => {
    entries.forEach(entry => {
        // 统一处理尺寸变化
    });
});
observer.observe(element);

性能检测工具

1. Chrome DevTools Performance 面板
2. Layout Shift 可视化工具
3. Rendering 面板的 Paint flashing 功能

总结建议

1. 将频繁操作的元素设置为 position: absolute/fixed 脱离文档流
2. 复杂动画优先考虑 CSS3 动画而非 JavaScript 控制
3. 使用 will-change 属性提前告知浏览器变化预期
4. 避免在循环中执行 offsetTop 等强制回流操作
5. 服务端渲染时注意首屏内容稳定性，避免布局抖动

通过合理应用这些优化策略，可以将页面渲染性能提升 50% 以上。建议在项目初期建立性能监控机制，对关键交互进行持续性能分析。