javascript - Jquery 事件性能与内存使用

Question

我正在开发一个完全使用 ajax 的 Web 项目，其中部分内容始终通过 DOM 操作或使用 jQuery 的加载函数生成。我一直在使用“live”，但非常有兴趣摆脱“live”并使用“on”来获得性能优势。当新页面加载该部分所需的一组全新绑定(bind)时，也需要加载。 html 部分有一些永远不会改变的父 DOM(基本上是网页不同内容区域的包装器)，允许我为将在页面上创建的所有 future DOM 元素对它们进行绑定(bind)。

在内存和性能权衡方面，哪种方式通常是处理事件绑定(bind)的更好方法？

1. 在新部分完成加载其 html 后，将该特定页面实例所需的所有事件绑定(bind)到 DOM 元素上，这些元素将在页面更改时被删除。

2. 将第一个页面加载上的每个事件绑定(bind)到已知始终存在的 DOM 元素(虽然不像 live 那样绑定(bind)到文档)。

Answer 1

监听器的内存问题通常可以很容易地处理(不要在闭包中保存大量数据，不要创建循环引用，使用委托(delegate)等)。

“实时”仅使用委托(delegate)(据我所知)——您可以非常简单地实现委托(delegate)，而无需使用简单的标准，例如class 或 id，在不变的父元素上有监听器。委派是一个很好的策略，它取代了许多其他听众，内容不断变化，识别应该调用函数的元素很简单。

如果您遵循每次内容更改时附加大量新监听器的策略，那么在替换旧监听器时，您还必须分离旧监听器，以此作为减少内存泄漏可能性的策略。性能(根据作为 DOM 更新的一部分附加和删除监听器所花费的时间)通常不是什么大问题，除非您要执行数百个监听器。

通过委托(delegate)，父元素监听事件，检查 event.target/srcElement 是否是它关心的那个事件，然后调用适当的函数，也许使用 call 来设置值这个如果需要的话。

请注意，您也可以在插入的 HTML 中简单地包含内联监听器，这样您就无需担心内存泄漏、委派或添加和删除监听器。使用简单函数调用的内联监听器并不比添加任何其他属性(类、id 等)复杂，并且需要在客户端进行零额外编程。我认为内联监听器从来都不是内存泄漏的问题。

当然，“不引人注目的 javascript”暴徒会大喊大叫，但它们非常实用、功能强大且健壮，更不用说每个支持 javascript 的浏览器都支持它们了。