如何用Vanilla JS减少DOM更新，避免列表不必要重渲染？

要解决每次点击都全量重绘DOM的问题，核心是只更新数据变化对应的DOM节点，而非清空整个列表重绘。下面是基于原生JS的实现，完美适配从API获取动态变化列表的场景：

document.getElementById('button').addEventListener('click', async (e) => {
  // 替换为真实API请求逻辑，这里用模拟函数演示
  const newList = await fetchDynamicList();
  const outputContainer = document.getElementById('output');
  const existingItems = outputContainer.querySelectorAll('li');
  
  // 用Map存储现有列表项的文本与对应节点，实现快速查找
  const existingItemMap = new Map();
  existingItems.forEach(item => {
    existingItemMap.set(item.textContent.trim(), item);
  });

  // 遍历新数据，处理新增或需保留的项
  newList.forEach(itemText => {
    const trimmedText = itemText.trim();
    if (existingItemMap.has(trimmedText)) {
      // 内容已存在，从映射中移除（标记为保留）
      existingItemMap.delete(trimmedText);
    } else {
      // 内容不存在，创建新节点添加到列表
      const listItem = document.createElement('li');
      listItem.textContent = trimmedText;
      outputContainer.appendChild(listItem);
    }
  });

  // 删除DOM中不在新数据里的冗余节点
  existingItemMap.forEach(item => {
    outputContainer.removeChild(item);
  });
});

// 模拟API请求，实际开发中替换为你的接口调用
async function fetchDynamicList() {
  return new Promise(resolve => {
    setTimeout(() => {
      // 模拟每次返回不同的列表数据
      const possibleLists = [
        ['item1', 'item2', 'item3'],
        ['item1', 'item3', 'item4'],
        ['item2', 'item4', 'item5']
      ];
      resolve(possibleLists[Math.floor(Math.random() * possibleLists.length)]);
    }, 500);
  });
}

<button id="button">Get list</button>
<ul id="output"></ul>

核心逻辑说明 #

• 映射现有节点：通过Map把已存在的列表项文本和DOM节点关联，实现O(1)时间复杂度的查找操作
• 增量更新：遍历新列表时，仅对不存在的项创建新节点；已存在的项标记为保留，不做任何DOM操作
• 清理冗余：最后删除映射中剩余的节点（即新列表里没有的旧项），完成DOM同步
• 异步兼容：用async/await适配API请求的异步特性，贴合真实业务场景

这种方式只会对新增、删除的节点进行操作，完全避免了无意义的全量清空重绘，大幅提升性能。

内容的提问来源于stack exchange，提问作者ness_cons