第一點
//高效簡潔 //低消能children //childNodeschildElementCount //childNodes.lengthfirstElementChild //firstChildlastEelmentChild //lastChildnextElementSibling //nextSiblingpreviousElementSibling //previousSibling
第二點:選擇器的高效應用
<div id="footer_bottom"><a href="/AboutUS.aspx">武林網</a><a href="/ContactUs.aspx">聯系我們</a><a href="/about/ad.aspx">廣告服務</a><a href="/about/job.aspx">人才服務</a>©2006-2016 <a href="http://m.survivalescaperooms.com/">武林網</a></div>
var aArr1= document.querySelectorAll("#footer_bottom a");//簡潔高效var aArr2 = docuement.getElementById("footer_bottom").getElementsByTagName("a");//繁雜低效//return <a href="/AboutUS.aspx">武林網</a>,<a href="/ContactUs.aspx">聯系我們</a>,<a href="/about/ad.aspx">廣告服務</a>,<a href="/about/job.aspx">人才服務</a>,//選擇第一個子節點var a = document.querySelector("#footer_bottom a");//return <a href="/AboutUS.aspx">武林網</a>//選擇多個節點var divs = document.querySelectorAll("div.footer,div.main,div.header");注意:大部分瀏覽器都支持上述屬性,IE6,7,8僅支持children屬性
減少DOM的重新渲染與排版(三種方式)
1.先將要處理的元素隱藏,然后對其處理,最后顯示
2.創建文件片段的方式(推薦) document.createDocumentFragment();
3.對要處理的元素克隆一個副本,然后對副本操作,最后將副本替換原本
下面是武林網小編的補充
將循環的對象存儲
使用前:
var str = "nanananana";for (var n = 0; n < str.length; n++) {}使用后:
var str = "nanananana",strLgth = str.length;for (var n = 0; n < strLgth ; n++) {}循環對性能的消耗是很大的,將循環的對象存儲,減少每次循環都要進行對象的計算。
最小化減少回流和重繪
使用前:
var coored = document.getElementById("ctgHotelTab");document.getElementById("ctgHotelTab").style.top = coored.offsetTop + 35 + "px";使用后:
var coored = document.getElementById("ctgHotelTab"),offetTop = coored.offsetTop + 35;document.getElementById("ctgHotelTab").style.top = offetTop + "px";新聞熱點
疑難解答