我正在做一个完全 AJAX 的web项目,其中一个部分的内容总是通过DOM操作或使用jQuery的load函数生成的。我一直在使用“live”,但我非常感兴趣的是远离“live”,而使用“on”来提高性能。当一个新页面加载时,该部分所需的一组全新的绑定也需要被加载。html部分有一些父DOM(基本上是Web页面不同内容区域的 Package 器),它们永远不会改变,允许我为将来在页面上创建的所有DOM元素在它们上进行绑定。
就内存和性能的权衡而言,通常哪种方法更好地处理事件绑定?
1.在一个新的部分完成加载其html之后,将该特定页面示例所需的所有事件绑定到DOM元素上,这些DOM元素将在页面更改时被删除。
1.将第一次页面加载时的每个事件绑定到已知始终存在的DOM元素(而不是像live那样绑定到文档)。
1条答案
按热度按时间5f0d552i1#
监听器的内存问题通常可以很容易地处理(不要在闭包中保存大块数据,不要创建循环引用,使用委托等)。
“Live”只是使用了委托(据我所知)--你可以很简单地实现委托,而不用使用简单的标准,例如class或id,监听器在不变的父元素上。委托是一个很好的策略,它取代了许多其他的监听器,内容经常被改变,识别应该调用函数的元素很简单。
如果您遵循的策略是在每次内容更改时附加大量新的侦听器,那么您还必须在替换旧侦听器时分离旧侦听器,以降低内存泄漏的可能性。性能(在DOM更新过程中附加和删除侦听器所花费的时间)通常不是什么大问题,除非您要执行数百个侦听器。
通过委托,父元素监听事件,检查www.example.com是否event.target/srcElement是它关心的事件,然后调用适当的函数,可能使用 call 设置 this 的值(如果需要)。
请注意,您也可以在插入的HTML中简单地包含内联侦听器,这样您就永远不需要担心内存泄漏、委托或添加和删除侦听器。使用简单函数调用的内联侦听器并不比添加任何其他属性(class、id等)复杂,并且不需要在客户端上进行额外的编程。我认为内联侦听器从来都不是内存泄漏的问题。
当然,“不引人注目的javascript”暴民会嚎叫,但他们是非常实用的,功能和健壮的,更不用说支持的每一个浏览器曾经支持javascript。