JS性能优化之DOM优化

2017-12-26 1869 2 编辑:深正互联 来源:互联网

DOM优化

1. 最小化现场跟新

每个单独的DOOM操作可以看作一个现场更新,现场跟新非常的消耗性能,需要用最少的现场跟新来优化程序性能。

var list = document.getElementById("myList"),

item,

i;

for (i=0; i < 10; i++) {

    item = document.createElement("li");

    list.appendChild(item);

    item.appendChild(document.createTextNode("Item " + i));

}

上面代码,十个循环中每个循环有2个DOM操作(现场跟新),10*2 个现场跟新,算法的时间复杂度为O(n)。

优化的方法 a. 使用文档碎片。 b.使用拼接html字符串的形式,一次更新。

var list = document.getElementById("myList"),

item,

i,

fragment = document.createDocumentFragment();

for (i=0; i < 10; i++) {

    item = document.createElement("li");

    fragment.appendChild(item);

    item.appendChild(document.createTextNode("Item " + i));

}

list.appendChild(list);

上面代码只进行了一次的现场跟新。

var list = document.getElementById("myList"),

item,

i,

str = '';

for (i=0; i < 10; i++) {

    str += '<li>'+ 'item' + i +'</li>'

}

list.InnerHTML(str);

2.使用innerHTML

对于大量的DOM操作,InnerHTML性能要比createElement() 和appendChild()这样的DOM方法效率高很多。

当把innerHTML设置成某个值之后,会在后台生成一个DOM解析器,然后使用内部的DOM调用来创建DOM结构,而非使用js的DOM调用。内部的方法是便宜好的而非解释执行所以更快。

上面的例子已经有了,需要注意的是一次innerHTML也是一次现场跟新,也需要最小次数化。

3.使用事件代理

大多数Web 应用在用户交互上大量用到事件处理程序。页面上的事件处理程序的数量和页面响应

用户交互的速度之间有个负相关。为了减轻这种惩罚,最好使用事件代理。

4.注意HTMLCollection

HTMLCollection的使用对于web性能的损害很大,不管访问HTMLCollection的属性还是方法,都是在文档上进行查询。最小化访问HTMLCollection次数可以极大的改进脚本的性能。

var images = document.getElementsByTagName("img"),

i, len,image;

//len避免了每次去访问集合的length

//image 避免了循环体访问collection

for (i=0, len=images.length; i < len; i++){

    image = images[i];

}

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5