代码之家 › 专栏 › 技术社区 › HurnsMobile

jQuery优化/最佳实践

sizzle jquery javascript

HurnsMobile · 技术社区 · 15 年前

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) `this` 与 `$(本)`

好的,下一个是我想了很久的东西,但我似乎找不到任何关于它的信息。请原谅我的无知。什么时候叫香草js有意义 这 与jQuery相反 ? 这是我的 understanding 那个-

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

比访问文件的DOM属性效率要低得多对象如下-

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

这一点很简单,对我们的选择者更具体总是有益的吗?很容易看出这一点 $('.rowStripeClass') 会比 $('#tableDiv.rowStripeClass') $('body div#tableDiv table tbody tr.rowStripeClass') 再快一点?任何意见都将不胜感激!

如果你已经走了这么远,谢谢你的关注!如果你没有,:p

6 回复 | 直到 15 年前

Nick Craver 15 年前

我会尽量简明扼要地回答这些问题:

当它经常被使用的时候把它缓存起来, 尤其地 在循环情况下,运行 相同的 结果对性能从来都不是一件好事,缓存它吧。
this 当您只需要一个DOM元素 $(this) the jQuery methods (这是不可能的),你的例子 this.id 与 $(this).attr("id")
- 使用 this.checked 而不是 $(this).is(':checked')
- $.data(this, 'thing') 而不是 $(this).data('thing')
- 创建jQuery对象基本上没有用处的任何其他情况。
从ID选择器中降级是性能的首选…您需要有多具体?简而言之,这完全取决于: 尽可能具体 .

Anurag 15 年前

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")

amurra 15 年前

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

我最喜欢的一个是第六个限制DOM操作的州。在for循环中执行.append总是一件坏事,因为每次都要附加到DOM,这是一个昂贵的操作。

Atanas Korchev 15 年前

根据您的问题:

缓存jQuery对象应该会产生最佳性能。它将避免DOM查找,而DOM查找在执行多次时会变得很慢。您可以从jQuery链接中获益—有时不需要局部变量。
美元(this)也是如此 this 是DOM元素。尽管这是获取jQuery对象的最快方法,但它仍然比缓存慢。如果vanilla DOM元素就足够了,那么就不要调用jQuery。具有id属性的示例非常好-如果您不需要$(this),请选择this.id而不是$(this).attr('id)
更具体的选择器将减少DOM查找时间。然而,确实有一条线要画-使选择器更具体,只有当你100%确定这将提高性能在一个明显的方式。

gblazex 15 年前

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

赋值与jQuery调用

你的例子不是最好的。应该保存对jQuery对象的引用的位置是循环或 复杂查询
又进来了 性能关键型 原始dom 这样更好。其他 更短的 或更多 . 出人意料,出人意料的是,jQuery并不总是这样。
有 更多类型 通常被人们混淆的特殊性。一个 无用的 例如:id选择器的标记名 tag#id ,它将比一个简单的id慢 另一个 当它是一个具体来说。 tag class tag.class . 在IE6-7中,它将比简单的 .class ,因为sizzle可以利用 document.getElementsByTagName 功能。现在 另一个 祖先太多了 . 这将 放慢速度 在每个浏览器中。这是因为选择器是从右向左执行的。要记住的规则: 始终是最右边的选择器,尽可能具体 .

Community Mohan Dere 5 年前

关于您的问题的最新答案,以及关于当今应用的最佳jQuery实践的更多信息, this article

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

jQuery优化/最佳实践

1) 赋值与jQuery调用

2) this 与 $(本)

1) 赋值与jQuery调用

2) 这个vs$(这个)

3) 特异性越强越好吗?

2) `this` 与 `$(本)`