事件相关的-内存和性能

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

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

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

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

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

事件委托

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

非委托方式：

  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 事件中对处理程序的引用进行处理。