第七課 提升DOM操作效率的9個手段

1、第七課 提升DOM操作效率的9個手段,本課目標,提升DOM操作效率的9個通用手段 注意：這一節(jié)考慮的點和上一節(jié)恰好相反，如果把內存泄漏歸結為“空間問題”，那么這一節(jié)考慮的則是“時間問題”。算法設計里面一個常見的手段是：用空間換時間或者用時間換空間。如何考量，需要具體權衡。,基礎概念,1、瀏覽器加載HTML、JS、圖片的順序； 2、如何解析、渲染HTML； 3、“重繪”,加載順序,工具： 簡單說一下過程，不深究(某些地方很復雜，水很深) 1、對于IE：嚴格按照文檔流加載 2、對于FireFox：做了優(yōu)化，先下載js和CSS，最后下載圖片,渲染、重繪,一、背后的引擎 Trident(三叉戟)：IE

2、內核 Gecko(壁虎)：FireFox系 WebKit：Safari系、Chrome Presto：Opera 其它？很多很多，有興趣問Google。 二、渲染和重繪 1、DOM元素的添加、修改（內容）、刪除( Reflow + Repaint) 2、僅修改DOM元素的字體顏色（只有Repaint，因為不需要調整布局） 3、應用新的樣式或者修改任何影響元素外觀的屬性 4、 Resize瀏覽器窗口、滾動頁面 5、讀取元素的某些屬性（offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientT

3、op/Left/Width/Height、 getComputedStyle()、currentStyle(in IE) 參考： ,注意,對于以上內容，只要有個概念就行，不要去執(zhí)著里面的細節(jié),因為有些地方很復雜。 只要知道以下幾個點： 1、不同瀏覽器加載順序不同； 2、很多操作會引起瀏覽器“重繪”頁面； 3、頁面很大很復雜的時候，“重繪”很昂貴！,第一種 插入順序,插入順序： function test1() var d1=new Date().getTime(); var father=document.createElement(div); for(var i=0;i1000;i+) va

4、r sub=document.createElement(div); sub.id=sub_+i; father.appendChild(sub); document.body.appendChild(father); var d2=new Date().getTime(); alert(d2-d1); ,function test2() var d1=new Date().getTime(); var father=document.createElement(div); document.body.appendChild(father); for(var i=0;i1000;i+) var

5、 sub=document.createElement(div); sub.id=sub_+i; father.appendChild(sub); var d2=new Date().getTime(); alert(d2-d1); ,注意點：這里和上一節(jié)說的“內存泄漏”中的代碼不同 可以發(fā)現，用時間換空間、用空間換時間之間的考量和平衡,第二種 在副本上修改,function test3() var orig=$(mydiv); var d1=new Date().getTime(); var cloned=orig.cloneNode(true); for(var i=0;i10000;i+

6、) var sub=document.createElement(div); sub.id=sub_+i; cloned.appendChild(sub); /orig.appendChild(sub); orig.parentNode.replaceChild(cloned,orig); var d2=new Date().getTime(); alert(d2-d1); ,第三種 先設置為不可見再改,var el=$(id); el.style.display=none; /注意一下display=none和visible=false的區(qū)別，display=none的時候元素不占位置，而v

7、isible=false的時候元素不顯示，但是位置還占著。 el.appendChlid(newNodes);,第四種 緩存元素的屬性,其實，獲取屬性的操作也有可能引起“重繪”。 如果獲取的次數非常頻繁，還是非常昂貴。,for(var i=0;ifather.childNodes;i+) var child= father.childNodesi; child.width=father.offsetWidth /5; ,第五種 CSS,應該是先定義好CSS樣式，如： .mydiv background: #ddd; color: #000; border: 1px solid #000; 然后

8、js代碼里面用mydiv.className=mydiv Ext采用了大量的“結構化”CSS,第六種 定時器間隔,function test4() var orig=$(orig); var i=0; var timer=setInterval(function() var offset=orig.offsetLeft; /console.log(offset); if(offset=500) clearInterval(timer); return; orig.style.left=(i*5+px); i+; ,50); ,第七種 關于查找,第一種，沒有優(yōu)化的手工查找： 第二種：break!

9、 /在大量查詢的時候，找到元素之后，立馬break很重要！ 第三種：使用內置的XPath引擎來查找 var headings = document.evaluate( /h2|/h3|/h4, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null ); var oneheading; while( oneheading = headings.iterateNext() ) . 下一節(jié)的Ext優(yōu)化手段里面給出Xpath的實例,第八種 DOM walk,在迭代DOM節(jié)點的過程中，不要改變節(jié)點： var allElements =

10、document.getElementsByTagName(div); for( var i = 0; i allElements.length; i+ ) if( allElementsi.tagName.match(/h2-4$/i) ) . 這個例子可以參考Java里面的Iterator.remove(),第九種 緩存頻繁使用的節(jié)點,第一段： document.getElementById(test).property1 = value1; document.getElementById(test).property2 = value2; document.getElementById(test).property3 = value3; document.getElementById(test).property4 = value4; 第二段： var sample = document.getElementById