web前端优化之dom篇(转)

很多人讨论js一些算法和使用习惯对执行效率的影响。
但是本人认为随着浏览器的优化,单纯js代码本身的优化对这个应用的影响微不足道(因为我们的js代码一般构不成一定的数量级,但是对字符串的操作是一个特例),更多的要考虑的应该是资源文件的大小和对dom操作的优化上。
比起资源下载的耗时和dom的耗时,js执行时间是微乎其微,可优化的空间的很小,js的结构应该是以可读性和可维护行为先,如果为了百分之一秒不到的时间,牺牲了可读性就得不偿失了。

dom操作篇

dom最常见的操作就是创建、添加、查找、和修改(删除)元素,下面就来比较几种添加方式的效率。
先举个例子:
for(var i=0; i<1000; i++){
var p = document.createElement("p");
document.body.appendChild(p);
}
在ie9下的执行结果20ms,在ff下的执行结果93ms,这难道就是传说中的ie9的神速吗?
不急,接着往下看,把它稍加改造。
for(var i=0; i<1000; i++){
var p = document.createElement("p");
p.innerHTML = "this is p";
document.body.appendChild(p);
}
运行结果 ie9 153ms,ff 135ms。
原来页面只append空的p,ie是不进行渲染的,因此是“神速的”。
append一个堆空元素,对我们来说意义不大,下面的例子更符合实际,让我们开始优化之旅。
我还在此实验了把document和body的局部化,但是提升很小,也证明了我开始说明的问题。

优化1,使用DocumentFragment
var fm = document.createDocumentFragment();
for(var i=0; i<1000; i++){
var p = document.createElement("p");
p.innerHTML = "this is p<br>this is p";
//p.innerHTML += "<br>this is p";
fm.appendChild(p);
}
document.body.appendChild(fm);
运行结果 ie9 159ms,ff 94ms。
可以看出在ie下并没有减少,但是在ff下的效果还是明显的,因为我们每append一个元素到dom中,页面都会进行一次重绘,而使用 DocumentFragment,我们先将元素都添加到一个临时的dom结构片段中,此时页面并没有变化节约了重绘的时间,然后将整个fragment 一次插入dom中,整个过程只进行了一下重绘。
如果我们要添加的结构只有一个跟节点,可以用这个根节点代替DocumentFragment,直接把所有子节点append到根节点最后后把根节点插入到dom结构中。
如:var rootEl = document.createElement("div");
...
document.body.appendChild(rootEl);
在ff中时间可以减少到43ms

优化2,使用innerHTML
如果不是必需使用到每个节点的引用,我们可以用innerHTML让浏览器自己解析文档结构。
var rootDiv = document.createElement("div");
var html = "";
for(var i=0; i<1000; i++){
html += "<p>this is p<br>this is p</p>";
}
rootDiv.innerHTML = html;
document.body.appendChild(rootDiv);
运行结果 ie9 21ms,ff 16ms。
果然时间减少了很多,ie9一直居高不下的时间也一下回到了解放前,看来这才是对ie9浏览器的杀手锏。
我对此优化的推断是,直接赋值innerhHTML最大的减少了js引擎和浏览器渲染引擎之间的交互,看来js引擎和浏览器渲染引擎的交互次数才是最大的杀手。
此处还可以用数组来操作字符串的拼接。
var rootDiv = document.createElement("div");
var html = [];
for(var i=0; i<1000; i++){
html.push("<p>this is p<br>this is p</p>");
}
rootDiv.innerHTML = html.join('');
document.body.appendChild(rootDiv);
ie9的平均时间可以达到17ms,ff没有什么变化,据说部分浏览器在字符串拼接上已经进行了优化,也许ff已经优化过来。
同时也反映了我开始的观点,js本身的操作对性能的影响是很小的。

总结一下dom方面的优化就是,尽量减少页面的重绘次数和js与dom的交互次数。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值