javascript质量优化之DOM交互操作实例解析,javasc
分类:计算机网络

正文实例呈报了javascript品质优化之DOM交互操作技艺。分享给大家供大家参考,具体如下:

  在javascript各类方面,DOM不容争辩是最慢的一局地。DOM操作与相互要消耗多量岁月,因为它们往往要求再行渲染整个页面或然某一有些。精通什么优化与DOM的相互能够非常的大进步脚本完结的进度。

在javascript种种方面,DOM毫无疑问是最慢的一局地。DOM操作与互为要消耗大量时辰,因为它们往往须要再度渲染整个页面只怕某一有个别。明白什么优化与DOM的相互能够不小拉长脚本实现的速度。

1、最小化DOM更新

1、最小化DOM更新

  看上面例子:

看下边例子:

    var list = document.getElementById("ul");
    for (var i=0; i < 10; i++){
        var item = document.createELement("li");
        item.appendChild(document.createTextNode("item" + i));
        list.appendChild(item);
    }
    //这段代码为列表添加10个项目。添加每个项目时,都有两次DOM更新。总共需要20次DOM更新。
var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//这段代码为列表添加10个项目。添加每个项目时,都有两次DOM更新。总共需要20次DOM更新。

  大家得以动用 文书档案碎片 来最小化DOM更新。

咱俩得以选用 文书档案碎片 来最小化DOM更新。

    var list = document.getElementById("ul");
    var fragment = document.createDocumentFragment();

    for (var i=0; i < 10; i++){
        var item = document.createELement("li");
        item.appendChild(document.createTextNode("item" + i));
        fragment.appendChild(item);
    }
    list.appendChild(fragment);
var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

  越来越多关于 文书档案碎片,详见以前文章 《文档碎片》

越来越多关于 文书档案碎片,详见在此之前文章《JavaScript文书档案碎片操作实例深入分析》

2、使用innerHTML

2、使用innerHTML

  对于十分的大的DOM改换,使用innerHTML要比createElement()和appendChild()快。

对此一点都不小的DOM更换,使用innerHTML要比createElement()和appendChild()快。

    var list = document.getElementById("ul");
    var html = "";

    for (var i=0; i < 10; i++){
        html += "<li>item" + i + "<li>";
    }
    list.innerHTML = html;
var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3、使用事件委托

3、使用事件委托

  详见在此以前小说 《javascript质量优化 之 事件委托》

详细在此以前作品《javascript品质优化之事件委托实例详解》

4、注意NodeList

4、注意NodeList

  最小化访谈NodeList的次数能够大幅度的精益求精脚本的习性,因为每一次访问NodeList,都会运营贰回基于文书档案的询问。

最小化访谈NodeList的次数能够小幅度的改革脚本的性情,因为每一回访谈NodeList,都会运转一回基于文书档案的询问。

    var imgs = document.getElementsByTagName("img");

    for (var i=0, len=imgs.length; i < len; i++){
        var image = imgs[i];
        //more code
    }
    //这里的关键是长度length存入了len变量,而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候,把imgs[i]放入image变量中,以避免在循环体内多次调用NodeList;
var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//这里的关键是长度length存入了len变量,而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候,把imgs[i]放入image变量中,以避免在循环体内多次调用NodeList;

  更加的多关于 NodeList,详见以前作品 《深刻领会NodeList》

更加多关于 NodeList,详见以前小说《在javascript将NodeList作为Array数组管理的办法》

 

可望本文所述对大家JavaScript程序设计有所帮衬。

 

你大概感兴趣的篇章:

  • JavaScript进步网址质量优化的提出(二)
  • 行使Function.apply()的参数数组化来进步JavaScript程序质量的本领
  • javascript质量优化之事件委托实例详解
  • js品质优化技能
  • JavaScript质量优化之小知识总括
  • 编纂高品质Javascript代码的N条提出
  • JavaScript关于做实网址质量的几点建议(一)

本文由正版必中一肖图发布于计算机网络,转载请注明出处:javascript质量优化之DOM交互操作实例解析,javasc

上一篇:轻易学习Javascript闭包函数,驾驭javascript函数式编 下一篇:没有了
猜你喜欢
热门排行
精彩图文