jQuery优化/最佳实践

Question

好吧马鞍牛仔,因为这将是一个漫长的.我早上花了一些旧的代码,我不知道最佳实践和优化.为了避免乘坐主观道路,我会发布一些例子,希望能够轻松回答问题.我将尽量使示例非常简单,以便于回答并减少出错的可能性.开始了:

1)分配与jQuery调用

我理解,当访问选择器时,通常认为将选择器分配给变量而不是多次进行相同的调用会更好 - 例如.

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

与

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 +'">'); 
})

与

$('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)thisvs$(this)

好的,下一个是我长期以来一直想知道的东西,但我似乎无法找到任何相关信息.请原谅我的无知.什么时候调用vanilla js this而不是jQuery包装是有意义的$(this)？这是我的理解 -

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

效率远低于访问vanilla 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. 在经常使用时缓存它,特别是在循环情况下,运行相同的代码以获得相同的结果对性能来说永远不是好事,缓存它.

2. 使用this时,你只需要一个DOM元素,$(this)当你需要的jQuery方法(这将无法使用其他方式),您的例子this.idVS $(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)这vs $(这个)

我想知道差异很重要,因为有时你不用jQuery包装你的对象变得至关重要.在大多数情况下,您不希望进行过早优化,只是为了保持一致,总是用$(this)包装它们,最好将它缓存在变量中.但是,请考虑<ul>包含一百万个<li>元素的无序列表的这个极端示例:

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

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

3)更具特异性总是更好吗？

不总是.它主要依赖于浏览器,并且再次不值得深入研究微优化,除非您确定某些内容在您的应用程序中运行得相当慢.例如:

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

可能看起来因为我们在通过id搜索元素时也提供了上下文,所以第二个查询会更快,但是相反.第一个查询转换为对本机的直接调用,getElementById(..)而第二个查询由于上下文选择器而不转换.

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

$("#someElement.theClass")

实际上可能是一个障碍,而不仅仅是写作:

$(".theClass")