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：如何解释结果

1 个答案: