jQuery 优化/最佳实践

Question

好吧，给牛仔们准备好马鞍，因为这将是一场漫长的比赛。我花了一个早上的时间检查一些旧代码，我想知道最佳实践和优化。为了避免走上主观路线，我将只发布一些示例，其中一些希望很容易回答问题。我将尽量使示例保持简单，以便于回答并减少出错的可能性。我们开始吧：

1) 赋值与 jQuery 调用

我知道，当访问选择器时，通常认为将选择器分配给变量比多次进行相同的调用更好 - 例如。

$('div#apples').hide();
$('div#apples').show();

vs.

var oranges = $('div#oranges');
oranges.show();
oranges.hide();

引用 jQuery 的 $(this) 时是否适用相同的规则？前任。一个简单的脚本，使表中的某些数据可单击并自定义链接。

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
})

vs.

$('tr td').each( function() {
    var self = $(this);
    var colNum = self.index()
    var rowNum = self.parent().index()
    self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
});

2) this vs $(this)

好吧，下一个是我想了很长时间的东西，但我似乎找不到任何信息在它上面。请原谅我的无知。什么时候调用普通 js this 而不是 jQuery 包装的 $(this) 才有意义？据我理解 -

$('button').click(function() {
  alert('Button clicked: ' + $(this).attr('id'));
});

效率比访问普通 this 对象的 DOM 属性，如下所示 -

$('button').click(function() {
  alert('Button clicked: ' + this.id);
});

我明白那里发生了什么，我只是想知道在决定使用哪个时是否有经验法则可以遵循。

3）特异性越高越好吗？

这个非常简单，对我们的选择器更加具体总是有益的吗？很容易看出 $('.rowStripeClass') 会比 $('#tableDiv.rowStripeClass') 慢得多，但是我们在哪里划清界限呢？ $('body div#tableDiv table tbody tr.rowStripeClass') 还更快吗？任何意见将不胜感激！

如果您已经看到这里，感谢您的阅读！如果你还没有，:p

Answer 1

我将尝试尽可能简洁地回答这些问题：

1. 在经常使用时缓存它，尤其是在循环情况下，运行相同代码来获取< em>相同结果对性能来说从来都不是一件好事，缓存它。

2. 当你只需要一个 DOM 元素时使用 this ，当你需要 $(this) rel="noreferrer">jQuery 方法（否则不可用），您的 this.id 与 $(this).attr("id" 示例) 很完美，一些更常见的例子：

   • 使用 this.checked 而不是 $(this).is(':checked')
   • 使用 $.data(this, 'thing') 代替 $(this).data('thing')
   • 创建 jQuery 对象基本上没有用的任何其他情况。

3. 为了性能，从 ID 选择器降序是首选...您需要具体到什么程度？简而言之，这完全取决于：按照您需要的具体程度。

Answer 2

1) 赋值与 jQuery 调用

引用 jQuery 的 $(this) 时是否应用相同的规则？

是的，绝对是。对 $ 函数的调用会创建一个新的 jQuery 对象，并随之产生相关的开销。使用同一选择器多次调用 $ 每次都会创建一个新对象。

2) this 与 $(this)

我想说知道差异很重要，因为有时不使用 jQuery 包装对象变得至关重要。在大多数情况下，您不想进行过早的优化，只是为了保持一致，始终用 $(this) 包装它们，并且最好将其缓存在变量中。但是，考虑一下包含一百万个

元素的无序列表

的极端示例：

$("#someList  li").each(function() {
    var id = $(this).attr('id');
});

将创建一百万个新对象，这将导致显着的损失。性能损失，而您根本可以在不创建任何新对象的情况下完成。对于在所有浏览器中一致的属性和属性，您可以直接访问它们，而无需将其包装在 jQuery 中。但是，如果这样做，请尝试将其限制在处理大量元素的情况下。

3）特异性越高越好吗？

并非总是如此。它主要取决于浏览器，并且再次不值得深入研究微优化，除非您确定应用程序中某些东西运行得相当慢。例如：

$("#someElement") vs $("#someElement", "#elementsContainer")

由于我们在通过 id 搜索元素时还提供了上下文，因此第二个查询可能会更快，但事实恰恰相反。第一个查询会转换为对本机 getElementById(..) 的直接调用，而第二个查询则不会，因为上下文选择器。

此外，某些浏览器可能会提供一个接口来使用 getElementsByClassName 按类名访问元素，并且 jQuery 可能会在这些浏览器中使用它以获得更快的结果，在这种情况下提供更具体的选择器，例如：

$("#someElement.theClass")

实际上可能比简单地写成一个障碍：

$(".theClass")

Answer 3

该博客不太过时，但它为您的问题提供了一些答案，并提供了有关使用 jquery 时加快网站速度的更多信息： http://www.artzstudio.com/2009/04/jquery-performance-rules/

我最喜欢的之一是第六条，它指出限制DOM 操作。在 for 循环中执行 .append 总是一件坏事，因为每次追加到 DOM 时，这是一项昂贵的操作。

Answer 4

根据您的问题：

1. 缓存 jQuery 对象应该会产生最佳性能。它将避免 DOM 查找，这种查找在执行多次时会变慢。您可以从 jQuery 链接中受益 - 有时不需要局部变量。
2. 当 this 是 DOM 元素时，$(this) 也是如此。尽管这是获取 jQuery 对象最快的方法，但它仍然比缓存慢。如果普通 DOM 元素就足够了 - 那么根本就不要调用 jQuery。带有 id 属性的示例非常出色 - 如果您不需要 $(this) ，则更喜欢 this.id 而不是 $(this).attr('id)
3. 更具体的选择器确实会减少 DOM 查找时间。然而，确实有一条线需要划定——只有当您 100% 确定这会显着提高性能时，才使选择器更加具体。

Answer 5

您应该关注的唯一情况是循环和事件。因为您在其中之一中所做的每个操作都将在每次迭代或每个事件中完成。

1. 赋值与 jQuery 调用

   你的例子不是最好的。您应该保存对 jQuery 对象引用的位置是循环或事件中使用的对象，或者是复杂查询的结果。

2. 这个 vs $(this)

   同样，在性能关键情况下，原始 dom 更好。 其他除此之外，您应该选择更短或更可读。令人惊讶的是，令人惊讶的是，它并不总是 jQuery。

3. 越具体就越好吗？

   还有更多类型的特异性，通常会被人们混淆。其中一个是无用，例如：id选择器tag#id的标签名称，它会比简单的id慢。但还有另一种类型，具体而言，它会带来巨大的好处。
   现在这种类型取决于浏览器，因为现代的浏览器会牺牲旧的浏览器，但这是值得的权衡当您为 class 指定 tag 时，就会发生这种情况标签.class。在 IE 6-7 中，它将比简单的 .class 快得多，因为 sizzle 可以利用快速的 document.getElementsByTagName 函数。现在另一种类型是当您指定太多祖先时。这会在每个浏览器中减慢速度。这是因为选择器是从右向左执行的。要记住的规则：始终尽可能具体地选择最右边的选择器。

Answer 6

2013 年关于最佳 jQuery 实践的博客文章

更新了您问题的答案，甚至更多关于当今应用的最佳 jQuery 实践的信息，这篇文章正在处理非常有帮助并且您可能想要的有趣主题阅读。

它涉及这里提出的主题，甚至更多：动画函数、jQuery 承诺、导入 jQuery 的最佳方法、jQuery 事件等。
希望对您有所帮助！