二十、DOM性能优化
以下列出一些DOM性能优化的方法，仅供参考：
1.使用document.getElementById代替document.all。不建议使用document.all。
2.使用CSS代替更改image的src来动态更换图片。
3.使用服务器端
Session代替客户端cookie。
4.使用createElement/insertAdjacentElement代替innerHTML,insertAdjacentHTML,write,writeLn创建新元素。
5.缓存对象引用代替getElementById。
例如：
for(var i=0; i<50; i++) {
arr[i]=document.getElementById('myListBox').options[i].value;
}
使用以下方式将获得性能优势。
var mybox = document.getElementById('myListBox');
for(var i=0; i<50; i++) {
arr[i] = mybox.options[i].value;
}
6.先创建好子元素再添加到父元素中比先添加到父元素再创建子元素快。
以下代码的速度会慢：
var res = document.getElementById("testarea");
var t = document.createElement("table");
var tbl = res.appendChild(t);
for(var i=0;i<10000;i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var txt = document.createTextNode("Cell " + i);
tbl.appendChild(row);
row.appendChild(cell);
cell.appendChild(txt);
}
以下代码的速度会快一些：
var res = document.getElementById("testarea");
var t = document.createElement("table");
for(var i=0;i<10000;i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var txt = document.createTextNode("Cell " + i);
t.appendChild(row);
row.appendChild(cell);
cell.appendChild(txt);
}
res.appendChild(t);
7.使用display:none代替visibility:hidden隐藏对象
8.使用querySelectorAll代替getElementsByTagName(IE8后支持)
9.将对象长度保存到变量中代替在循环中每次比较对象长度(length)
10.使用特性或对象检测代替navigator判断浏览器兼容性。