101 jquery选择器性能

 

上周，我分析了一个网页，自定义脚本的onLoad事件处理耗时4.8秒。原来，2.8秒花费在请求一个动态菜单库（关于此，另外发博）。剩余2秒花费在了jquery 选择器上。分析显示，大多数的选择器未返回任何对象，那些返回的对象可以通过使用不同的选择器改善。

 

关于jq uery 选择器

 

已有一些关于jquery 选择器及其性能影响的很好的博客文章。如你所见，你可以通过ID、标签名或者类名选择元素。根据不同的选择，jquery 会使用浏览器原生方法查询元素，通过ID、标签或需要手动根据类名遍历DOM（因为IE中没有getElementsByClassName方法）

 

分析我网页中花费的2秒

 

onLoad操作使用 jquery 隐藏、显示和改变页面中某些特定元素的样式表，……。下面是代码片段。

onLoad执行的jquery 脚本示例

onLoad 事件处理中充斥着这些调用。使用免费的dynaTrace AJAX Edition，你可以看到那些处理选择器的单独$调用，以及下列使用选择器处理至少一个对象的方法调用。下列onLoad事件处理的PurePath不 仅向我显示有多少时间花费在那些选择器调用，同时显示有多少选择器实际上根本没找到一个对象。（下列方法调用缺失表明没有找到对象）

不必要的jquery 选择器开用导致大量开销

用 红色标记的是所有没有返回元素的调用，因为没有DOM元素满足选择条件。JS列显示每个独立方法调用的执行时间——每个调用时间从1ms 到>100ms不等。Size列告诉我们每个独立调用发生了多少JavaScript/DOM调用。这里我们也能看出为什么某些$调用花了这么长时 间，因为他们产生很多调用以完成请求。Invocation列告诉我们一个方法被父方法调用的频度。我们可以从这里看出，一些对象实际被处理了多次， 如".pop-cart"。只处理一次然后缓存该对象会更好。

从中学到的第一个教训是，这些调用大多数是不必要的，只是造成大量的开销。如果你知道页面上有哪些元素，你应该只处理哪些对象，不要试图处理其他的。我知道，有些全局的javascript文件操作不同页面的不同内容会导致这样的情形，但是，你真的想与这些开销相伴吗？

 

分析jquery 选择器的差异

 

被分析的页面的首要问题是，产生了太多不必要的$调用。接下来的另一个问题是为什么有些$方法响应很快（几毫秒）而其它方法花费很长时间（高达100ms）。理论答案可在 jquery 最佳实践博客中找到。回到我的页面，它向我显示下列内容：

ID选择器是最快的，使用getElementById

下面的图片使用ID的选择器，它使用getElementById并因此很快返回结果。

jquery ID选择器

标签名选择器，使用getElementByTag

下面的例子使用标签名和类名，jquery 首先使用getEelementsByTagName，这是获取指定标签的所有元素的原生实现。jquery 接着遍历这些条目筛选类名。

使用标签和类名的jquery 选择器

类名选择器需要遍历所有DOM元素

如果你只使用类名选择器 - jquery 需要遍历DOM中的每个元素，因为IE中没有原生的getElementsByClassName方法（Firefox是另一回事）。下面的图片显示一个有3460个DOM元素的选择器开销:

jquery 类名选择器

 

结论

 

依 赖于你网站的规模（DOM元素的数量），你应考虑单独的选择器方法的开销。你可能要考虑替换类名选择器，使用标签名和类名，或者使用单一ID，如果你的页 面中只有屈指可数的对象。再者，确保缓存已处理对象，以避免此后的处理开销。此外——最后但并非微不足道的——避免不必要的调用，正如我分析的页面中看到 的——不发生这些调用，2秒之中超过1.5秒是可以节省的。