Question

我正在制作游戏并使用数百行

document.getElementById("ID").innerHTML = someVariable;

更新我用函数计算的所有内容。我怎样才能让它变得更好或者这是最好的方法？我不能像

那样使用循环

for (var i = 0; i < IDs.length; i++) { document.getElementById("IDs[i]").innerHTML = Variables[i]; }

因为我有很多不同的变量和不同的ID。

那么我应该将所有内容重新编入阵列并使用它们还是什么？

感谢您的任何建议！

Answer 1

您可能会做一些改善性能的事情。不幸的是jsperf暂时没有维护，但我不确定它会有多大帮助，因为DOM操作的效率在浏览器和应用程序的细节之间变化很大。

我建议的第一件事就是一套“微观效率”，它甚至可能没有多大帮助，但仍然是良好的做法。保留对DOM元素的引用数组，这样您就不必经常调用getElementById。虽然getElementById非常快，但它仍然是一个可以避免的函数调用。您可能认为该数组将占用大量内存，但您实际上并未将DOM元素存储在数组中，而是将指针存储到DOM元素中。此外，您还可以保留对length项的引用，以便在每次循环迭代时不计算它：

const myDivs = [/* populate this array with your DOM elements */];
for (var i = 0, l = IDs.length; i < l; i++) { 
    myDivs[i].innerHTML = Variables[i];
}

另一件重要的事情是在进行繁重的DOM操作之前等待动画帧。您可以阅读有关requestAnimationFrame here的更多信息。

最后，你只需要进行测试。正如有人在评论中建议的那样，最好的办法是在不使用innerHTML的情况下直接进行DOM操作。这是因为innerHTML需要解析和渲染树构造，这是昂贵的。直接DOM操作的一个例子是......假设你想要从这种状态出发：

<div id="ID[1]">
  <img src="foo.jpg" />
</div>

...到这个州：

<div id="ID[1]">
  <h1>Hello</h1>
  <img src="foo.jpg" />
</div>

我们刚刚添加了H1 - 你会写这样的东西：

const h1 = document.createElement('h1');
h1.innerText = 'Hello';
const div = document.getElementById('ID[1]');
div.insertBefore(h1, div.firstChild);

但正如您所看到的，这需要您在前后状态之间进行“差异”，并计算从一个到另一个的最有效方式。碰巧这是ReactJS和其他Virtual DOM库非常有效地执行的操作 - 因此您可以尝试使用其中一个库。

如果你反对使用库或者认为你的DOM会因为内存中的差异而变得太高，那么你可能会尝试构建一个DOM字符串并尽可能少地使用innerHTML。例如，如果您的DOM看起来像这样：

<div id="main-container">
  <div id="ID[1]">...</div>
  <div id="ID[2]">...</div>
  <div id="ID[3]">...</div>
  ...
</div>

然后尝试执行以下操作：

let html = '';
const container = document.getElementById('main-container');
for (let i = 0, l = IDs.length; i < l; i++) {
  html += `<div id="ID[${i}]">${Variables[i]}</div>`;
}
container.innerHTML = html;

使用JS有效地更新页面元素

1 个答案: