事件处理程序过多会影响内存和性能
添加到页面上的事件处理程序的数量和页面的整体性能是直接相关的。
- 每个函数都是对象,会占用内存,对象越多性能越差。
- 必须事先指定事件处理程序会导致访问DOM的次数增多,会延迟整个页面的交互就绪时间。
如何提升性能?
1.事件委托
在DOM树的尽量高的层次上添加一个事件处理程序
也可以考虑为document对象添加一个时间处理程序,这样的优点有:
- document对象可以很快访问,可以在页面生命周期的任何时间节点上为它添加事件处理程序(无需等待DOMContentLoaded或load事件)
- 在页面中设置处理程序所需时间更少。只添加一个事件所需的DOM引用更少,花费时间也更少
- 整个页面占用内存空间少,能提升整体性能。
适合事件委托的事件有:click,mousedown,mouseup,keydown,keyup,keypress等。
2.移除事件处理程序
将内存中不需要的‘空事件处理程序’移除,减少JS与页面之间的连接,可以提高页面的执行速度