jQuery优化/最佳实践
好吧，牛仔马鞍，因为这将是一个长期的。 我一直在花费上午的时间去阅读我的一些旧的代码，而且我还想知道最佳实践和优化。 为了避免乘坐主观的车道，我只会发表一些有希望回答问题的例子。 我会尽量保持这些例子非常简单，以便于答案，并减less错误的可能性。 开始了：
1）分配vs jQuery调用
我明白，当访问select器时，通常认为将select器分配给一个variables比多次调用同一个调用更好 – 例如，
$('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 vs vs $(this)
好的，下一个是我很久以来想知道的东西，但我似乎无法find任何信息。 请原谅我的无知。 什么时候调用香草js this是有道理的，而不是jQuery包装$(this) ？ 我的理解是 –
$('button').click(function() { alert('Button clicked: ' + $(this).attr('id')); });
比起访问this对象的DOM属性效率低得多，就像下面这样 –
$('button').click(function() { alert('Button clicked: ' + this.id); });
我知道那里发生了什么，我只是想知道在决定使用哪一条时是否有一个经验法则。
3）更特异性总是更好？
这个很简单，select器更具体一些，总是有益的吗？ 很容易看出$('.rowStripeClass')会比$('#tableDiv.rowStripeClass')慢很多，但是我们在哪里画线？ $('body div#tableDiv table tbody tr.rowStripeClass')更快吗？ 任何input将不胜感激！
如果你已经做到了这一点，谢谢你看看！ 如果你还没有，：p
我会尽可能简洁地回答这些问题：
-
在经常使用的时候caching它， 特别是在循环的情况下，运行相同的代码以获得相同的结果永远不会是性能的好事，caching它。
-
当你只需要一个DOM元素时使用
this，当你需要jQuery方法的时候使用$(this)，否则你的this.id和$(this).attr("id")例子是完美的，一些更常见的例子：- 使用
this.checked而不是$(this).is(':checked') - 使用
$.data(this, 'thing')而不是$(this).data('thing') - 任何其他情况下，创build一个jQuery对象基本上是没有用的。
- 使用
-
从IDselect器中减less性能是首选…你需要具体如何？ 简而言之，完全取决于你所需要的 。
1）分配vs jQuery调用
当引用jQuery的$（this）时，这个规则是否适用？
是的，一点没错。 对$函数的调用会创build一个新的jQuery对象，并伴随开销。 多次调用$使用相同的select器将每次创build一个新的对象。
2）这vs vs（this）
我会说知道这种差异是非常重要的，因为有时你不用jQuery封装你的对象就变得至关重要。 在大多数情况下，你不想做过早的优化，只是为了保持一致性，总是用$（this）包装它们，最好把它caching在一个variables中。 但是，请考虑这个包含一百万个<li>元素的无序列表<ul>极端示例：
$("#someList li").each(function() { var id = $(this).attr('id'); });
一百万个新的对象将被创build，这将会导致显着的性能损失，当你可以完成而不创build任何新的对象。 对于所有浏览器中一致的属性和属性，您可以直接访问它们，而不用将其包装在jQuery中。 但是，如果这样做，请尝试将其限制在处理大量元素的情况下。
3）更特异性总是更好？
不总是。 它主要取决于浏览器，除非您确定应用程序中的某些内容运行缓慢，否则不值得深入微观优化。 例如：
$("#someElement") vs $("#someElement", "#elementsContainer")
可能看起来，因为我们还通过idsearch一个元素时提供了一个上下文，第二个查询将会更快，但是相反。 第一个查询翻译为直接调用本地getElementById(..)而第二个不是因为上下文select器。
此外，一些浏览器可能会提供一个接口来通过类名称使用getElementsByClassName来访问元素，jQuery可能会使用这些浏览器来获得更快的结果，在这种情况下提供了一个更具体的select器，如：
$("#someElement.theClass")
实际上可能是一个阻碍，而不仅仅是写作：
$(".theClass")
这个博客不是过时的，但它提供了一些问题的答案，以及在使用jQuery时加快您的网站的一些更多的信息： http : //www.artzstudio.com/2009/04/jquery-performance-规则/
我的最爱之一是第6号，其中规定限制DOM操作。 在for循环中执行.append总是一件坏事，因为每次添加到DOM时都是昂贵的操作。
直到你的问题：
- cachingjQuery对象应该产生最好的性能。 它会避免DOM查询，这是多次执行时会变得缓慢的。 您可以从jQuery链接中受益 – 有时候不需要局部variables。
- 当
this是一个DOM元素时，this也是$（this）。 尽pipe这是获取jQuery对象的最快方法，但它仍然比caching慢。 如果香草DOM元素就足够了 – 那么根本就不要调用jQuery。 id属性的例子非常好 – 如果你不需要$（this），那么比这个（。）这个.attr（'id）更喜欢this.id。 - 更具体的select器确实会减lessDOM查找时间。 然而，确实有一条线要被绘制 – 只有当你100％确定这样才能以显着的方式提高性能时，才能使select器更加具体化。
你应该留意的唯一情况是循环和事件 。 因为你在其中之一所做的每一个动作都将在每一次迭代或每一次事件中完成。
-
分配vs jQuery调用
你的例子不是最好的。 你应该保存对jQuery对象的引用的地方是在循环或事件中使用的地方 ，或者是复杂查询的结果。
-
这vs vs（this）
同样在性能危急的情况下， 原始的dom更好。 除此之外 ，你应该select哪个更短或更可读 。 惊喜，惊喜并不总是jQuery。
-
更专一性总是更好？
人们通常会混淆更多types的特殊性。 其中之一是无用的 ，例如：idselect器
tag#id的标签名称，它将比简单的id慢。 但是还有另一种types，具体而言是一个巨大的好处 。 现在这个types依赖于浏览器，因为现代的types会牺牲旧的，但值得进行折衷。当为classtag.class指定tag，会发生这种情况。 在IE 6-7中它将比简单的.class快得多，因为sizzle可以利用快速的document.getElementsByTagName函数。 现在另一种types是指定过多的祖先 。 这会在每个浏览器中放慢速度 。 这是因为select器从右向左执行。 要记住的规则： 始终尽可能具体地select最右边的select器 。
2013年的博客文章关于最好的jQuery实践
更新了关于你的问题的答案，甚至更多关于如今应用的最好的jQuery实践， 这篇文章是处理有趣的主题，真正有用的，你可能想读。
它涉及到这里所讨论的主题，甚至更多：animation函数，jQuery承诺，最好的方式来导入jQuery，jQuery事件等。希望这会对你有所帮助！
