1 / 13
文档名称:

JavaScript执行效率优化及内存管理优化.docx

格式:docx   大小:17KB   页数:13
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

JavaScript执行效率优化及内存管理优化.docx

上传人:读书之乐 2020/2/12 文件大小:17 KB

下载得到文件列表

JavaScript执行效率优化及内存管理优化.docx

相关文档

文档介绍

文档介绍:JS执行效率及内存管理执行效率DOM使用DocumentFragment优化多次append说明:添加多个dom元素时,先将元素append到DocumentFragment中,最后统一将DocumentFragment添加到页面。该做法可以减少页面渲染dom元素的次数。经IE和Fx下测试,在append1000个元素时,效率能提高10%-30%,Fx下提升较为明显。优化前:for(vari=0;i<1000;i++){    varel=('p');    =i;    (el);}优化后:varfrag=();for(vari=0;i<1000;i++){    varel=('p');    =i;    (el);}(frag);通过模板元素clone,替代createElement说明:通过一个模板dom对象cloneNode,效率比直接创建element高。性能提高不明显,约为10%左右。在低于100个元素create和append操作时,没有优势。优化前:varfrag=();for(vari=0;i<1000;i++){    varel=('p');    =i;    (el);}(frag);    优化后:varfrag=();varpEl=('p')[0];for(vari=0;i<1000;i++){    varel=(false);    =i;    (el);}(frag);使用一次innerHTML赋值代替构建dom元素说明:根据数据构建列表样式的时候,使用设置列表容器innerHTML的方式,比构建dom元素并append到页面中的方式,效率有数量级上的提高。优化前:varfrag=();for(vari=0;i<1000;i++){    varel=('p');    =i;    (el);}(frag);优化后:varhtml=[];for(vari=0;i<1000;i++){    ('<p>'+i+'</p>');}=('');使用firstChild和nextSibling代替childNodes遍历dom元素说明:约能获得30%-50%的性能提高。逆向遍历时使用lastChild和previousSibling。优化前:varnodes=;for(vari=0,l=;i<l;i++){varnode=nodes;……}优化后:varnode=;while(node){……node=;}字符串使用Array做为StringBuffer,代替字符串拼接的操作说明:IE在对字符串拼接的时候,会创建临时的String对象;经测试,在IE下,当拼接的字符串越来越大时,运行效率会急剧下降。Fx和Opera都对字符串拼接操作进行了优化;经测试,在Fx下,。优化前:varnow=newDate();varstr='';for(vari=0;i<10000;i++){    str+='456789';}alert(newDate()-now);优化后:varnow=newDate();varstrBuffer=[];for(vari=0;i<10000;i++){    ('456789');}varstr=('');alert(newDate()-now);循环语句将循环控制量保存到局部变量说明:对数组和列表对象的遍历时,提前将length保存到局部变量中,避免在循环的每一步重复取值。优化前:varlist=('p');for(vari=0;i<;i++){    ……}优化后:varlist=('p');for(vari=0,l=;i<l;i++){    ……}顺序无关的遍历时,用while替代for说明:该方法可以减少局部变量的使用。比起效率优化,更能直接看到的是字符数量的优化。该做法有程序员强迫症的嫌疑(==!)。优化前:vararr=[1,2,3,4,5,6,7];varsum=0;for(vari=0,l=;i<l;i++){    sum+=arr;}    优化后:vararr=[1,2,3,4,5,6,7];varsum=0,l=;while(l--){    sum+=arr[l];}条件分支将条件分支,按可能性顺序从高到低排列说明:可以减少解释器对条件的探测次数。在同一条件子的多(>2)条件分支时,使用switch优于if说明:switch分支选择的效率高于if,在IE下尤为明显。4分支的测试,IE下switch的执行时间约为if的一半。使用三目运算符替代条件分支优化前:if(a>b){num=a;}else{num=b;}优化后:num=a>b?a:b;定时器需要不断执行的时候,优先考虑使用setInterval说明:setTimeout每一次都会初始化一个定