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>

1、传统写法

复制代码
    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访问次数,会延迟整个页面的交互就绪时间。

2、事件委托

  对“事件处理程序过多”问题的解决方案就是事件委托。
事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如: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; 
        }
    }
复制代码

3、使用事件委托的优点:
1)document对象很快就可以访问,而且可以在页面生命周期的任何时间点上为它添加事件处理程序(无需等待DOMContentLoaded或load事件)。换句话说,只要可单击的元素呈现在页面上,就可以立即具备适当的功能。
2)在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的Dom引用更少,所花的时间也更少。
3)整个页面占用的内存空间更少,能够提升整体性能。

 

参考自《javascript高级程序设计》

 本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2013/04/28/3049245.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
Web App开发 JavaScript 前端开发
JavaScript中的性能优化:代码优化技巧与性能分析工具
【4月更文挑战第22天】本文探讨JavaScript性能优化,包括代码优化技巧和性能分析工具。建议避免全局查找、减少DOM操作、使用事件委托、优化循环和异步编程以提升代码效率。推荐使用Chrome DevTools、Lighthouse和jsPerf等工具进行性能检测和优化。持续学习和实践是提升JavaScript应用性能的关键。
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
101 0
|
11月前
|
缓存 JavaScript 前端开发
掌握现代JavaScript异步编程:Promises、Async/Await与性能优化
本文深入探讨了现代JavaScript异步编程的核心概念,包括Promises和Async/Await的使用方法、最佳实践及其在性能优化中的应用,通过实例讲解了如何高效地进行异步操作,提高代码质量和应用性能。
|
11月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
11月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
357 5
|
11月前
|
缓存 负载均衡 监控
性能优化:Node.js高效服务器开发技巧与最佳实践
【10月更文挑战第29天】在Node.js服务器开发中,性能优化至关重要。本文介绍了几种高效开发的最佳实践,包括使用缓存策略、采用异步编程、实施负载均衡和性能监控。通过示例代码展示了如何实现这些技术,帮助开发者构建更快、更稳定的Node.js应用。
326 2
|
12月前
|
存储 缓存 监控
Vue.js 九个性能优化技巧
【10月更文挑战第16天】Vue.js 性能优化是一个持续的过程,需要我们不断地探索和实践。通过合理使用上述九个技巧,并结合具体的项目需求和性能指标,我们可以不断地提高 Vue.js 应用的性能和用户体验。
|
JavaScript 前端开发
理解js事件委托
【9月更文挑战第5天】理解js事件委托
131 5
|
12月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
256 0
|
JavaScript 前端开发 开发者
Chrom devtools JS调试、性能优化与必备功能
Chrom devtools JS调试、性能优化与必备功能