标签:des style blog http color java 文件 for
在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘。因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作。为了更好的用户体验,必须要严格控制这些操作。
1 var divList = document.getElementsByTagName("div");
2 for( var i = 0; i < divList.length ; i++ ){
3 var d = document.createElement("div");
4 document.body.appendChild(d);
5 console.log(i);
6 }
1 var divList = document.getElementsByTagName("div");
2 for( var i = 0, len = divList.length ; i < len ; i++ ){
3 var d = document.createElement("div");
4 document.body.appendChild(d);
5 console.log(i);
6 }
1 element.style.cssText += "width:200px;height:200px;background-color:red;border:1px solid white";
1 .active{
2 width:200px;
3 height:200px;
4 background-color:red;
5 border:1px solid white;
6 }
1 element.className += " active"
1 var divList = document.getElementsByTagName("div"),
2 tempFragment = document.createDocumentFragment();
3 for( var i = 0; i < 100 ; i++ ){
4 var d = document.createElement("div");
5 d.className += " active"
6 tempFragment.appendChild(d);
7 }
8 document.body.appendChild(tempFragment);
更多内容参考:《高性能JavaScript一书》
一些JavaScript中的DOM的优化小技巧,布布扣,bubuko.com
标签:des style blog http color java 文件 for
原文地址:http://www.cnblogs.com/iceseal/p/3881182.html