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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
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
解决GD中文乱码问题
2007/02/14 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php之可变变量的实例详解
2017/09/12 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python实现flappy bird游戏
2018/12/24 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python可迭代对象操作示例
2019/05/07 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
python logging模块的使用总结
2019/07/09 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
运动会广播稿100字
2014/01/11 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
公司口号大全
2014/06/11 职场文书
党支部对转正的意见
2015/06/02 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android