前端性能：减少 DOM 节点的实用技巧

// 问题：一次性渲染10000个列表项
const list = document.getElementById('list');
for (let i = 0; i < 10000; i++) {
  const item = document.createElement('li');
  item.textContent = `项目 ${i}`;
  list.appendChild(item);
}

// 只渲染可视区域内的列表项
class VirtualList {
  constructor(container, items, itemHeight) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = Math.ceil(container.clientHeight / itemHeight);
    
    // 只创建可视区域+缓冲区的DOM节点
    this.renderChunk(0);
    
    container.addEventListener('scroll', () => {
      const startIndex = Math.floor(container.scrollTop / itemHeight);
      this.renderChunk(startIndex);
    });
  }
  
  renderChunk(startIndex) {
    // 复用现有DOM节点，只更新内容
    const endIndex = Math.min(startIndex + this.visibleCount + 5, this.items.length);
    
    // 实现节点复用逻辑...
  }
}

const ul = document.getElementById('list');
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `项目 ${i}`;
  ul.appendChild(li); // 每次都会触发重排
}

const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `项目 ${i}`;
  fragment.appendChild(li); // 内存操作，不触发重排
}

ul.appendChild(fragment); // 一次性插入，只触发一次重排

class NodePool {
  constructor(createNode) {
    this.pool = [];
    this.createNode = createNode;
  }
  
  getNode() {
    if (this.pool.length > 0) {
      return this.pool.pop();
    }
    return this.createNode();
  }
  
  releaseNode(node) {
    // 重置节点状态
    node.innerHTML = '';
    this.pool.push(node);
  }
}

// 使用示例
const buttonPool = new NodePool(() => {
  const btn = document.createElement('button');
  btn.className = 'btn';
  return btn;
});

// 需要按钮时从池中获取
const btn = buttonPool.getNode();
btn.textContent = '点击我';

// 使用完毕后放回池中
buttonPool.releaseNode(btn);

<div class="card-container">
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <h3 class="title-text">产品名称</h3>
      </div>
    </div>
  </div>
</div>

<article class="card">
  <header>
    <h3>产品名称</h3>
  </header>
</article>

<button class="btn">
  <span class="icon"></span>
  <span class="text">提交</span>
</button>

<button class="btn icon-submit">提交</button>

.btn.icon-submit::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('icon.svg');
  margin-right: 8px;
}

// Intersection Observer实现懒加载
const lazyElements = document.querySelectorAll('[data-lazy]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const element = entry.target;
      loadContent(element);
      observer.unobserve(element);
    }
  });
});

lazyElements.forEach(element => observer.observe(element));

async function loadContent(element) {
  const dataSrc = element.dataset.src;
  if (dataSrc) {
    const response = await fetch(dataSrc);
    const content = await response.text();
    element.innerHTML = content;
  }
}

class OptimizedCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    
    // 最小化的DOM结构
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          /* 样式隔离 */
        }
        .content {
          padding: 16px;
        }
      </style>
      <div class="content">
        <slot></slot>
      </div>
    `;
  }
  
  // 可以在这里实现高效的更新策略
  updateContent(data) {
    // 复用DOM节点，只更新内容
  }
}

customElements.define('optimized-card', OptimizedCard);