javascript性能优化之事件委托实例详解
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了javascript性能优化之事件委托用法,结合实例形式对比分析了JavaScript中事件委托的具体用法与优点,需要的朋友可以参考下
本文实例分析了javascript性能优化之事件委托。分享给大家供大家参考,具体如下
为狼蚁网站SEO优化每个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程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程