javascript - 将数字 1 - 100 打印到屏幕，在 li 开头添加额外的空白列表元素

Question

在开始解决 JavaScript 中的问题时，发现了一些令我感兴趣的东西。我正在开始一个只需要在屏幕上打印数字 1-100 的问题。然后我看到，在开始时，我的 for 循环 生成了一个空列表元素。

很好奇为什么会发生这种情况。

//VARIABLES
let list = document.querySelector('ul');


//PRINT NUMBERS 1 - 100 TO THE SCREEN
for(i = 1; i <= 100; i++){
	let li = document.createElement('li');
  li.innerHTML = [i];
  list.appendChild(li);
}

<div class = "container_list">
  <ul>
    <li></li>
  </ul>
</div>

Answer 1

它与你的 JavaScript 无关。你有一个空的、硬编码的 <li> HTML 中的元素。删除它。

//VARIABLES
let list = document.querySelector('ul');

//PRINT NUMBERS 1 - 100 TO THE SCREEN
for(i = 1; i <= 100; i++){
  let li = document.createElement('li');
  li.innerHTML = [i];
  list.appendChild(li);
}

<div class = "container_list">
  <ul></ul>
</div>

现在，我意识到您只是在做练习，但您的解决方案引入了一个常见的性能错误。每次更新网页内容，客户端都要"re-flow"页面上已有的所有内容和 "re-paint"包含新内容的 UI。这会使用资源。你做得越多，需要的资源就越多。

您正在向 ul 添加一个新项目符号在循环的每次迭代中，该内容已经在页面上，因此您的代码会导致重新流动和重新绘制 100 次!

相反，您应该构建整个 ul在内存中，然后当它完全构建时，您可以在循环完成时将整个内容追加一次。

最后， .innerHTML 适用于当您获取/设置包含需要由 HTML 解析器解析的 HTML 的字符串时。如果您的字符串不包含任何 HTML，那就是一种浪费(在某些情况下，还会存在安全风险)。在这些情况下使用 .textContent ，它不会使用 HTML 解析器。

//VARIABLES
let list = document.querySelector('ul');
let ul = document.createElement("ul");  // This will hold all the list items

//PRINT NUMBERS 1 - 100 TO THE SCREEN
for(i = 1; i <= 100; i++){
  let li = document.createElement('li');
  li.textContent = [i]; // Use .textContent when the string doesn't contain any HTML
  ul.appendChild(li);
}

// Now, append the entire list to the document with just one DOM change
document.querySelector(".container_list").appendChild(ul);

<div class = "container_list"></div>