DOM学习之路二--DOM操做优化--Mr.Ember

DOM编程

1. 访问和修改DOM元素
2. 修改DOM元素的样式会致使重绘和重排
3. 经过DOM事件处理与用户交互

 

浏览器一般会把DOM和JavaScript独立实现。两个独立的功能只要经过彼此的接口连接，就会产生消耗。访问的次数越多，产生的消耗越多，因此尽可能减小过桥的次数。

 

DOM的访问和修改

1. innerHTML比DOM（document.createElement)方法更快

2. 节点克隆：使用DOM方法更新页面的另外一个方法就是克隆已有元素，而不是建立新的元素。

 

html集合

1. document.getElementByxxxx返回的都是html集合。这类集合是类数组。有数组length属性，可是没有push()和slice()等方法。每次迭代，读取元素集合的length就会引起集合的更新。这对于浏览器来讲有很明显的性能问题。

2. 优化方法： 把集合的长度缓存到一个局部变量里，而后在循环条件退出语句使用该变量。

3. 访问集合元素时使用局部变量：通常来讲，对于任何类型DOM访问，须要多访问一次DOM属性或方法，最好使用一个局部变量缓存此成员。

 

遍历DOM

1. 获取DOM元素：一般咱们须要某一个DOM元素开始，操做周围的元素，或者递归查找全部的子节点。你可使用childNOdes获得元素集合，或者使用nextSibling来获取每一个相邻元素。
2. 选择器API：根据合适的情景，选择getElementByxxxx和queryselect，建议使用queryselct速度比较快

 

重绘和重排

浏览器下载完全部的组件，会解析生成两种数据结构

1. DOM树：表示页面结构
2. 渲染树：表示DOM节点如何显示

 

重排什么时候发生

1.　添加或删除可见的DOM元素

2. 元素位置改变

3. 元素尺寸改变
4. 内容改变
5. 页面渲染器初始化
6. 浏览器窗口尺寸改变

 

渲染树变化的排队与刷新

优化：不要在布局信息改变时查询它，把读取的代码放在末尾

 

最小化重绘和重排

1. 改变样式: 一次性改变多个样式
2. 批量修改DOM

       减小重绘和重排步骤：

1. 使元素脱离文档流
2. 对元素应用多重改变
3. 把元素带回文档中

 

        方法：

 

1. 经过改变display属性，临时从文档中移除元素，而后再恢复它
2. 在文档以外建立并更新一个文档片断，而后把它附加到原始列表里，
3. 为须要修改的节点建立一个备份，而后对副本进行操做，一旦操做完成，就用新的节点代替旧的节点。

 

  　　var old = document.getElementById('mylist')

　　 var clone = old.cloneNode(data)

　　 appendDataToElement(clone, data)

　　 old.parentNode.replaceChild(clone, old)

 

缓存布局信息

浏览器尝试经过队列化修改和批量执行的方式最小化重排次数。因此查询布局信息时，尽可能减小布局查询的次数，获取后把他赋值给局部变量，而后操做局部变量。

 

让元素脱离动画流

使用如下步骤能够避免页面中大部分重排

1. 使用绝对位置定位页面上的动画元素，将其脱离文档流
2. 让元素动起来，当他扩大时，会临时覆盖部分页面。但这只是页面的一小区域的重绘，不会产生重排并重绘页面的大部份内容
3. 当动画结束时恢复定位，从而只会下移一次文档的其余元素。

 

IE和hover

当有大量的hover会下降相应速度

 

事件委托

使用事件委托减小处理器的数量