DOM 操作与优化

// 批量DOM操作优化
function optimizedDOMOperations() {
  // ❌ 不好的做法：多次操作DOM
  for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    document.body.appendChild(div); // 每次都触发重排
  }

  // ✅ 好的做法：使用DocumentFragment
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
  }
  document.body.appendChild(fragment); // 只触发一次重排
}

// 缓存DOM引用
function cacheDOMReferences() {
  // ❌ 不好的做法：重复查询DOM
  function updateElement() {
    document.getElementById('myElement').style.color = 'red';
    document.getElementById('myElement').style.fontSize = '16px';
    document.getElementById('myElement').style.backgroundColor = 'blue';
  }

  // ✅ 好的做法：缓存DOM引用
  const element = document.getElementById('myElement');
  function updateElementOptimized() {
    element.style.color = 'red';
    element.style.fontSize = '16px';
    element.style.backgroundColor = 'blue';
  }
}

// 事件委托示例
function eventDelegation() {
  // ❌ 不好的做法：为每个按钮添加事件监听器
  const buttons = document.querySelectorAll('.button');
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      console.log('按钮被点击:', this.textContent);
    });
  });

  // ✅ 好的做法：使用事件委托
  document.addEventListener('click', function(event) {
    if (event.target.classList.contains('button')) {
      console.log('按钮被点击:', event.target.textContent);
    }
  });
}

// 批量样式修改
function batchStyleUpdates() {
  const element = document.getElementById('myElement');
  
  // ❌ 不好的做法：多次修改样式
  element.style.width = '100px';
  element.style.height = '100px';
  element.style.backgroundColor = 'red';
  element.style.color = 'white';

  // ✅ 好的做法：批量修改样式
  element.style.cssText = 'width: 100px; height: 100px; background-color: red; color: white;';
  
  // 或者使用CSS类
  element.className = 'highlighted';
}