JS事件(五)内存与性能

1、减少代码中事件处理程序的数量,是减少内存开销,提升网页速度的有效手段

事件委托:

<ul id="ul">
<li id="goSomewhere">goSomewhere</li>
<li id="doSomething">doSomething</li>
<li id="sayHi">sayHi</li>
</ul> <script>
var ul=document.getElementById("ul"); EventUtil.addHandler(ul,"click",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
switch(target.id) {
case "goSomewhere":
location.href="https://www.baidu.com";
break;
case "doSomething":
document.title="I changed the title";
break;
case "sayHi":
alert("hi");
break;
}
});
</script>

核心:利用冒泡原理,将事件绑定到父元素,减少内存消耗,提升性能

利用event属性找到事件源,将事件定位到具体元素上

2、减少“空事件处理程序”

2.1、绑定有事件处理程序的元素,通过DOM操作被移除 ,但事件还在,由此产生内存浪费:

var btn=document.getElementById("btn");
EventUtil.addHandler(btn,"click",function(){
  btn.onclick=null;
  document.getElementById("div").innerHTML="processing...";
});

解决方案:手动移除

2.2、页面卸载时,事件处理程序滞留

解决方案:在页面卸载之前,通过onunload移除所有事件处理程序

上一篇:(转)mongodb常用命令脚本化-自动化运维


下一篇:mongoDB常用命令与安全加固