高性能JS笔记3——DOM编程

一、访问与修改DOM

 DOM和JS 相当于两个岛屿，访问操作的次数越多，要交的过路费越多，对性能产生很大影响。

 减少访问DOM的次数，把运算尽量留在JS端操作。

二、innerHTML 对比 DOM 方法

 

1、对于原生的DOM方法和innerHTML比较，性能相差无几。

2、对于大量操作，针对不同浏览器，性能不一样，因此取决于经常用的浏览器。

3、建议从可读性、稳定性、编码习惯来决定使用哪种方式。在对字符串经过优化后，innerHTML性能可以得到大幅提升。

三、操作上的优化

1、节点克隆

例如：

var tr = document.createElement("tr");
var otd = document.createElement("td");
for(var i = 1; i<=1000; i++)
{
    tr.appendChild(otd.cloneNode(false));
}

2、HTML集合

document 中的方法getElementByName、getElementByTag、getElementByClassName 和属性images、links、forms返回的都是集合。

由于HTML集合一直与文档保持着联系，每次你需要更新最新信息时，都会重复执行查询的过程，哪怕只是获取集合里的元素。

在相同的情况下，遍历一个数组，明显快于一个HTML集合。

访问一个较小的集合，很多情况下缓存Length就够了。toArray()函数可做为一个通用的集合转数组函数，但转换时，需考虑转换后，会多遍历一次。

3、选择最高效的API

DOM API 提供了多种方法，使用时尽量选择最高效的API，例如，遍历查找childNodes 会比nextSibling 慢很多。

4、元素节点

children 比childNodes 快很多，childElementCount 比childNodes.length 快。

5、使用选择器时，尽量合并一次操作。

如：document.querySelectorAll("div.warning, div.notice")

6、不要再重绘布局改变时，查询它。如：

bodystyle.color='red';
tem=computed.backgroundColor;
bodystyle.color='white';
tem=computed.backgroundImage;
//高效写法
bodystyle.color='red';
bodystyle.color='white';
tem=computed.backgroundColor;
tem=computed.backgroundImage;

7、改变样式

多次操作style 样式，不如直接修改其CSS样式，style.cssText，改变className更容易维护。

8、批量修改DOM

当需要批量修改DOM时，可以通过以下步骤来减少重绘或重排的次数：

　　a、使元素脱离文档

　　　　隐藏元素，应用修改，再重新显示。
　　　　在DOM之外创建一个子树，再将其拷回文档。
　　　　将原始元素拷贝到一个脱离文档的节点中，修改副本，再替换原始元素。

　　b、对其应用多重改变

　　c、把元素带回文档中

9、缓存布局信息

将频繁操作的元素信息，保存到变量里，再进行操作。

10、让元素脱离动画流

元素的大小、位置动画变化时，会带来大量的文档重绘。尽量使用元素的绝对定位来使其脱离文档流。

11、tr:hover 类似效果性能会降低很多。

12、事件委托

避免事件的多次绑定和冒泡，阻止默认动作。