javascript基础学习系列五百三十九：内存与性能问题

使用本节介绍的方法替换子节点可能在浏览器（特别是IE）中导致内存问题。比如，如果被移除的
子树元素中之前有关联的事件处理程序或其他JavaScript 对象（作为元素的属性），那它们之间的绑定关
系会滞留在内存中。如果这种替换操作频繁发生，页面的内存占用就会持续攀升。在使用innerHTML、
outerHTML 和insertAdjacentHTML()之前，最好手动删除要被替换的元素上关联的事件处理程序和
JavaScript 对象。
使用这些属性当然有其方便之处，特别是innerHTML。一般来讲，插入大量的新HTML 使用
innerHTML 比使用多次DOM 操作创建节点再插入来得更便捷。这是因为HTML 解析器会解析设置给
innerHTML（或outerHTML）的值。解析器在浏览器中是底层代码（通常是C++代码），比JavaScript
快得多。不过，HTML 解析器的构建与解构也不是没有代价，因此最好限制使用innerHTML 和
outerHTML 的次数。比如，下面的代码使用innerHTML 创建了一些列表项：
for (let value of values){
ul.innerHTML += ‘

• KaTeX parse error: Expected 'EOF', got '}' at position 25: …li>'; // 别这样做！ }̲ 这段代码效率低，因为每次迭代…{value}
• ’;
  }
  ul.innerHTML = itemsHtml;
  这样修改之后效率就高多了，因为只有对innerHTML 的一次赋值。当然，像下面这样一行代码也
  可以搞定：
  ul.innerHTML = values.map(value => ‘
• ${value}
• ’).join(‘’);
  跨站点脚本
  尽管innerHTML 不会执行自己创建的