读Javascript高性能编程重点笔记
第一点
//高效简洁//低消能 children//childNodes childElementCount//childNodes.length firstElementChild//firstChild lastEelmentChild//lastChild nextElementSibling//nextSibling previousElementSibling//previousSibling
第二点:选择器的高效应用
<divid="footer_bottom"> <ahref="/AboutUS.aspx">毛票票</a><ahref="/ContactUs.aspx">联系我们</a><ahref="/about/ad.aspx">广告服务</a><ahref="/about/job.aspx">人才服务</a>©2006-2016<ahref="https://www.nhooo.com/">毛票票</a> </div>
varaArr1=document.querySelectorAll("#footer_bottoma");//简洁高效 varaArr2=docuement.getElementById("footer_bottom").getElementsByTagName("a");//繁杂低效 //return <ahref="/AboutUS.aspx">毛票票</a>, <ahref="/ContactUs.aspx">联系我们</a>, <ahref="/about/ad.aspx">广告服务</a>, <ahref="/about/job.aspx">人才服务</a>, //选择第一个子节点 vara=document.querySelector("#footer_bottoma"); //return<ahref="/AboutUS.aspx">毛票票</a> //选择多个节点 vardivs=document.querySelectorAll("div.footer,div.main,div.header");
注意:大部分浏览器都支持上述属性,IE6,7,8仅支持children属性
减少DOM的重新渲染与排版(三种方式)
1.先将要处理的元素隐藏,然后对其处理,最后显示
2.创建文件片段的方式(推荐)document.createDocumentFragment();
3.对要处理的元素克隆一个副本,然后对副本操作,最后将副本替换原本
下面是毛票票小编的补充
将循环的对象存储
使用前:
varstr="nanananana"; for(varn=0;n<str.length;n++){}
使用后:
varstr="nanananana", strLgth=str.length; for(varn=0;n<strLgth;n++){}
循环对性能的消耗是很大的,将循环的对象存储,减少每次循环都要进行对象的计算。
最小化减少回流和重绘
使用前:
varcoored=document.getElementById("ctgHotelTab"); document.getElementById("ctgHotelTab").style.top=coored.offsetTop+35+"px";
使用后:
varcoored=document.getElementById("ctgHotelTab"), offetTop=coored.offsetTop+35; document.getElementById("ctgHotelTab").style.top=offetTop+"px";