我们经常会对同一个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;