DOM操作性能不好，这是影响JavaScript性能的最主要原因。性能不好是因为浏览器的DOM实现通常是和JavaScript引擎分离的。从浏览器的角度来讲，这样做是很有意义的，因为有可能一个JavaScript应用根本不需要DOM，而除了JavaScript之外的其它语言（如IE的VBScript）也可以用来操作页面中的DOM。

一个原则就是DOM访问的次数应该被减少到最低，这意味者：

- 将DOM引用赋给本地变量，然后操作本地变量

- 当可能的时候使用selectors API

for (var i = 0; i < 100; i += 1) {

document.getElementById("result").innerHTML += i + ", ";

}

for (i = 0; i < 100; i += 1) {

content += i + ",";

}

document.getElementById("result").innerHTML += content;

var padding = document.getElementById("result").style.padding,

margin = document.getElementById("result").style.margin;

var style = document.getElementById("result").style,

padding = style.padding,

margin = style.margin;

document.querySelector("ul .selected");

document.querySelectorAll("#widget .class");

当你需要添加一棵相对较大的子树的时候，你应该在完成这棵树的构建之后再放到文档树中。为了达到这个目的，你可以使用文档碎片（document fragment）来包含你的节点。

不要这样添加节点：

var p, t;

document.body.appendChild(frag);

当你添加新的节点到文档中时，文档碎片很有用。当你需要更新已有的节点时，你也可以将这些变化集中。你可以将你要修改的子树的父节点克隆一份，然后对克隆的这份做修改，完成之后再去替换原来的元素。

var oldnode = document.getElementById('result'),

clone = oldnode.cloneNode(true);

oldnode.parentNode.replaceChild(clone, oldnode);