编辑“︁JavaScript性能优化”︁（章节）

== 常见优化技术 ==

=== 1. 减少重绘与回流 ===
浏览器渲染过程中的两个重要概念：
* '''回流(Reflow)'''：当元素的几何属性发生变化时
* '''重绘(Repaint)'''：当元素外观改变但不影响布局时

优化建议：
<syntaxhighlight lang="javascript">
// 不良实践 - 多次修改样式导致多次重排
const element = document.getElementById('myElement');
element.style.width = '100px';
element.style.height = '200px';
element.style.left = '10px';

// 优化方案 - 使用class或cssText一次性修改
element.classList.add('new-style');
// 或
element.style.cssText = 'width:100px; height:200px; left:10px;';
</syntaxhighlight>

=== 2. 事件委托 ===
减少事件监听器数量的技术：
<syntaxhighlight lang="javascript">
// 传统方式 - 每个按钮都有监听器
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', handleClick);
});

// 事件委托 - 单个父元素监听
document.getElementById('buttonContainer').addEventListener('click', (e) => {
  if(e.target.classList.contains('btn')) {
    handleClick(e);
  }
});
</syntaxhighlight>

=== 3. 节流与防抖 ===
控制高频事件触发频率的技术：

{| class="wikitable"
|+ 节流(Throttle) vs 防抖(Debounce)
! 技术 !! 描述 !! 适用场景

| 节流 || 固定时间间隔执行一次 || 滚动事件、窗口调整

| 防抖 || 停止触发后延迟执行 || 搜索建议、输入验证
|}

实现示例：
<syntaxhighlight lang="javascript">
// 节流实现
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 防抖实现
function debounce(func, delay) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(context, args), delay);
  };
}
</syntaxhighlight>

=== 4. 内存管理 ===
常见内存泄漏场景及解决方案：

<mermaid>
graph LR
    A[常见内存泄漏] --> B[全局变量]
    A --> C[遗忘的定时器]
    A --> D[DOM引用]
    A --> E[闭包滥用]
</mermaid>

优化示例：
<syntaxhighlight lang="javascript">
// 不良实践 - 内存泄漏
function createHeavyObject() {
  const heavyArray = new Array(1000000).fill('data');
  return function() {
    console.log(heavyArray.length);
  };
}

// 优化方案 - 及时释放
function createOptimizedObject() {
  const heavyArray = new Array(1000000).fill('data');
  return {
    getSize: () => heavyArray.length,
    cleanup: () => { heavyArray.length = 0; }
  };
}
</syntaxhighlight>