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知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
jquery实现弹出层效果实例
May 19 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
JavaScript实现筛选数组
Mar 02 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
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Python切片工具pillow用法示例
2018/03/30 Python
python Tornado框架的使用示例
2020/10/19 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
纽约海:Sea New York
2018/11/04 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
十八大报告观后感
2014/01/28 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL