DOM性能瓶颈与Javascript性能优化

    这两天比较闲，写了两篇关于JS性能缺陷与解决方案的文章（《JS特性性能缺陷及JIT的解决方案》，《Javascript垃圾回收浅析》），主要描述了untyped，GC带来的问题与JIT引擎的解决方案。但相对于Js引擎的问题，我认为DOM致使的性能问题更值得关注。

 

一.Dom的性能瓶颈及缘由

1. 为何是DOM

    标准的xml/html的文本解析协议，常见的有DOM与SAX。在解析速度及内存占用上，SAX比DOM有优点，但为何浏览器选择DOM解析html？

    （1）DOM VS SAX

    SAX提供一次性解析文本，不生成对象，Iterator模式访问元素，event-based，PUSH模式触发，简单说：App须要向Parser注册，当Parser遍历xml时，触发调用APP 。想深刻体验，用下javax.xml.parsers.SAXParser。这里说个题外话，改进版StAX是PULL模式，但这都不重要了，重要是：一次性文本解析，不生成对象。

    DOM解析文本后，生成DOM树。即：一次性文本解析，生成对象。

    （2）浏览器选择了DOM

    单次效率DOM不如SAX，但SAX不生成对象，浏览器不少操做很难知足，好比：元素定位，元素样式渲染……因此DOM是必然之选。

 

2. DOM的性能问题

    【1】核心问题

    当解析的html文件很大时，生成DOM树占用内存较大，同时遍历（不更新）元素耗时也更长。但这都不是重点，DOM的核心问题是：DOM修改致使的页面重绘、从新排版！从新排版是用户阻塞的操做，同时，若是频繁重排，CPU使用率也会猛涨！

    DOM操做会致使一系列的重绘（repaint）、从新排版（reflow）操做。为了确保执行结果的准确性，全部的修改操做是按顺序同步执行的。大部分浏览器都不会在JavaScript的执行过程当中更新DOM。相应的，这些浏览器将对对 DOM的操做放进一个队列，并在JavaScript脚本执行完毕之后按顺序一次执行完毕。也就是说，在JavaScript执行的过程，直到发生从新排版，用户一直被阻塞。

    通常的浏览器中（不含IE），repaint的速度远快于reflow，因此避免reflow更重要。

    致使repaint、reflow的操做：

    * DOM元素的添加、修改（内容）、删除( Reflow + Repaint)

    * 仅修改DOM元素的字体颜色（只有Repaint，由于不须要调整布局）

    * 应用新的样式或者修改任何影响元素外观的属性

    * Resize浏览器窗口、滚动页面

    * 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 

    【2】其余

    某些Javascript框架中，CSS选择器，如：var el = $('.hyddd');因为IE六、7不支持，因此Javascript框架必须经过遍历整个DOM树来寻找对象。

 

二. 针对DOM问题，Javascript的应对方案

1. 针对repaint、reflow，Nicholas 大叔在他的《Speed up your JavaScript, Part 4》作了详细介绍，这里我也整理一下：

    解决问题的关键是：减小因DOM操做，引发的reflow。Nicholas总结了一些方法：

    【1】在DOM外，执行尽可能多的变动操做。Demo：

// 很差的作法
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    list.appendChild(item);
}   

// 更好的作法
// 使用容器存放临时变动， 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    fragment.appendChild(item);
}
list.appendChild(fragment);

     【2】操做DOM前，先把DOM节点删除或隐藏，由于隐藏的节点不会触发重排。Demo以下：

list.style.display = "none";  
for (var i=0; i < items.length; i++){  
    var item = document.createElement("li");  
    item.appendChild(document.createTextNode("Option " + i);  
    list.appendChild(item);  
}  
list.style.display = "";  

    【3】一次性，修改样式属性。Demo以下：

// 很差的作法
// 这种作法会触发屡次重排
element.style.backgroundColor = "blue";  
element.style.color = "red";  
element.style.fontSize = "12em";

// 更好的作法是，把样式都放在一个class下
.newStyle {  
    background-color: blue;  
    color: red;  
    font-size: 12em;  
}  
element.className = "newStyle";

    【4】使用缓存，缓存临时节点。

// 很差的作法
document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft +  
document.getElementById("myDiv").offsetWidth + "px";  

// 更好的作法
var myDiv = document.getElementById("myDiv");  
myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px";  

 

2. 针选择其的问题，我只能说：没办法…… : (