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. centos 7.1 apache 源码编译安装

    Apache编译安装 一,需要软件: http://mirrors.cnnic.cn/apache//apr/apr-1.5.2.tar.gz 1.apr-1.5.2.tar.gz http://mi ...

  2. sicp-py

    第一章 在第一章中,我们专注于计算过程,以及程序设计中函数的作用.我们看到了如何使用原始数据(数值)和原始操作(算术运算),如何通过组合和控制来形成复合函数,以及如何通过给予过程名称来创建函数抽象.我 ...

  3. linux下共享库的注意点之-fpic

    在编译共享库必须加上-fpic.这是为什么呢? 首先看一个简单的例子: #include <stdio.h> int fun1() { printf("fun1\n") ...

  4. 微信小程序开发视频教程新鲜出炉

    微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...

  5. 配置php.ini实现PHP文件上传功能

    本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...

  6. jquery-常用的运行函数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css3美化复选框checkbox

     两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...

  8. 2016ACM/ICPC亚洲区沈阳站-重现赛赛题

    今天做的沈阳站重现赛,自己还是太水,只做出两道签到题,另外两道看懂题意了,但是也没能做出来. 1. Thickest Burger Time Limit: 2000/1000 MS (Java/Oth ...

  9. 水平时间轴 html + css

    比较粗糙,效果如图 这个是写微信页面时写的,pc 也是一样的效果 代码如下: <div class="time_line_box"> <div class=&qu ...

  10. MySql 连接字符串

    一.MySQL Connector/ODBC 2.50 (MyODBC 2.50)连接方式 1.本地数据库连接Driver={MySQL};Server=localhost;Option=16834; ...