直播(“点击")和效果 [英] live('click') and performance

问题描述

我有一个网格，并且有一列包含<a>锚标记以及<data-..>标记中的一些其他信息，并且具有类名<class='myspeciallink'>.然后在不引人注目的JS脚本中，选择具有该类名称的所有元素并应用live('click').我需要将其设为live()，因为网格是在运行时生成的.

I have a grid and there is a column which contains <a> anchor tag with some additional information in <data-..> tag and has a class name <class='myspeciallink'>. And in my unobtrusive JS script I select all the elements with that class name and apply live('click'). I need that to be live() because the grid gets generated in the runtime.

live('click')处理程序内部会发生什么?我使用了这些其他数据，并根据该数据在页面中添加了<div>.依次用于生成jQuery UI对话框.在我的计算机上效果很好.

What happens inside the live('click') handler? I use that additional data and add a <div> to the page based on that data. Which in its turn used to generate jQuery UI dialog. It works great on my computer.

但是！在现实世界中如何运作?我应该为可能的性能影响而烦恼吗?我觉得即时将live()应用于十几个元素上
会影响性能.尤其是对于像我这样的相当复杂的处理程序，它需要获取数据，解析数据，创建div，应用对话框等.

But! How could that work in real-world? Should I be bothered about possible performance implications? I feel that applying live() on more than a dozen elements instantaneously
would affect the performance. Especially with rather complicated handler like mine - it needs to get the data, parse the data, create a div, apply a dialog and etc.

闻起来像是一个不好的设计吗?您能否建议使用其他方法，否则我的担心没有根据?我可以使用某种探查器工具在我的JavaScript中找到瓶颈吗?

Does that smell like a bad design? Could you suggest a different approach or my concerns are unfounded? Can I use some sort of a profiler tool to find the bottlenecks in my javascript?

UPD :仍然没有人建议任何性能分析工具. firebug和chrome dev工具很好，但是也许还有更好的东西?

UPD: Still nobody suggested any profiling tool. firebug and chrome dev tools are good, but maybe there is something even better?

推荐答案

live("click")实际上要好得多:您不是在单个匹配的元素上绑定事件处理程序，而是在应用单个事件处理程序等待事件冒泡，然后查看触发事件的元素是否与选择器.live匹配.

live("click") is actually better up-front from a performance standpoint: Instead of binding an event handler to each matched element, you're applying a single event handler which waits for events to bubble up and then sees if the element that triggered the event matches the selector .live was called on.

将此与$('selector').click(...)进行比较，在所有元素上循环并绑定一个新的事件处理程序.不管有多少页面元素与其选择器匹配，live('click')都没有额外的开销.根据选择器匹配的元素数，使用.live可以避免在每个页面的初始加载期间最多延迟几秒钟.

Compare this to $('selector').click(...) which does loop over each element and bind a new event handler. live('click') has no additional overhead regardless of how many page elements match its selector. Depending on how many elements your selector matches, using .live can avoid a delay of up to a few seconds during the initial load of each page.

但是，事件处理程序必须检查在其选择器中冒泡的每个事件，以查看是否存在匹配项.这将为每个点击事件增加少量的开销，但是很有可能您的用户不会注意到差异.

However, the event handler must check each event which bubbles up against its selector, to see if there is a match. This is going to add a small amount of overhead to every click event, but chances are very good that your users will not notice the difference.

这篇关于直播(“点击")和效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！