不要过度修改 DOM。你应该这样做。

在继续之前，我想说的是，以 DOM 为目标并不是一个坏习惯。如果不以 DOM 为目标，JavaScript 将无法操作页面上的任何内容，从而导致它作为前端编程语言毫无用处。

但是，您确实需要保持谨慎，并非常小心地选择何时何地定位 DOM，因为某些操作可能会明显影响网页的性能。

话虽如此，你可能会问自己：

“直接操作 DOM 到底有多糟糕？”

真的真的很混乱，特别是如果你在团队中工作，你会增加不必要的复杂程度，这可能会导致潜在的错误，无论是来自性能、测试还是重构。

以这段代码为例：

for (let i = 0; i < 10000; i++) {
  const p = document.createElement("p");
  document.body.appendChild(p);
}

我们生成了 10,000 个<p>标签，并将它们逐一添加到<body>DOM 中。这效率极低，因为这段代码会告诉 DOM 进行 10,000 次更新，并重新计算所有内容的去向。

一种更清洁的方法：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 10000; i++) {
    const p = document.createElement("p");
    fragment.appendChild(p);
}
document.body.appendChild(fragment);

通过将所有元素分组并将它们全部附加在一起，我们可以大幅减少 DOM 修改次数，只需一次。这也将总运行时间从413.125 毫秒缩短至12.189 毫秒。

趣味知识： React.js 提供了一个 VirtualDOM，它会创建一个轻量级的 DOM 副本并进行跟踪。React 还会通过将更改分组来尽可能少地更新 DOM。

感谢阅读！

文章来源：https://dev.to/parkrooben/don-t-excessively-mutate-the-dom-here-s-what-you-should-do-instead-2d3m