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

Posted 2023-02-21

【中文标题】将数字 1 - 100 打印到屏幕上，在 li 开头添加了额外的空白列表元素

【英文标题】：Printing numbers 1 - 100 to the screen, extra blank list element added at beginning of li

【发布时间】：2019-04-03 13:23:35

【问题描述】：

在 javascript 中开始出现问题并遇到了一些我感兴趣的东西。我开始的问题只需要在屏幕上打印数字 1-100。然后我看到一开始，我的for loop 产生了一个空列表元素。

很好奇为什么会这样。

//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>

【参考方案1】：

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

//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>

【讨论】：

谢谢！带走了你很多