第七课提升DOM操作效率的9个手段.ppt

* * * * * * * * * * * * * * 第七课 提升DOM操作效率的9个手段 本课目标 提升DOM操作效率的9个通用手段 注意：这一节考虑的点和上一节恰好相反，如果把内存泄漏归结为“空间问题”，那么这一节考虑的则是“时间问题”。算法设计里面一个常见的手段是：用空间换时间或者用时间换空间。如何考量，需要具体权衡。 基础概念 1、浏览器加载HTML、JS、图片的顺序； 2、如何解析、渲染HTML； 3、“重绘” 加载顺序 工具：/Fiddler2/version.asp 简单说一下过程，不深究(某些地方很复杂，水很深) 1、对于IE：严格按照文档流加载 2、对于FireFox：做了优化，先下载js和CSS，最后下载图片 渲染、重绘 一、背后的引擎 Trident(三叉戟)：IE内核 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、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE)) 参考： /blog/2008/05/reflow/ 注意 对于以上内容，只要有个概念就行，不要去执着里面的细节,因为有些地方很复杂。 只要知道以下几个点： 1、不同浏览器加载顺序不同； 2、很多操作会引起浏览器“重绘”页面； 3、页面很大很复杂的时候，“重绘”很昂贵！ 第一种 插入顺序 插入顺序： function test1(){ var d1=new Date().getTime(); var father=document.createElement(div); for(var i=0;i1000;i++){ var 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 sub=document.createElement(div); sub.id=sub_+i; father.appendChild(sub); } var d2=new Date().getTime(); alert(d2-d1); } 注意点：这里和上一节说的“内存泄漏”中的代码不同 可以发现，用时间换空间、用空间换时间之间的考量和平衡 第二种 在副本上修改 function test3(){ var orig=$(mydiv); var d1=new Date().getTime(); var cloned=orig.cloneNode(true); for(var i=0;i10000;i++){ 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);