javascript执行效率优化及内存管理系统优化

《javascript执行效率优化及内存管理系统优化》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、JS执行效率及内存管理1执行效率1.1DOM1.1.1使用DocumentFragment优化多次append说明：添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。该做法可以减少页面渲染dom元素的次数。经IE和Fx下测试，在append1000个元素时，效率能提高10%-30%，Fx下提升较为明显。优化前：for(vari=0;i<1000;i++){    varel=document.createElement('p'); 

2、   el.innerHTML=i;    document.body.appendChild(el);}优化后：varfrag=document.createDocumentFragment();for(vari=0;i<1000;i++){    varel=document.createElement('p');    el.innerHTML=i;    frag.appendChild(el);}document.body.appendChild(frag);141.1.1通过模板元素clone，替代cr

3、eateElement说明：通过一个模板dom对象cloneNode，效率比直接创建element高。性能提高不明显，约为10%左右。在低于100个元素create和append操作时，没有优势。优化前：varfrag=document.createDocumentFragment();for(vari=0;i<1000;i++){    varel=document.createElement('p');    el.innerHTML=i;    frag.appendChild(el);}document.b

4、ody.appendChild(frag);    优化后：varfrag=document.createDocumentFragment();varpEl=document.getElementsByTagName('p')[0];for(vari=0;i<1000;i++){    varel=pEl.cloneNode(false);    el.innerHTML=i;    frag.appendChild(el);}document.body.appendChild(frag);1.1.2使用一次inn

5、erHTML赋值代替构建dom元素说明：根据数据构建列表样式的时候，使用设置列表容器innerHTML的方式，比构建dom元素并append到页面中的方式，效率有数量级上的提高。优化前：varfrag=document.createDocumentFragment();for(vari=0;i<1000;i++){14    varel=document.createElement('p');    el.innerHTML=i;    frag.appendChild(el);}document.body.app

6、endChild(frag);优化后：varhtml=[];for(vari=0;i<1000;i++){    html.push('

'+i+'

7、ari=0,l=nodes.length;i

8、ay的join方式执行时间约为直接字符串拼接的1.4倍。优化前：varnow=newDate();varstr='';for(vari=0;i<10000;i++){    str+='123456789123456789';}alert(newDate()-now);优化后：varnow=newDate();varstrBuffer=[];for(vari