Question

我已经着手开始正确使用jQuery和JavaScript。我很伤心地说，历史上我已经下降到类开发者，使很多的jQuery真正可怕的错误（污染全局命名空间，不缓存jQuery选择，以及更多有趣的东西 - 其中一些我敢肯定我还没发现。）

事实上，jQuery允许人们轻松实现一些非常强大的功能。但是，因为一切“正常”，性能问题和最佳实践立即占据了一席之地。

我一直在阅读关于JavaScript和jQuery性能和最佳实践的文章，我已经学到了足够的知识，可以完全意识到我真正缺乏经验。我感到沮丧，因为我不确定何时应该使用jQuery或只是简单的JavaScript。 jQuery对我很有吸引力的主要原因是它负责浏览器的兼容性。根据我的理解，你可以用jQuery做些事情，你也可以使用不受兼容性问题影响的常规JavaScript。基本上我正在寻找一个指南，解释当使用jQuery而不是常规JavaScript时是明智的。

回顾几个问题：

由于性能的原因，你不应该使用jQuery的部分吗？

您应该始终使用jQuery的哪些部分来避免浏览器不一致？

你不应该使用jQuery的哪些部分，因为有一种可靠而快捷的方法可以在JavaScript中本地执行相同的操作？

jQuery的哪些部分提供了多种方法来做同样的事情，一种方式更有效？例如，:not()选择器与.not()方法。

我正在寻找现有文章，博客文章，书籍，视频等。我知道文档的位置。我经常读它们。我希望有更多关于上述问题的概述。

谢谢！

修改

查看这个非常相似的问题：When to use Vanilla JavaScript vs. jQuery?

Answer 1

哇，我简直无法相信没有人提到将对象存储在变量中以备将来使用。

考虑这种情况。
你有一个复杂的菜单，你要写100行jQuery for。

非常我看到类似

的内容

$(".menu").fadeIn("slow");
$(".menu li").each(bla bla);
$(".menu li").hover(more bla bla);
if($(".menu").attr('id') == 'menu1') {some hoo ha}

如果您要在jQuery中重用元素，始终将其存储在变量中。在变量名称前添加美元符号（$）以指示jQuery对象也是常见的做法。

var $menu = $(".menu"); // store once and reuse a million times
var $menu_item = $("li", $menu); // same here

$menu.fadeIn("slow");
$menu_item.each(bla bla);
$menu_item.hover(more bla bla);
if($menu.attr('id') == 'menu1') {some hoo ha}

Answer 2

我肯定会说

使用事件模型，因为它抽象了浏览器之间的差异，也提供了一种提升自己的自定义事件的方法。
不要成功使用.each()或$.each()。有时它可以帮助它，因为它引入了一个闭包，但通常一个简单的循环就足够了。
了解复杂选择器字符串或一组链接函数调用是否会更快的唯一方法是对所有方法进行基准测试。
在将同一个事件处理程序绑定到三个以上的元素时使用事件委托（我会看看我是否可以挖掘超过三个元素的资源，我似乎记得一篇基于直接绑定与委托的基准测试的文章关于一些不同的因素，发现超过三个是神奇的数字）。
最重要的是，除非出现问题，否则不要担心性能问题。相比300毫秒200ms，谁知道差异？ 200ms与1000ms相比，也许是时候考虑优化：）
尽可能与您的选择器一致，并帮助那些可怜的旧版本的IE出来。

Answer 3

您的几个问题都集中在表现上。

通常，jQuery不可能比底层本机Javascript更好地执行。 jQuery不直接与浏览器或操作系统交互;它只是提供了内置Javascript函数的包装器。因此，在绝对最小调用jQuery函数会产生额外函数调用的开销。

在许多情况下，当手写“纯粹的”Javascript可能能够避免这种工作时，jQuery确实做了相当多的繁重工作以产生结果。

框架的目的是让程序员的生活变得更轻松，而历史上所有使程序员的生活更轻松的成本表现。手写机器语言几乎普遍比有史以来最好的编译代码更有效。

因此，对性能问题的最佳答案是：不要担心。如果您遇到性能问题，那么会将 jQuery视为优化的一个可能目标。

就浏览器不一致而言，框架的主要目的之一是完全避免它们。历史上存在一些错误，其中某些功能在一个浏览器或另一个浏览器中不起作用，但这些是特定于该库的特定版本的错误。因此完全避免它们并不是一个正确的解决方案。并且试图在这里识别它们（而不是jQuery自己的错误报告）会使这个讨论几乎立即过时。

Answer 4

如今，使用javascript的主要经验法则是它具有快速执行时间（在非现代浏览器上），但是dom访问/操作是疯狂的。 JS运行时越快，DOM就越成为瓶颈。

作为一项规则，在成为问题之前，您不应该过分担心性能，因为大多数代码都不需要很快，并且在测试之前通常不知道问题出在哪里。话虽如此，尽量尽量减少dom的互动。

作为旁注，惯用的jquery正在以正确的方式使用javascript。喜欢通过OOP编写函数，使用闭包进行封装，不要在你的html中混合javascript处理程序（或天堂禁止，脚本块），并将对象视为属性包，你可以随意附加或分离。

Answer 5

我不是专家，但我学到了很多东西。

不要滥用HTML属性，这意味着不要将您想要的翻转图像存储在rel / rev中，而是使用背景图像。这也有助于IE中滚动的性能，因为IE在运行时更改src属性时不喜欢它。

同样hover-intent非常有用，而不仅仅是使用.hover：）

Answer 6

我的两分钱：不要低估jQuery团队的力量（Resig an Co。）---他们的意图是而不是让你很容易进入性能陷阱。话虽如此，这里有一个：当你使用选择器（jQuery中的查询）时，确保使用[context]。

所以假设你有一个table有243行---而且你没有用tr标记每个id（因为你很酷）。因此，您可以点击事件中的button。 button的事件需要在当前行中搜索select小部件。 click()事件的内部可能包含以下行：

var tr = $(this).closest('tr'); //where $(this) is your button
$('td select', tr).css('color', 'red');

因此，最后一行在表行（select）的上下文中搜索tr个元素。此搜索意味着比搜索整个表格（或整个页面）更快id或类似的东西。

这里还暗示的是，我信任jQuery团队，他们对jQuery.closest()方法的实现快速而有效。到目前为止，我没有理由不相信。

jQuery - 好的部分？

6 个答案: