分析 jQuery：如何解释结果

Question

我有一个使用 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/< 重写一些使用属性的选择器，但除此之外，我还能得到更多信息吗？）

Answer 1

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

虽然要提高提到的选择器的速度，但当您这样写时可能会更快：

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

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

$("#blabla > :selected");

使用纯 JavaScript 而不是 jQuery 可能会更快，您可以这样做：

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

或者像这样：

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

分析 jQuery：如何解释结果

Profiling jQuery: how to interpret the results

javascript

jquery

profiling

firebug