JavaScript 事件对内存和性能的影响


Posted in Javascript onJanuary 22, 2017

虽说事件处理程序可以为现代 Web 页面添加很强的交互能力,但是不分青红皂白就添加大量的事件处理程序绝对是一种愚蠢的行为。

我们来分析一下:事件处理程序本质上是一种函数,是一种对象,存放在内存中,设置大量的事件处理程序会使内存中的对象变多,Web 程序的性能会变得越来越差,用户体验很不好。

为了更好地利用好事件处理程序,便出现了事件委托,用来提升性能。

事件委托

事件委托(event delegation):把若干个子节点上的相同事件的处理函数绑定到它的父节点上去,在父节点上统一处理从子节点冒泡上来的事件,这种技术就叫做事件委托。

补充一下:事件委托并不局限于父节点与子节点之间。也可以这样玩,比如页面文档中有好多个处在不同位置地 button,都是绑定 click 事件,使用事件委托,我们可以把这些个事件统一绑定到 body 元素,然后再进行处理(虽然一般很少这么用)。

下面举例子逐步说明事件委托的优势:

<ul id="parent-list">
 <li id="list-1">List 1</li>
 <li id="list-2">List 2</li>
 <li id="list-3">List 3</li>
 <li id="list-4">List 4</li>
 <li id="list-5">List 5</li>
</ul>

假设有上面的代码,我们现在有一个需求:就是无论单击上面的列表(ul)的哪个子列表(li),都会弹出一个框,来显示我们点击了哪个子列表。

需求不难吧?有了需求,接下来是该写 js 代码了,现在有两种方法放在你眼前:1. 为每个 li 子元素绑定 click 事件,然后设置处理函数; 2. 利用事件委托,为 ul 父元素绑定 click 事件,然后设置处理函数

// 方法一
var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
 alert(this.firstChild.nodeValue);
},false);
var list2 = document.getElementById("list-2");
list2.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
var list3 = document.getElementById("list-3");
list3.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
var list4 = document.getElementById("list-4");
list4.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
var list5 = document.getElementById("list-5");
list5.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
 var target = event.target;
 if(target.nodeName.toLowerCase() === "li"){
 alert(target.firstChild.nodeValue);
 }
},false);

看着上面的代码,我这里写几点方法二的优点:1. 减少了访问 DOM 的次数,提升了性能;2. 将子元素的事件处理程序统一绑定到其父元素,减少了对内存的占用;3. 可以更好地管理事件处理程序,比如移除对某个事件处理程序的引用

注意:如果对各个子元素的需求不一样,我们还可以这样来改写上面的方法二:

// 方法二
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
 var target = event.target;
 if(target.nodeName.toLowerCase() === "li"){
 switch(target.id){
  case "list-1":
  alert("学的越多,越觉得自己无知!");
  break;
  case "list-2":
  alert("爱是一种艺术!");
  break;
  case "list-3":
  target.innerHTML = "呵呵,我改了啊!";
  break;
  case "list-4":
  target.style.background = "#aaa";
  break;
  case "list-5":
  target.style.color = "red";
  target.style.fontSize = "2em";
  break;
  default:
  break;
 }
 }
},false);

因为事件委托依赖事件冒泡机制,所以,并不是所有的事件都可以进行事件委托。

最适合采用事件委托的事件包括:click、mousedown、mouseup、keydown、keyup 和 keypress。

事件委托只是一种非常不错的事件绑定的思想,所以不应该拘泥于上面的例子,要活学活用! ^_^

移除事件处理程序

我们前面说过,事件处理程序存在于内存中,每当将事件处理程序指定给元素时,运行中的浏览器代码与支持页面交互的 JavaScript 代码之间就会建立一个连接。这种连接越多,页面执行就越慢。前面所说的事件委托就是用来限制建立的连接数量。

还有,就是内存中那些使用完后不再使用的事件处理程序,如果不释放掉,也会影响 Web 应用程序的内存和性能。

<button id="button">提交</button>
var button = document.getElementById("button");
button.onclick = function(){
 // 提交某个表单的操作代码
 button.onclick = null; // 移除事件处理程序
 event.target.firstChild.nodeValue = "提交中。。。";
};

总的原则就是:移除掉那些过时不再使用的事件处理程序,释放内存!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 #Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 #Javascript
JavaScript 详解预编译原理
Jan 22 #Javascript
JavaScript中匿名函数的递归调用
Jan 22 #Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 #Javascript
loading动画特效小结
Jan 22 #Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 #Javascript
You might like
建立动态的WML站点(三)
2006/10/09 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP重定向的3种方式
2013/03/07 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
总结js函数相关知识点
2018/02/27 Javascript
python计算最大优先级队列实例
2013/12/18 Python
Python-基础-入门 简介
2014/08/09 Python
Python算法之栈(stack)的实现
2014/08/18 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python采集微信公众号文章
2018/12/20 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python-opencv 双线性插值实例
2020/01/17 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
Python中如何定义一个函数
2016/09/06 面试题
信息专业大学生自我评价分享
2014/01/17 职场文书
竞选部长演讲稿
2014/04/26 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
孔子观后感
2015/06/08 职场文书
员工升职自我评价
2019/03/26 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Apache POI的基本使用详解
2021/11/07 Servers
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android