5

我正在为网页制作一个小的管理区域。

取消绑定事件以提高性能(客户端)是否有意义?还是取消绑定事件并在 30 秒后再次绑定它会花费更多的性能?

我的问题: bind()-unbind() 或 on().off() 背后的想法是否只是提高了基于客户端的性能,还是应该将它用于其他场景?出现这个问题是因为我的 javascript 代码由于解除绑定事件而不断增长(大约 30%)。而且我认为,当用户不按照我的意愿进行交互时,有些事情可能无法正常工作...

.

编辑:大多数时候我绑定/取消绑定按键事件,因为我需要箭头键来区分。情景。

4

3 回答 3

5

出于性能原因仅解除绑定以再次绑定可能容易出错,并且在大多数情况下会使事情变得过于复杂。

除了在许多特定的 DOM 元素上绑定事件侦听器,您可以采取更“鸟瞰”的方法并在 DOM 树的顶部附近仅绑定几个侦听器,然后在触发事件时检查实际单击的内容。

这样,您就不会在绑定/解除绑定大量事件侦听器上花费 CPU,而是在处理事件时占用少量 CPU(这通常不明显)。

此处对此进行了详细介绍:向页面添加复杂元素时的事件委托与直接绑定

于 2013-08-14T13:51:05.923 回答
4

如果您尝试绑定和取消绑定,您正在为垃圾收集器实际进入并清理您的代码创建竞争条件。最好绑定一次,不必再次绑定。如果您的客户端预计将运行很长时间(数周、数月),那么您应该将内存管理和内存泄漏视为对性能的更多关注。

绑定解除绑定(如果未正确完成)可能会产生难以发现的内存泄漏。如果您使用的是 webkit,请使用 unbinding 与 binding 对您的性能进行一次堆快照,然后您可以做出最佳决定。

这是一个链接:

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

于 2013-08-14T13:40:28.390 回答
1

避免担心这一点的一种解决方案,尤其是在您处理不断变化的元素或大量元素时,是在主体中注册您的事件,然后指定一个选择器参数。

像这样:

$("body").on("click", ".my-actual-element", function(aEvent) {
   // Event handler code goes here.
});

在这里查看更多$.on()

于 2013-08-14T13:51:51.813 回答