读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";