jquery - 关于 25 个 jquery 技巧的一些问题

Question

我刚刚读到这个: http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

并对一些提倡的技巧有一些疑问:

9 - 为您的选择器提供上下文:

使用上下文和使用更具体的选择器有什么区别？

而不是做

var selectedItem = $('#listItem' + i, $('.myList'));   

怎么样

var selectedItem = $('.myList>#listItem' + i); 

哪一个更快/更好，或者没有区别？

12 - 了解事件委托(delegate):

我想在处理程序计数较低时，事件委托(delegate)比正常绑定(bind)慢。

您应该开始使用事件委托(delegate)时有多少个处理程序？

此外，使用委托(delegate)和在 dom 中创建点击目标(让用户点击该点击目标，然后让点击目标找到来操纵的元素。这种方法更快还是委托(delegate)更快？

编辑:此外，您应该委派多少级别？是把一些东西委托(delegate) 10 个级别更好，还是简单地绑定(bind) 2 个处理程序？

13 - 使用类来存储状态

14 - 更好的是，使用 jQuery 的内部 data() 方法来存储状态:

为什么使用数据而不是类？数据速度更快吗？我认为我通常发现类更容易阅读，这与博客条目中的内容相矛盾，因为我可以在 DOM 中看到它。

谢谢!

Answer 1

9 - Give your selectors a context:

var selectedItem = $('#listItem' + i, $('.myList'));

v/s

var selectedItem = $('#listItem' + i);

根据文章，第一个应该更快。但我不明白这是怎么回事......

首先，通过 ID 访问是获取元素最快的方法之一。这只是从全局 ID-s 哈希表中进行查找。添加上下文不会增加速度。查找上下文应该需要一些额外的时间，因此第一个示例应该会更慢。

我也做了一些测量，发现第一个确实慢了很多倍。

至于这个:

var selectedItem = $('.myList>#listItem' + i);

这应该与第一个速度大致相同。根据我的测量，确实差不多，只是快了一点。

但是，在处理其他类型的选择器时，特别是重用它时，指定上下文可能会很有用，如下所示:

var ctx = selectedItem = $('.myList')
for (var i=0; i<1000; i++) {
    var selectedItem = $('.listItem' + i, ctx);
}

在此示例中，它可以显着提高速度。

与与性能相关的其他所有事情一样 - 您必须先进行衡量，然后才能知道某些内容是否适用于您的特定情况。

How many handlers is the time when you should start using event delegation?

当我感觉页面速度很慢时。 99% 的情况下，普通事件处理程序就足够了。