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. CPU

    多核处理器 http://baike.baidu.com/link?url=6LwImqyaZqI15gVqcGstOA5S73g-Gj2hakrCbFGc_Jh1NIPPZLkahpuI5OSLoi ...

  2. 6Hibernate进阶----青软S2SH(笔记)

    关于关联关系的配置,用注解配置如下(这里引用的jar包是javax.persistence) // @ManyToOne(fetch=FetchType.LAZY) @ManyToOne(fetch= ...

  3. ActiveMQ启动多个broker

    具体步骤如下: 1.把activemq目录下的conf文件复制一份,叫做conf2, 命令: cp -r conf conf2 2.修改conf2目录下的activemq.xml文件 a.修改brok ...

  4. BCP导出导入大容量数据实践

    前言 SQL SERVER提供多种不同的数据导出导入的工具,也可以编写SQL脚本,使用存储过程,生成所需的数据文件,甚至可以生成包含SQL语句和数据的脚本文件.各有优缺点,以适用不同的需求.下面介绍大 ...

  5. ORACLE 触发器

    •1.1 触发器类型 • DML触发器 • 替代触发器 • 系统触发器 •1.2 创建触发器 • 触发器触发次序 • 创建DML触发器 • 创建替代(INSTEAD OF)触发器 • 创建系统事件触发 ...

  6. Asp.Net Core--简单的授权

    翻译如下: 在MVC中授权通过控制AuthorizeAttribute属性及其各种参数.在最简单的应用AuthorizeAttribute属性控制器或行动限制访问控制器或操作任何身份验证的用户. 例如 ...

  7. 前端XSS攻击和防御

    xss跨站脚本攻击(Cross Site Scripting),是一种经常出现在web应用中的计算机安全漏洞,指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会 ...

  8. HeapSort 堆排序 基于伪代码实现

    此文原创, http://www.cnblogs.com/baokang/p/4735431.html ,禁止转载 GIF 动态图 伪代码 /* From Wikipedia, the free en ...

  9. Win10安装程序出现error code 2502 2503

    在Win10中,在安装msi安装包的时候常常会出现代码为2502.2503的错误.其实这种错误是由于安装权限不足造成的,可以这种msi的安装包不像其他exe的安装程序,在安装包上点击"右键& ...

  10. python之路十一

    RabbitMQ基本概念RabbitMQ , 是一个使用 erlang 编写的 AMQP (高级消息队列协议) 的服务实现. 简单来说, 就是一个功能强大的消息队列服务.通常我们谈到队列服务, 会有三 ...