面试题：JavaScript 中复杂 DOM 交互场景下的性能瓶颈与优化

性能问题原因分析

浏览器渲染原理相关
- 重排（回流）与重绘：频繁的 DOM 操作，如添加、删除元素或改变元素的几何属性（如宽、高、位置等），会导致重排。重排会重新计算元素的布局，代价较高，浏览器需要重新构建渲染树，影响性能。例如，在拖拽元素过程中，不断改变其位置就可能频繁触发重排。改变元素的外观属性（如颜色、背景色等）会触发重绘，虽然重绘的代价比重排低，但频繁重绘也会影响性能。
- 渲染层合并：复杂的 DOM 结构可能导致浏览器创建过多的渲染层，而渲染层之间的合成也需要一定的开销。如果元素的层叠上下文复杂，比如有很多元素设置了 position: fixed 或 z - index 且层级关系复杂，会增加渲染层合并的难度和开销。
JavaScript 事件机制相关
- 事件处理函数执行：在动态交互场景中，如拖拽，会频繁触发 mousedown、mousemove、mouseup 等事件。如果事件处理函数中包含大量复杂的 DOM 操作，每触发一次事件都会执行这些操作，导致性能问题。例如，在 mousemove 事件处理函数中不断修改多个元素的样式或属性。
- 事件冒泡与捕获：大量的事件冒泡或捕获，尤其是在嵌套的 DOM 结构中，会增加事件处理的复杂度。如果父元素和子元素都有事件监听器，事件冒泡或捕获过程中，每个监听器都可能执行相关操作，导致不必要的性能消耗。

优化方案

基于浏览器渲染原理的优化
- 减少重排与重绘：
  - 批量操作 DOM：使用文档片段（DocumentFragment）来批量处理 DOM 操作。例如，当需要添加多个子元素到某个父元素时，先将这些子元素创建并添加到文档片段中，然后一次性将文档片段添加到目标父元素，这样只会触发一次重排。
```
const parent = document.getElementById('parent');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
  const child = document.createElement('div');
  fragment.appendChild(child);
}
parent.appendChild(fragment);
```
  - 改变元素样式时使用 class 切换：避免直接在 JavaScript 中频繁修改元素的样式属性。例如，要改变元素的显示状态，定义两个 class，一个显示，一个隐藏，通过切换 class 来改变元素状态，这样只触发一次重排和重绘。
```
/* CSS 定义 */
```
.show { display: block; } .hide { display: none; }
```
```javascript
// JavaScript 操作
const element = document.getElementById('element');
element.classList.add('hide');
```
- 优化渲染层合并：
  - 合理设置层叠上下文：尽量简化元素的 z - index 层级关系，避免不必要的 position: fixed 或 absolute 定位。如果确实需要使用这些定位，确保它们在合理的层级结构内，减少渲染层的创建。
  - 使用 will - change 提示：对于那些即将发生变化的元素，提前使用 will - change 属性告知浏览器，让浏览器有机会提前优化。例如，对于即将被拖拽的元素，可以提前设置 will - change: transform，浏览器可能会提前为该元素的变换操作做一些优化准备。

基于 JavaScript 事件机制的优化

优化事件处理函数：

防抖与节流：对于频繁触发的事件，如 mousemove、scroll 等，使用防抖（Debounce）或节流（Throttle）技术。防抖是指在事件触发后，延迟一定时间执行回调函数，如果在延迟时间内再次触发事件，则重新计算延迟时间，直到事件不再触发才执行回调。节流是指在一定时间内，只允许事件处理函数执行一次。例如，在搜索框输入时，使用防抖技术可以避免频繁发起搜索请求。

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
// 使用防抖
const searchInput = document.getElementById('searchInput');
const debouncedSearch = debounce(() => {
  // 执行搜索逻辑
}, 300);
searchInput.addEventListener('input', debouncedSearch);

// 节流函数
function throttle(func, interval) {
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = new Date().getTime();
    if (now - lastTime >= interval) {
      func.apply(context, args);
      lastTime = now;
    }
  };
}
// 使用节流
const scrollHandler = throttle(() => {
  // 执行滚动处理逻辑
}, 200);
window.addEventListener('scroll', scrollHandler);

合理处理事件冒泡与捕获：
- 事件委托：利用事件冒泡机制，将事件监听器添加到父元素上，通过判断事件源来处理不同子元素的事件。例如，在一个列表中，每个列表项都有点击事件，将点击事件监听器添加到列表的父元素上，通过判断 event.target 来确定点击的是哪个列表项，这样可以减少事件监听器的数量，提高性能。
```
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```
```
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    // 处理列表项点击逻辑
  }
});
```

性能监测与验证优化效果

使用浏览器开发者工具
- Chrome DevTools：
  - Performance 面板：可以录制页面操作过程，如拖拽、数据更新等。它会详细记录每个事件的触发时间、重排重绘的次数和时间、JavaScript 函数的执行时间等信息。通过分析这些数据，可以定位性能瓶颈。例如，在录制的结果中，如果发现某个 mousemove 事件处理函数执行时间过长，就可以针对性地进行优化。
  - Layers 面板：用于查看页面的渲染层结构，分析是否存在过多的渲染层以及渲染层合并的情况。如果发现渲染层过多，可以根据前面提到的优化渲染层合并的方法进行调整，然后再次查看 Layers 面板，验证优化效果。
第三方性能监测工具
- Lighthouse：这是一款开源的自动化工具，可用于改善网络应用的质量。它可以对页面进行全面的性能审计，包括性能、可访问性、最佳实践等方面。在性能方面，它会给出详细的得分和建议，如是否存在频繁的重排重绘、长任务等问题。可以在优化前后分别运行 Lighthouse，对比得分和报告，验证优化效果。
- GTmetrix：同样提供全面的性能分析，通过模拟不同的网络环境来测试页面性能。它会给出页面加载时间、资源大小、渲染时间等详细数据，帮助开发者了解优化前后页面性能的变化。

星途面试题库

面试题：JavaScript 中复杂 DOM 交互场景下的性能瓶颈与优化

知识考点

面试题答案

性能问题原因分析

优化方案

性能监测与验证优化效果