js性能优化-事件委托

考虑一个列表，在li的数量非常少的时候，为每一个li添加事件侦听当然不会存在太多性能方面的问题，但是当列表非常的长，长到上百上千甚至上万的时候（当然只是一个解释，实际工作中很少遇到这么多li的情况），为每个li添加事件侦听就会对页面性能产生很大的影响。

就像下面这段代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body> 
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html> 
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
var b=a.getElementsByTagName('li');
for(var i=0;i<b.length;i++){
b[i].addEventListener('click',function(e){
var c = e.target; 
alert(c.innerHTML);
},false);
}

})();
</script>

首先，我们来想下，产生性能问题的根本原因是什么呢？li元素（目标对象）所要进行的事件处理了。怎么可以解决这种囧况呢？

答案就是采用事件委托，将在li对象上面要处理的事件委托给父元素或者祖先元素，即为父元素绑定事件侦听，

看看下面的改进代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
</head>
<body> 
<ul id='list'>
<li>精通css</li>
<li>精通js</li>
<li>精通html</li>
......
</ul>
</body>
</html> 
<script type="text/javascript">
(function(){
var a=document.getElementById('list');
a.addEventListener('click',function(e){
var b = e.target; 
alert(b.innerHTML);
},false);
})();
</script>

虽然现在很多框架都已经实现了事件委托，但是作为一个开发人员，用框架的同时我们也应该知道他实现的原理是如何的，知其然，更要知其所以然，下面是我最近在图灵社区看到的（jquery解决方案）：http://www.ituring.com.cn/article/467，希望对大家开发有帮助！

js性能优化-事件委托的更多相关文章

  1. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  2. js 性能优化利器：prepack

    1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...

  3. js中的事件委托或是事件代理

    JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...

  4. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

  5. js性能优化文章集锦

    总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...

  6. JS性能优化 之 事件委托

    面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见.JS中事件委托的实现主要依赖于 事件冒泡 .那什么是事件冒泡?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一 ...

  7. js中的事件委托或是事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  8. 我所经历的JS性能优化

    转自http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html 折腾了好几天,纠结了好几天,郁闷了好几天,终于在今天可以释怀了,留下其中 ...

  9. js性能优化--学习笔记

    <高性能网站建设进阶指南>: 1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的:把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法:比如for循环中的.len ...

随机推荐

  1. Asp.net MVC Comet推送

    一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收到服务器发送的AJAX请求,服务器端并不返回,而是将其Hold住,待到有东西要通知客户端时,才将这个请求返回. 客户 ...

  2. 如何删除xcode项目中不再使用的图片资源

    1. 利用工具    下载地址  http://jeffhodnett.github.io/Unused/   运行效果如下 2. 通过终端 执行 shell 命令 a. 第一步建立.sh 文件  如 ...

  3. Java编程中“为了性能”需做的26件事

    1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: (1)控制资源的使用,通过线程同步来控制 ...

  4. 回车符(CR)与换行符(LF)， '\r'和'\n'的区别

    回车”(Carriage Return)和“换行”(Line Feed)这两个概念的来历和区别.在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33,Linux/Unix下 ...

  5. Android JSON、GSON、FastJson的封装与解析

    声明: 1.本帖只提供代码,不深入讲解原理.如果读者想要深入了解,那就不要在这个帖子上浪费时间了 2.客户端用的是Google官方的Volley访问服务器,具体了解Volley请戳 这里 3.本帖三种 ...

  6. Hadoop概括——学习笔记<一>

    之前有幸在MOOC学院抽中小象学院hadoop体验课. 这是小象学院hadoop2.X概述第一章的笔记 第一章主要讲的是hadoop基础知识.老师讲的还是比较全面简单的,起码作为一个非专业码农以及数据 ...

  7. [Data Structure & Algorithm] 七大查找算法

    查找是在大量的信息中寻找一个特定的信息元素,在计算机应用中,查找是常用的基本运算,例如编译程序中符号表的查找.本文简单概括性的介绍了常见的七种查找算法,说是七种,其实二分查找.插值查找以及斐波那契查找 ...

  8. ICP 算法

    ICP 算法是一种点云到点云的配准方法. 在SLAM中通过空间点云的配准(可以通过相机或者3D激光雷达获取点云数据),可以估计相机运动(机器人运动,旋转矩阵R与平移向量t),累积配准,并不断回环检测, ...

  9. Site Not Found

    http://moofx.it/ Site Not Found http://www. suchso.com /code/ace/gallery.html http://demo.rocketthem ...

  10. hihoCoder 1196 高斯消元·二

    Description 一个黑白网格,点一次会改变这个以及与其连通的其他方格的颜色,求最少点击次数使得所有全部变成黑色. Sol 高斯消元解异或方程组. 先建立一个方程组. \(x_i\) 表示这个点 ...