javascript内存和性能

在Javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。
首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。
其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。
事实上，从如何利用好事件处理程序角度出发，还是有一些方法能够提升性能的。
（1）事件委托
对“事件处理程序过多”问题的解决方案就是事件委托。
事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
Eg，click事件会一直冒泡到document层次，也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序，以下面的HTML代码为例

列表项包含3个被单击后会执行操作的列表项，按照传统的做法，需要像下面为他们添加3个事件处理程序。

如果在一个复杂的web应用程序中，对所有可单击的元素都采用这种方式，那结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托来解决这个问题。如下面的程序所示：

这上面这段代码里，我们使用事件委托只为ul元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且他们的事件都会冒泡，所以单击事件最终会被这个函数处理。
与前面未使用事件委托的代码比一比，我们会发现这段代码的事件消耗更低，只取得了一个DOM元素，只添加了一个事件处理程序，所占用的内存更少。所有用到按钮的事件（鼠标事件和键盘事件）都适合采用事件委托技术。
（2）移除事件处理程序
每当将时间处理程序指定给元素时，运行中的浏览器代码与支持页面交互的Javascript代码之间就会建立一个连接。这种连接越多，页面执行起来就越慢。所以如上所述，可以采用事件委托技术，限制建立的连接的数量。另外，不需要的时候移除事件处理程序，也是解决这个问题的一种方案。内存中留有那些过时不用的“空事件处理程序”，也是造成web应用程序内存与性能问题的主要原因。
在两种情况下，可能会造成上述原因，
1、从文档中移除带有事件处理程序的元素时，如果带有事件处理程序的元素被innerHTML删除了，那么原来添加到元素中的事件处理程序极有可能无法被当作垃圾回收。

当按钮被从页面中移除时，它还带着一个事件处理程序呢。它们很有可能会将对元素和对事件处理程序的引用都保存在内存中。如果你知道某个元素即将被删除，那么最好手工移除事件处理程序，如下图所示：

这样，我们在设置div的innerHTML属性之前，先移除了按钮的事件处理程序，这样就确保了内存被再次利用。
2、卸载页面的时候，如果在在页面被卸载之前没有清理干净事件处理程序，那它们就会滞留在内存中。
最好的办法是在页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序。