在大多数情况下,事件(比如鼠标单击)并不是频繁发生,而且性能也不是一个主要关注的问题。

但是,仍然有一些事件(比如mouseover/scroll)会每秒钟触发N次。在这样的情况下,就得思考一下,如何聪明地使用事件了。

性能的提升可以体现在减少事件处理的handler本身的工作量,也可以缓存一些已经计算过的内容以免重复计算,更加可以使用setTimeout的方法来限制事件的频率。

把所有的事件都托管在文档树的根元素(document.body)上(比如简单的写法$selector.live(event, handler)就是这样)会影响性能。

为什么?

每当事件发生时,jQuery必需从event.target一直扫描到文档的根目录,来匹配可能绑定的事件类型和选择器。

所以,把事件托管到离目标最近的父级元素上是最优性能的选择。这样可以避免不必要的document.body托管(特别是大型文档)。

jQuery 能够非常快速地处理代理在简单选择器(比如 tag#id.class)上的事件。像处理”#myForm”, “a.external”, and “button”这样的选择器都是灰快的。而复杂选择器,特别是多层级筛选的选择器的托管就要慢上好几倍。处理复杂选择器的技巧就是,拆分出选择器的公共父级,并把父级下的子元素的事件代理到这个父级上。

一个例子:

$("#commentForm").on("click", ".addNew", addComment)

就远优于

$("body").on("click", "#commentForm .addNew", addComment)

因为后面一句等价于

$("#commentForm .addNew").click(addComment),或
$("#commentForm .addNew").live("click", addComment)

发表评论

电子邮件地址不会被公开。 必填项已用*标注