✅ 推荐方案：replaceChildren() + 智能更新判断

现代浏览器（Chrome 86+、Firefox 78+、Safari 14.1+、Edge 86+）已广泛支持 Element.replaceChildren()，它原子化地清空并替换所有子节点，语义清晰、性能更优，且无需手动遍历删除：

const outputContainer = document.getElementById('output');

const onButtonClick = () => {
  const arr = ['item1', 'item2', 'item3']; // 实际中可来自 fetch() 响应

  // ✅ 简洁高效：一步完成清空 + 批量插入
  outputContainer.replaceChildren(
    ...arr.map(text => {
      const li = document.createElement('li');
      li.textContent = text; // 推荐用 textContent 而非 createTextNode()
      return li;
    })
  );
};

document.getElementById('button').addEventListener('click', onButtonClick);

? 提示：li.textContent = text 比 createTextNode() + appendChild() 更简洁，且自动处理 HTML 转义，防止 XSS（若数据可信可忽略，但属良好实践）。

⚠️ 进阶优化：跳过无变化的更新

虽然 replaceChildren() 已比循环删除更高效，但如果连续两次请求返回完全相同的数组（如缓存命中或服务端未变更），仍会触发一次无意义的 DOM 替换。此时可加入轻量级比对逻辑：

let lastRenderedData = [];

const onButtonClick = async () => {
  // 模拟异步获取（实际中替换为 fetch）
  const arr = await getListFromAPI(); // e.g., ['item1', 'item2', 'item3']

  // ? 浅比较：仅当内容变化时才更新 DOM
  if (JSON.stringify(arr) === JSON.stringify(lastRenderedData)) {
    console.log('No change detected — skipping DOM update');
    return;
  }

  outputContainer.replaceChildren(
    ...arr.map(text => {
      const li = document.createElement('li');
      li.textContent = text;
      return li;
    })
  );

  lastRenderedData = arr; // 更新缓存
};

⚠️ 注意：JSON.stringify() 适用于简单扁平数组；若列表项含对象或需深度比对，请改用 Array.every() 或引入 lodash.isEqual()。对于超长列表（>1000 项），建议添加防抖或节流，避免高频调用比对逻辑。

✅ 总结

• 首选 replaceChildren()：替代 while + removeChild()，代码更简、性能更稳；
• 按需更新：缓存上一次渲染的数据，比对后决定是否执行 DOM 操作；
• 避免内联事件绑定：如示例所示，将处理函数提取为命名函数，便于复用与测试；
• 警惕浏览器兼容性：若需支持旧版 IE，可用 innerHTML = '' + innerHTML += ... 回退（但注意 XSS 风险），或使用 [polyfill](https://www./link/bef07eaa68a113f34457bc81a61dbf0b)。

通过以上改进，你的列表渲染既保持了 vanilla JS 的轻量本质，又具备生产环境所需的健壮性与性能意识。