101 jquery选择器性能分析

上星期，我分析了一个网页，自定义脚本的onLoad事件处置耗时4.8秒。原来，2.8秒花消在请求一个动态菜单库（至于此，除此而外发博）。剩下二秒花消在了jquery 选择器上。分析展示，大部分的选择器未回到任何对象，那些回来的对象可以透过应用不同的选择器改进。



对于jq uery 选择器



已有一些至于jquery 选择器及其性能影响的良好的博客稿子。如你所见，你可以透过ID、标签字或许类名抉择元素。依据不同的抉择，jquery 会施用浏览器原生步骤查询元素，经过ID、标签或急需手动依据类名遍历DOM（由于IE中没getElementsByClassName步骤）



分析我网页中用费的二秒



onLoad操作施用 jquery 掩藏、展示和改变页面中某些特定元素的式样表，……。下部是代码片断。



onLoad实施的jquery 脚本示范

onLoad 事件处置中充满着这些调用。应用免费的dynaTrace AJAX Edition，你可以看到那些处置选择器的独自$调用，以及下列运用选择器处置最少一个对象的步骤调用。下列onLoad事件处置的PurePath不单向我展示有几多时间花销在那些选择器调用，与此同时展示有几多选择器实质上基本没找到一个对象。（下列步骤调用缺失表明没找出对象）



用不着的jquery 选择器开用以致大量花费

用红色标记的是全部没有回来元素的调用，由于没DOM元素满足抉择条件。JS列展示每个独力步骤调用的执行时间——每个调用时间从一ms 到>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，如若你的页面中唯有屈指可数的对象。再就是，准保缓存已处置对象，以避免从此以后的处置花消。另外——最后但并非不值一提的——避免用不着的调用，正象我分析的页面受看到的——不发生这些调用，二秒之中超过1.5秒是可以俭省的

本文来源：
我的异常网