JavaScript性能优化之事件委托

1 内存和性能

  在JavaScript中,添加到页面上的事件处理程序的数量直接关系到页面的整体运行性能

  首先,每个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。

  其次,必须事先指定所有事件处理程序,会导致DOM访问次数增加,会延迟整个页面的交互就绪时间。

2 事件委托

  事件委托就是事件目标本身不处理事件,而是把处理任务委托给其父元素或祖先元素。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

  事件委托解决了"事件处理程序过多"的问题。

  假定现在有个ul无序列表(id为items),其中li(id为item+序号)代表每个项,当点击项时需弹窗显示项的基本信息。

<ul id="items">
	<li id="item1">无序列表1</li>
	<li id="item2">无序列表2</li>
	<li id="item3">无序列表3</li>
</ul>

  采用事件绑定li的方法(addHandler是跨浏览器的添加事件处理程序函数,具体实现见JavaScript事件章节):  

var item1 = document.getElementById(‘item1‘);
var item2 = document.getElementById(‘item2‘);
var item3 = document.getElementById(‘item3‘);

EventUtil.addHandler(item1, "click", function(){
	alert("I am item1!");
});

EventUtil.addHandler(item2, "click", function(){
	alert("I am item2!");
});

EventUtil.addHandler(item3, "click", function(){
	alert("I am item3!");
});

  使用事件委托,只需在DOM树种尽量最高的层次添加一个事件处理程序。

var items = document.getElementById(‘items‘);
EventUtil.addHandler(items, "click", function(event){
	var event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);

	alert("I am " + target.id);
});

  这里,通过事件委托只为ul元素添加了一个onclick的事件处理程序。由于所有li都是这个ul的子节点,而且它们的事件会冒泡,所以单击事件最终会被这个函数处理。

  对比普通的事件绑定代码和使用事件委托后的代码,会发现使用事件委托后消耗更小:只获取了一个DOM节点,只添加了一个事件处理程序,占用的内存更小。

  所有用到按钮的事件(多数鼠标事件和键盘事件)都适合采用委托的技术。

3 移除事件处理程序

  减少浏览器代码和支持页面交互的JavaScript代码之间的连接,通常有两种方法:

  1.使用事件委托技术,限制建立的连接数量;

  2.在不需要的时候,移除事件处理程序

  如果没有很好地移除事件处理程序,会导致"空事件处理程序",进而也会影响程序内存和性能,造成空事件处理程序的原因:

  1.从文档中移除了带有事件处理程序的元素(removeChild(),replaceChild());

  2.带有事件处理程序的元素被innerHTML删除了。解决办法在innerHTML操作前通过给事件赋值null移除事件处理程序

  3.页面卸载的时候(IE8-),如果在页面被卸载前没有清理干净事件处理程序,那么它们就会滞留在内存。解决办法通过onunload事件处理程序移除所有事件处理程序。

时间: 2025-01-05 14:58:33

JavaScript性能优化之事件委托的相关文章

JavaScript性能优化小知识总结(转)

JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个

摘:JavaScript性能优化小知识总结

原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太

JavaScript性能优化

1.使用局部变量 在函数中,总是使用var来定义变量.无论何时使用var都会在当前的范围类创建一个局部变量.如果不使用var来定义变量,那么变量会被创建在window范围内,那么每次使用这个变量的时候,解释程序都会搜索整个范围树.同时全局变量要在页面从浏览器中卸载后才销毁,而局部变量在函数执行完毕即可销毁,过多的全局变量增加了不必要的内存消耗.只要有可能就应该用局部变量或者数字索引的数组来替代命名特性.如果命名特性要多次使用,就先将它的值存储在局部变量中,以避免多次使用线性算法请求命名特性的值.

javascript性能优化-repaint和reflow

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显. 何时发生: 1. DOM元素的添加.修改(内容).删除( Reflow + Repa

JavaScript进阶系列06,事件委托

在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个事件处理机制为页面元素注册事件方法. □ 点击页面任何部分触发事件 创建一个script1.js文件. (function() { eventUtility.addEvent(document, "click", function(evt) { alert('hello'); }); }(

[转]JavaScript性能优化

如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍JavaScript性能优化的技巧,并提供相应的测试用例,供大家在自己使用的浏览器上验证, 同时会对特定的JavaScript背景知识做一定的介绍. 变量声明带上var 如果声明变量忘记了var,那么js引擎将会遍历整个作用域查找这个变量,结果不管找到与否,都是悲剧. 如果在上级作用域找到了这个变量,

JavaScript性能优化小窍门实例汇总

JavaScript性能优化小窍门实例汇总在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多. 但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题. 因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导

Javascript性能优化(一)

一.加载 1. 依据HTML 4规范,script标签可以放置在head和body标签中的任意位置 2. 下载js脚本会阻塞其他页面文件下载,所以应尽可能将script标签放置在body底部 3. HTML 4为script标签增加了一个defer属性,表明延迟执行,但这并不是标准做法 4. 将多个script合并后压缩,放置在body标签底部,是引入多个外链javascript文件的最佳实践 5. 通过动态创建标签,可以异步引入js文件,代码如下: 1 function loadScript(

JavaScript面试问题:事件委托和this

JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由 于有着各种各样的背景,所以不是每个人都对JavaScript及其基本原理有广泛的认识.通常来书,除非你去参加工作面试才会去思考为什么或者怎么做, 否则JavaScript只是你工作的内容. 这个系类的目标是深入探讨JavaScript的一些概念和理论.主题来自于 Darcy Clarke的JavaScript典型面试问题列表.希望你不仅仅是为了答案而阅读