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

本文实例讲述了javascript性能优化之DOM交互操作技巧。分享给大家供大家参考，具体如下：

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

1、最小化DOM更新

看下面例子：

var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//这段代码为列表添加10个项目。添加每个项目时，都有两次DOM更新。总共需要20次DOM更新。

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

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

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

2、使用innerHTML

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

var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3、使用事件委托

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

4、注意NodeList

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

var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;

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

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

赞 (0)

相关推荐

  • js性能优化技巧

    性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议 它的最上层是应用层 传输层 网络层 物理层 请求信息:请求行 请求头 空行 消息体 响应信息:状态行和状态码 使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这

  • javascript性能优化之事件委托实例详解

    本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

  • 编写高性能Javascript代码的N条建议

    多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显.但在某些情况下,不优化的Javascript代码必然会影响用户的体验.因此,即使在当前硬件性能已经大大提升的时代,在编写Javascript代码时,若能遵循Javascript规范和注意一些性能方面的知识,对于提升代码的可维护性和优化性能将大有好处. 下面给出编写高性能的Javas

  • JavaScript性能优化之小知识总结

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javas

  • JavaScript关于提高网站性能的几点建议(一)

    近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上   --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites   利用css s

  • 使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9 但是在很多情况下,我们需要找出数组中最大的元素. var arr=[5,7,9,1] alert(Math.max(arr)) // 这样却是不行的.一定要这样写 function getMa

  • JavaScript提高网站性能优化的建议(二)

    在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

  • javascript性能优化之DOM交互操作实例分析

    本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite

  • JavaScript学习笔记之DOM基础操作实例小结

    JavaScript学习笔记之DOM基础操作实例小结

    本文实例讲述了JavaScript DOM基础操作.分享给大家供大家参考,具体如下: 一.子节点 1.元素节点.文本节点 实例01 html <body> <ulid="ul1"> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4<li></li> 文本节点5<li></li> 文本节点6&

  • 微信小程序之事件交互操作实例分析

    微信小程序之事件交互操作实例分析

    本文实例讲述了微信小程序之事件交互操作.分享给大家供大家参考,具体如下: 微信小程序-点击事件 什么是事件? 指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作. 下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁,在上面显示信息那就显示 点击了谁,点击了多少次,这多少次没有分开啊,次数是点击他两的总和.下面另一代码是分开的,各计各的. 1. 在index.wxml 中设置点击事件(测试时需要删除注释部分) <view class="page"> //点击后在这

  • Javascript 对象（object）合并操作实例分析

    本文实例讲述了Javascript 对象(object)合并操作.分享给大家供大家参考,具体如下: 对象的合并 需求:设有对象 o1 ,o2,需要得到对象 o3 var o1 = { a:'a' }, o2 = { b:'b' }; // 则 var o3 = { a:'a', b:'b' } 方法1:使用JQuery的extend方法 **方法定义**:jQuery.extend([deep], target, object1, [objectN]) > 用一个或多个其他对象来扩展一个对象,返

  • JavaScript时间与时间戳的转换操作实例分析

    JavaScript时间与时间戳的转换操作实例分析

    本文实例讲述了JavaScript时间与时间戳的转换操作.分享给大家供大家参考,具体如下: 一.时间转时间戳:javascript获得时间戳的方法有五种,都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳 1. var timestamp1 = Date.parse(new Date()); // 结果:1544151187000 不推荐这种办法,毫秒级别的数值被转化为000 console.log(timestamp1); 2. var timestamp2 = (new

  • PHP与Web页面交互操作实例分析

    本文实例讲述了PHP与Web页面交互操作.分享给大家供大家参考,具体如下: Web交互 1.Web表单交互 当表单的method属性提交方式为POST时,浏览器发送POST请求 当表单的method属性提交方式为GET时,浏览器发送GET请求 当PHP收到来自浏览器提交的数据后,会自动保存到超全局变量中. 超全局变量是PHP预定义好的变量,可以再PHP脚本的任何位置使用 常见的超全局变量数组变量有$ _POST.$_GET等 通过POST方式提交的数据会保存到$_POST中 通过GET方式提交的

  • JavaScript性能优化总结之加载与执行

    JavaScript性能优化总结之加载与执行

    前言 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write(),例如清单 1 清单 1 JavaScript 代码内嵌示例 <html> <head> <title

  • 基于JavaScript 性能优化技巧心得(分享)

    基于JavaScript 性能优化技巧心得(分享)

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上下文.解析.编译.执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识. 什么是高性能的 JavaScript 代码? 尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型,可以用作参考:RAIL模型. 响应 如果你的应用程序能在1

  • JavaScript性能优化之函数节流（throttle）与函数去抖（debounce）

    函数节流,简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,才能进行下一次该函数的调用. 函数节流的原理挺简单的,估计大家都想到了,那就是定时器.当我触发一个时间时,先setTimout让这个事件延迟一会再执行,如果在这个时间间隔内又触发了事件,那我们就clear掉原来的定时器,再setTimeout一个新的定时器延迟一会执行,就这样. 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1.

随机推荐