分析 jQuery：如何解释结果答案

【问题标题】：Profiling jQuery: how to interpret the results分析 jQuery：如何解释结果
【发布时间】：2015-04-02 05:30:39
【问题描述】：

我有一个使用 jQuery 的页面，在某些情况下运行速度很慢，我正在尝试使用 Firebug 和 Firequery 对其进行分析。我已经让它运行，使用了页面......当我得到结果时，我看到消耗最多 CPU 时间的函数是：

elementMatcher/<        (jquery-2.1.0.js (línea 2113))
Sizzle</Sizzle.selectors.filter.ATTR/<         (jquery-2.1.0.js (línea 1617))
Sizzle</Sizzle.attr         (jquery-2.1.0.js (línea 1407))
matcherFromGroupMatchers/superMatcher     (jquery-2.1.0.js (línea 2297))

好的。而现在……什么？根据这些数据，我如何知道我的哪些选择器消耗的 CPU 最多？

（我怀疑我现在必须重写一些正在使用属性的选择器，基于 Sizzle</Sizzle.selectors.filter.ATTR/< 的事情，但除此之外，我还能获得更多信息吗？）

【问题讨论】：

花时间的是 jQuery 的选择器引擎。如果没有看到您的代码，我们很难指导您做什么。我想您需要通过缓存或改进逻辑来优化您选择的元素。
我确实有一些$("select[name=blabla]").find(":selected") 形式的选择器，用于在我的页面中选择名称为“blabla”的下拉菜单。我猜对了那些是 jQuery 试图使用 Sizzle</Sizzle.selectors.filter.ATTR 函数找到的那些？那些是最无能的？

标签： javascript jquery profiling firebug

【解决方案1】：

要进一步调查是什么触发了对Sizzle</Sizzle.selectors.filter.ATTR 的调用，您可以右键单击它并从上下文菜单中选择设置断点，然后再次触发之前执行的操作。（在此之前可能需要重新加载页面。）

虽然为了提高上述选择器的速度，但你这样写可能会更快：

$("select[name=blabla] > :selected");

此外，您可以通过将 ID 添加到 <select> 并像这样查询它来提高性能：

$("#blabla > :selected");

使用纯 JavaScript 代替 jQuery 可能更快，你可以这样做：

document.querySelector("#blabla > [selected]");

或者像这样：

var blabla = document.getElementById("blabla");
blabla.options[blabla.selectedIndex];

【讨论】：