欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript性能优化之DOM交互操作实例分析_javascript技巧

程序员文章站 2022-03-30 16:56:47
...
本文实例讲述了javascript性能优化之DOM交互操作技巧。分享给大家供大家参考,具体如下:

在javascript各个方面,DOM毫无疑问是最慢的一部分。DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。

1、最小化DOM更新

看下面例子:

var list = document.getElementById("ul");
for (var i=0; i 

我们可以使用 文档碎片 来最小化DOM更新。

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i 

更多关于 文档碎片,详见之前文章 《JavaScript文档碎片操作实例分析

2、使用innerHTML

对于比较大的DOM更改,使用innerHTML要比createElement()和appendChild()快。

var list = document.getElementById("ul");
var html = "";
for (var i=0; i item" + i + "
  • "; } list.innerHTML = html;
  • 3、使用事件委托

    详见之前文章 《javascript性能优化之事件委托实例详解

    4、注意NodeList

    最小化访问NodeList的次数可以极大的改进脚本的性能,因为每次访问NodeList,都会运行一次基于文档的查询。

    var imgs = document.getElementsByTagName("img");
    for (var i=0, len=imgs.length; i 
    

    更多关于 NodeList,详见之前文章 《在javascript将NodeList作为Array数组处理的方法

    希望本文所述对大家JavaScript程序设计有所帮助。