高性能 内存 事件优化

Posted 2020-06-09

为什么要优化：

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添加）