javascript性能优化之事件委托实例详解
2015-12-12 16:00
966 查看
本文实例分析了javascript性能优化之事件委托。分享给大家供大家参考,具体如下:
为下面每个LI绑定一个click事件
<ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Say hi</li> </ul>
一、传统写法
var item1=document.getElementById("goSomewhere"); var item2=document.getElementById("doSomething"); var item3=document.getElementById("sayHi"); item1.onclick = function(){ console.log('goSomewhere'); } item2.onclick = function(){ console.log('doSomething'); } item3.onclick = function(){ alert("hello"); }
在javascript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,事件越多,性能越差。
导致原因是多方面:
1、每个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。
2、必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。
二、事件委托
对“事件处理程序过多”问题的解决方案就是事件委托。
事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如:click事件会一直冒泡到document层次。也就是说,我们可以为整个页面指定一个onclick事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。
事件委托方法:
var list=document.getElementById("myLinks"); list.onclick = function(e){ var target = e.target; switch(target.id){ case "goSomewhere": console.log('goSomewhere'); break; case "doSomething": console.log('doSomething'); break; case "sayHi": alert("hello"); break; } }
三、使用事件委托的优点:
1)document对象很快就可以访问,而且可以在页面生命周期的任何时间点上为它添加事件处理程序(无需等待DOMContentLoaded或load事件)。换句话说,只要可单击的元素呈现在页面上,就可以立即具备适当的功能。
2)在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的Dom引用更少,所花的时间也更少。
3)整个页面占用的内存空间更少,能够提升整体性能。
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式