性能优化——缓存DOM对象

我们经常会对同一个DOM节点进行多次访问，当文档非常大的时候，查询节点是非常消耗性能的，这时候我们可以先缓存这个节点，这样就只需要查询一次。

• 不好的做法

for (let i = 0;i < 10;i++){
  document.getElementById("temp").innerHTML = "";
  document.getElementById("temp").innerHTML += "<p>temp</p>";
}

• 改进的做法

var temp = document.getElementById("temp");

for (let i = 0;i < 10;i++){
  temp.innerHTML = "";
  temp.innerHTML += "<p>temp</p>";
}

上面这个做法还有一个问题就是进行了多次DOM操作，所以我们还可以继续改进

• 再改进

var temp = document.getElementById("temp");
var fragments = "";

for (let i = 0;i < 10;i++){
  fragments += "<p>temp</p>";
}
temp.innerHTML = "";
temp.innerHTML = fragments;

参考：https://segmentfault.com/a/1190000000490322