jQuery是现存最流行的（如果不是最多的）JavaScript库之一，并且大量的人使用它来做一些令人惊叹的事情。就个人而言，jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白，使用大量CPU周期的所有功能。就像jQuery工程师试图优化jQuery一样，他们的速度总是有限的。作为jQuery的用户，您可以采取一些措施来加快jQuery代码的速度。

1 - jQuery对象缓存

缓存你的jQuery对象可能是你可以做的最好的事情来削减你的代码，以运行更加精简和更新。如果您在代码中多次使用相同的选择器，或者如果您在循环内或在多次运行的函数中查询DOM，那么您可能会从查询中缓存变量中获益。考虑以下3个例子：

在所有这些情况下，您可以通过将jQuery对象分配给一个变量（通常以美元符号为前缀将其区分为jQuery对象）来保存一些DOM搜索行程，如下所示：

你可以做的最昂贵的操作之一就是查询DOM，特别是在不能使用内置函数进行优化的旧版浏览器中。每次查询DOM时（有一些例外），您必须搜索整个DOM以查找每个匹配元素，这可能需要时间，尤其是在大型文档上。第三个示例实际上使用链接，这与缓存类似，因为您仍然优化到一个DOM搜索，但它不要求将jQuery对象保存到变量。

2 - 选择器优化

DOM查询中使用的CSS选择器有时会在性能上比在缺少缓存搜索结果方面有所不同。首先你必须意识到的是，选择器是从右到左阅读的，所以你总是希望你的最具体的选择器（最显着的是id）尽可能地靠右。然而，很多时候，您正在尝试查找带有ID的元素的子元素，因此您不能在完整选择器中将ID选择器放在最右边。有一种解决方法，通过上下文或使用find或children：

以下选择器从最快到最慢排列。总是尝试让速度更快的选择器进一步向右或上下文参数中/ find/ children，以尽可能快地进行选择。

$('#id');一个id选择器是最快的选择器。这有两个原因：1）只有一个元素带有id，所以一旦找到它，搜索停止，并且2）浏览器具有内置函数，用于通过它们的id（document.getElementById()）搜索元素，在功能上比手工功能要快得多。

$('tag');仅仅因为所有的浏览器都支持被称为的内置函数，所以用标签名称进行搜索有点快document.getElementsByTagName()。

$('.class');通过类进行搜索可能与通过标签名称进行搜索具有可比性，但是您必须小心，因为IE8及其以下版本不支持本地语言document.getElementsByClassName()。

$('[attribute]');或$('[attribute=value]');or $(':pseudo');没有浏览器目前有一个本地函数可供JavaScript用于使用这些选择器进行搜索，因此jQuery需要自行搜索DOM并检查每个元素以查看它是否与此选择器匹配。有一些现代浏览器具有document.querySelectorAll()可以接受任何选择器的本机功能，但即使通过此功能提高了性能，这些选择器的查找仍然很慢。

3 - 委派事件

第三次也是最后的优化涉及事件。如果您将事件处理程序附加到表的每个单元格，则可能会使用比您真正需要更多的内存，并且需要一点时间将处理程序应用于每个单元。这可能是这样做的：

事件委托允许我们将一个事件处理程序附加到一个父元素 - 节省我们的内存和设置时间 - 只有在事件触发特定的子元素时才会触发。因此，使用上面的示例，我们可以附加一个处理程序，table只要td有人点击某个th元素，就会触发该处理程序，但当用户单击表中的某个元素时，不会触发该处理程序。执行此操作的代码如下所示：

请注意，您实际上希望事件触发的元素的选择器现在是该on函数的第二个参数。很酷的是，它this仍然指的td是被点击的对象，而不是对象table，就像将处理程序直接附加到单元格一样。这还带来了额外的好处，即如果动态地添加更多表格单元格，则不需要向它们添加事件处理程序，因为它们已由父元素覆盖。

结尾

所以有三种方法可以成为更加棒的前端开发程序员。我知道这个话题已经在互联网上被无数次地讨论过了，但是你永远不知道什么时候你会碰到一个没有听说过这些话的人。此外，它永远不会被提醒。所以，请记住缓存，使用快速选择器，并委派你的事件，以获得各地的jQuery编程专业人员的尊重。