高性能 内存 事件优化

为什么要优化：

1、每一个函数都是一个对象，会占用内容
2、需要添加事件的Dom节点越多，就要花更多的时间去给那些节点添加处理函数，延迟整个页面的交互，因为先得把事件都加上去 : (

优化1：使用事件代理
<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”);
EventUtil.addHandler(item1, “click”, function(event){
location.href = “http://www.wrox.com”;
});
EventUtil.addHandler(item2, “click”, function(event){
document.title = “I changed the document’s title”;
});
EventUtil.addHandler(item3, “click”, function(event){
alert(“hi”);
});

var list = document.getElementById(“myLinks”); //使用事件代理，只需要给<ul>添加事件处理，再去判断事件源

EventUtil.addHandler(list, “click”, function(event){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

switch(target.id){

case “doSomething”:

document.title = “I changed the document’s title”;

break;

case “goSomewhere”:

location.href = “http://www.wrox.com”;

break;

case “sayHi”:

alert(“hi”);

break;

}

});
把事件处理函数放在document上，可以立即生效（不需要等待DOMContentLoaded和load事件）

优化2：移除不在需要的事件处理函数
当使用removeChild() replaceChild() 或者 innerHTML() 方法操作Dom的时候，被移除替代的Dom上事件处理函数很可能没有被垃圾回收
可以使用事件代理去避免这样的问题，当你知道某个Dom结构很可能有变化，那么就把事件处理函数放到上一级不会被操作的元素上去。
当页面unload的时候，事件处理没有被remove，它们很可能还占据着内存，可以添加unload事件在页面卸载时remove事件处理函数（注意：添加了unload事件的页面不会保留在bfcache，可以只针对ie添加）