13.1.4　优化选择器

jQuery的灵活性意味着我们有很多种方式来达到同样的目标。例如，可以以多种方式选择一个页面元素；例如，可以使用任何CSS选择器，或者使用参见13.3节介绍的DOM Traversal函数来精细化一个jQuery选择。然而，如下的技术将使得你的选择速度更快，并使得JavaScript程序更加高效。

·尽可能地使用ID选择器。选择页面元素的最快的方式，是使用一个ID选择器。在JavaScript刚刚诞生的时候，浏览器就已经提供了一种方法来使用ID选择元素，并且，它仍然是最快的方法。如果你担心性能，那么，你可能想要在计划选取的每一个元素上添加一个ID，而不是依赖于子孙选择器这样的方法。

·先使用ID，作为一个子孙选择器的一部分。只使用ID选择器的问题在于，你只能获取单个的元素。如果需要获取多个元素，例如，一个div中的所有＜a＞标签，或者一个页面上的所有段落，该怎么办呢？如果你的页面是以这样一种方式构造的，即你想要选择的所有元素都位于一个带有ID的元素中，那么，先使用包含这个ID的一个子孙选择器。当所有那些标签都位于一个ID为main的div标签中的时候，就发生了这种情况。使用这种选择器会更快一些：

$（'#main a'）

而不是使用选择器：

$（'a'）

·使用.find（）函数。jQuery包含了一个函数，用来在一个选择中查找元素。它的作用类似于这样的一个子孙选择器，该选择器在其他标签内部查找标签。我们将在参见13.3节更详细地介绍这个函数，但是，总而言之，我们从一个jQuery选择开始，使用.find（），并且将一个选择器传递给它。换句话说，你可以像下面这样编写$（'#main a'）：

$（'#main'）.find（'a'）；

实际上，在某些情况下，使用.find（）而不是子孙选择器要快两倍。

注意：可以在http：//jsperf.com/sawmac-selector-test对.find（）函数进行一次速度测试。

·避免过多的具体化。你可能习惯于使用CSS的具体性规则来创建以页面上的特定元素为目标的CSS样式。像#main.sidebar.note ul.nav li a这样的一条规则就非常具体，但是，当你对其执行jQuery函数的时候，它可能执行得很慢。如果可能的话，使用一个较短且更为精炼的子孙选择器，例如，$（'.sidebar.nav a'）；或者使用前面一点中所提到的.find（）函数：$（'#main'）.find（'.sidebar'）.find（'.nav a'）。

注意：如果你想要了解提高jQuer y的性能的其他方法，查看http：//addyosmani.com/jqprovenperformance/以及http：//jqfundamentals.com/#chapter-9的PPT。要了解关于使用jQuery的众多很好的提示和技巧，访问http：//tutorialzine.com/2011/06/15-powerful-jquery-tips-and-tricks-for-developers/的博客。