JS性能优化

每当将事件处理程序指定给一个元素是，运行中的浏览器与支持页面交互的JavaSctipt代码之间就会建立一个连接。这种连接越多，页面执行起来就越慢。

1.可以采用事件委托技术，限制连接数量！

好处: 只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个单击的元素分别添加事件处理程序。

这样就可以大大减少运行中的浏览器和支持页面交互的JavaScript的连接数，页面会执行的更快。

<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 itme2 = document.getElementById("doSomething");

var item3 = document.getElementById("sayHi");

item1.onclick = function() {

    alert(this.id); // goSomewhere

};

item2.onclick = function() {

    alert(this.id); // doSomething

};

item3.onclick = function() {

    alert(this.id); // sayHi

};

这样只需要为一个元素指定一个处理程序，就可以处理三个元素的事件处理程序。优化了性能

var myLinks = document.getElementById("myLinks");

var handler = function(event) {

  var target =  event.target || event.srcElement;

  alert(targer.id);

};

myLinks.onclick = handler;

2.在不必要的时候，移除元素指定的事件处理程序。

不必要的时候:

      1.从文档中移除带有事件处理程序的元素。（这样移除元素也能阻止事件冒泡，目标元素在文档中是事件冒泡的前提）

<div id="myDiv">

    <button id="myBtn">Click Me</button>

</div>

var myBtn = document.getElementById("myBtn");

myBtn.onclick = function() {

    var myDiv = document.getElementById("myDiv");

    myDiv.innerHTML = "Porr.........";

}

    这里，有一个按钮被包含在<div>中。为避免双击，单击这个按钮时就将按钮移除并替换成一条消息；这是网站设计中非常流行的一种做法。但问题在于，当按钮被从页面中移除时，他还带着一个事件处理程序。在<div>元素上设置上设置innerHTML 可以把按钮移走，但事件处理程序仍然与按钮保持着引用关系。有些浏览器（尤其是IE）在这种情况下不会作出恰当地处理，它们很有可能会将对元素和对事件处理程序的引用保存在内存中。如果你知道某个元素即将被移除，那么最好手工移除事件处理程序。

<div id="myDiv">

    <button id="myBtn">Click Me</button>

</div>

var myBtn = document.getElementById("myBtn");

myBtn.onclick = function() {

    myBtn.onclick = null;

    var myDiv = document.getElementById("myDiv");

    myDiv.innerHTML = "Porr.........";

}

在此，我们设置<div>的innerHTML属性之前，先移除了按钮的事件处理程序。这样就确保内存可以被再次利用，而从DOM中移除按钮也做到了干净利索。