事件相关的-内存和性能

由于事件处理程序带来的交互能力,在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。

导致这一问题原因有哪些:

  事件相关的处理函数越多,所占用的内存越多,函数是对象,而对象就会占据内存,从而占据内存空间。而内存越多性能就越差。

  其次必须事先指定事件处理程序,则需要访问的dom次数增多,会延迟整个页面的交互就绪时间。

事实上从事件处理程序的角度出发,还有那些方法可以提升性能的?

  1. 事件委托

  由于在一些常用事件是支持冒泡的,所以可以在其父节点或者其祖先节点上获取到对应的事件信息,这样可以通过一个处理程序,管理一类事件。

非委托方式:

  EventUtil.addHandler(window, "load", function (event) {
        var li1 = document.getElementById("first");
        var li2 = document.getElementById("second");
        var li3 = document.getElementById("last");

        EventUtil.addHandler(li1,"click",function(){
           console.log("li1");
        });
        EventUtil.addHandler(li2,"click",function(){
            console.log("li2");
        });
        EventUtil.addHandler(li3,"click",function(){
            console.log("li3");
        });
    })

委托方式:

    EventUtil.addHandler(window, "load", function (event) {
        var listLi = document.getElementById("listLi");

        EventUtil.addHandler(listLi,"click",function(){
            //dosomething
        });
    })

委托方式优点:

  •   在页面中设置事件处理程序需要的时间更少。只需添加一个事件处理程序所需的DOM引用更少,当然花费时间也更少
  •   整个页面占据的内容空间更少,能够提升整体性能。

支持事件冒泡是使用的前提。 常见的一些事件   click、mousedown、mouseup、keydown、keyup、keypress

  移除事件处理程序

    事件处理程序指定给元素时,运行中浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。这种连接越多页面执行起来就越慢。

前面所述,可以采用事件委托技术,限制建立的连接数量。 当不需要的时候采用移除事件处理程序,也是解决这个问题的一种方案。内存中留用那些过时不用的"空事件处理程序"也是造成web应用程序内存与性能问题的主因素。

    在如下两种情况中,可能会造成上述问题。

    第一种情况文档中移除带有事件处理程序的元素时。利用纯粹的DOM操作,例如 removeChild replaceChild 但是更多是用 innerHTML 替换页面中某一部分的时候。

存在一些问题是,当元素被移除时但是事件处理程序可能还是存在于内存中。

  实例:

        var btn = document.getElementById("btn");
        var myDiv = document.getElementById("myDiv");
        btn.onclick = function(){

                myDiv.innerHTML = "";
        };    

只有在某些浏览器(IE)中可能存在,所以在处理中尽量在移除之前先该事件对象与事件处理程序的引用断开

    

        var btn = document.getElementById("btn");
        var myDiv = document.getElementById("myDiv");
        btn.onclick = function(){
                btn.onclick = null;
                myDiv.innerHTML = "";
        };

当然针对不同方式添加事件处理程序其方式也是类似。

  第二种情况是: 当页面卸载的时候,在IE8以及更早的版中,每次加载页面完成再卸载页面时,内存中滞流内存中的对象会增多。

  可以使用 onunload 事件中对 处理程序的引用进行处理。

  

  

时间: 2024-12-27 09:32:19

事件相关的-内存和性能的相关文章

JavaScript 中的内存和性能、模拟事件(读书笔记思维导图)

由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能.导致这一问题的原因是多方面的.首先,每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差.其次,必须事先指定所有事件处理程序而导致的 DOM 访问次数,会延迟整个页面的交互就绪时间.从如何利用好事件处理程序的角度出发,还是有一些方法能够提升性能的. 事件经常由用户操作或通过其他浏览

unity内部:内存 和 性能(以及Unity5的升级优化)

      我们的脚本代码里经常会需要访问gameObject引用或者某个组件的引用,最好的方式当然是在脚本Awake的时候就把这些可能访问的东西都缓存下来:如果需要访问临时gameObject实例的某属性或者临时某组件的gameObject实例,在能够确保组件一定存在(可以使用[RequireComponent( typeof(AudioSource ))] 如果没有自动添加移除不了!)的情况下,可以用属性访问,毕竟属性访问比GetComponent要快上一倍,但是如果不能确定组件是否存在,甚

js事件相关知识点总结

HTML页面是怎样实现交互的? 2017-05-22 js事件之事件流: 事件流原理图:事件流是从window开始,最后回到window的一个过程,分为三个阶段(1~5)捕获过程.(5~6)目标过程.(6~10)冒泡过程. 冒泡型事件:事件按照从最具体的事件目标到最不具体的事件目标(document对象)向上传播的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozi

javascript动手写日历组件(3)——内存和性能优化(by vczero)

一.列表 javascript动手写日历组件的文章列表,主要是通过原生的JavaScript写的一个简约的日历组件: (1)javascript动手写日历组件(1)——构建日历逻辑:http://www.cnblogs.com/vczero/p/js_ui_1.html (2)javascript动手写日历组件(2)——优化UI和添加交互:http://www.cnblogs.com/vczero/p/js_ui_2.html (3)javascript动手写日历组件(2)——内存和性能优化:h

Android内存、性能是程序永恒的话题

内存.性能是程序永恒的话题,实际开发中关于卡顿.OOM也经常是打不完的两只老虎,关于卡顿.OOM的定位方法和工具比较多,这篇文章也不打算赘述了,本章主要是来整理一下JVM的内存模型以及Java对象的生与死. 生存空间(内存区域) Java程序运行在JVM之上,如果Java对象是一个有血有肉的生灵,那么它生存环境是怎样的呢?很多人把Java内存分为堆内存(Heap)和栈内存(Stack),实际上这种划分比较出粗糙和片面.比较细致的划分是这样的: 分为程程计数器.虚拟机栈.本地方法栈.方法区和堆.

SQL Server扩展事件(Extended Events)-- 性能注意事项

SQL Server扩展事件(Extended Events)-- 性能注意事项 使用 CREATE EVENT SESSION 将扩展事件会话放置在一起时,需要认真正确配置一些设置,因为它们可能会在无意中对性能产生影响.首先需要决定是以同步还是异步方式消耗事件.正如您所料,同步目标对所监控代码的性能产生的影响要大过异步目标. 如前所述,同步消耗某个事件时,触发该事件的代码必须一直等待,直到该事件被消耗为止.显然,如果事件消耗是一个复杂的过程,则这可能会降低代码的性能. 例如,在一个每秒处理数千

Windows系统CPU内存网络性能统计第一篇 内存

最近翻出以前做过的Windows系统性能统计程序,这个程序可以统计系统中的CPU使用情况,内存使用情况以及网络流量.现在将其整理一下(共有三篇),希望对大家有所帮助. 目录如下: 1.<Windows系统CPU内存网络性能统计第一篇 内存> 2.<Windows系统CPU内存网络性能统计第二篇 CPU> 3.<Windows系统CPU内存网络性能统计第三篇网络流量> 本篇将介绍统计系统内存使用情况,包括内存使用率.总物理内存大小.可用物理内存大小.总虚拟内存大小,可用虚

UIResponder 以及事件相关..还有第一响应对象

在iOS 中,一个 UIResponder 对象表示一个可以接收触摸屏上的触摸事件的对象,通俗一点的说,就是表示一个可以接收事件的对象. iOS 中,所有显示在界面上的对象都是从 UIResponder 直接或间接继承的. 下面是 UIResponder 类的一些定义信息: 触摸事件相关: 方法名称 说明 touchesBegan:withEvent 当用户触摸到屏幕时调用方法 tochesMoved:withEvent 当用户触摸到屏幕并移动时调用此方法 tochesEnded:withEve

UE4事件相关总结

转自:http://blog.ch-wind.com/ue4-event-overview/ 事件机制是实现游戏内逻辑的重要部分,在开始进行游戏逻辑的设计和实现之前,对UE4的事件机制进行理解是非常必要的.于是在这里对UE4的事件相关内容全部整理一下. 当前使用的UE版本是4.6.0. UE4的内置事件 – Event Level Reset 这个事件如其名称,只存在于Level Blueprint.只能在服务端运行. 事件发出在关卡被重置时,例如玩家死亡后地图没有重新载入而是重置的情况. –