性能优化——缓存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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,402评论 25 709
  • AJax 优化 缓存 Ajax 请求尽量使用GET, 仅取决于cookie数量 Cookie 优化 减少Cooki...
    KeKeMars阅读 9,397评论 5 89
  • 无论前一秒看文章多么热泪盈眶,下一秒还是依然会有不作为的傻逼找你茬。感性止于工作,止于吃饭,止于现实中不作为的你!
    紫陌CM阅读 115评论 0 0
  • 我只是静静的望着 无论你来 或者不来 雨 沿着时间的缝隙 湿润了我的衬衫 我想走 可漫长的脚步 却使我默立 我相信...
    疯Thelonious阅读 343评论 1 1
  • java.util.ArrayList 内部数据结构为数组,ArrayList源码(基于JDK7)如下:
    FX_SKY阅读 247评论 0 0