欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

JavaScript开发技术-DOM性能优化

创建时间:2012年05月25日 14:56  阅读次数:(5314)
分享到:

二十、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判断浏览器兼容性。
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 92+76=? 的结果(结果是:168)
结  果: