Javascript程序优化（4）

DOM 操作

节约 DOM 操作

Javascript 对 DOM 的处理，可能是最耗费时间的操作之一。每次 Javascript 对 DOM 的操作，浏览器都会改变页面的表现、重新渲染页面，从而有明显的时间损耗。比较环保的做法就是尽可能不在 DOM 中进行 DOM 操作。

请看下面的例子，为 ul 添加 10 个条目

var oUl = document.getElementById("ulItem");

for (var i = 0; i < 10; i++) {
    var oLi = document.createElement("li");
    oUl.appendChild(oLi);
    oLi.appendChild(document.createTextNode("Item " + i);
}

乍看起来似乎无懈可击，但是这段代码的确有问题。首先是循环中的 oUl.appendChild(oLi); 的调用，每次执行过后浏览器就会重新渲染页面；其次，给列表添加添加文本节点（oLi.appendChind(document.createTextNode("Item " + i);），也这会造成页面重新渲染。每次运行都会造成两次页面重新渲染，总计 20 次。

要解决这个问题就如上面所言的，减少 DOM 操作，将列表项目在添加好文本节点以后再添加。下面的代码就可以与上述的代码完成同样的任务。

var oUl   = document.getElementById("ulItem");
var oTemp = document.createDocumentFragment();

for (var i = 0; i < 10; i++) {
    var oLi = document.createElement("li");
    oLi.appendChild(document.createTextNode("Item " + i);
    oTemp.appendChild(oLi);
}

oUl.appendChild(oTemp);

遵循标准的 DOM

说点书中没有的（照本宣科完毕），Javascript 其实在寻找节点（Node）也会花上一段时间。对 Web 标准友好的 (x)html 文档相对杂乱文章的页面来说，Javascript 执行速度两者也会有所差别。

浏览器处理页面有模式之分，这也许也是为什么要编写遵循 Web 标准的页面的原因之一。具体信息可以参考这里和一些言论。

缓存 Ajax

Ajax 虽然提供了页面异步请求调用，但别忘记了它还是访问服务器的。Javascript 作为驱动层本身可以作为缓存使用，虽然在页面重新载入后就会被释放，但对于服务器而言这是一个好的消息。

结束语

不知不觉就写了那么多，很多东西都是书上照本宣科的。《Javascript 高级程序设计》的确是一本不可多得的好书，建议大家有机会都可以去看看。这本书不贵，59 RMB（可能在别的地方还有打折），对于烟民而言也就一条双精度红喜，不过它可比香烟所能带来的快感多得多。