どのようにjavascriptイベントのメモリ性能に対する影響を減らしますか?

私たちはブラウザがOSのメモリを使っていることを知っています.また制限されています.
ページに過剰なイベントを追加すると、イベント処理関数が多すぎるため、メモリの占有が大きすぎて、パフォーマンスに深刻な影響を与えます.同時に、多すぎるイベントはページの相互性を低下させます.
イベントハンドラの数を減らすにはどうすればいいですか?

< 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”);
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;
}
});

2.適時にイベントを削除し、メモリを解放する
まず反例を見ます.

< div id=”myDiv” >
< input type=”button” value=”Click Me” id=”myBtn” >
< /div >
< script type=”text/javascript” >
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
//do something
document.getElementById(“myDiv”).innerHTML = “Processing...”; //Bad!!!
};
< /script >

正解:

< div id=”myDiv” >
< input type=”button” value=”Click Me” id=”myBtn” >
< /div >
< script type=”text/javascript” >
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
//do something
btn.onclick = null; //remove event handler
document.getElementById(“myDiv”).innerHTML = “Processing...”;
};
< /script >