2

我知道我们应该避免使用 CSS 后代选择器，但我只是想知道这两个中哪一个更有效，为什么？

#myDiv .childDiv .grandchildAnchor span

或者

#myDiv > .childDiv > .grandchildAnchor > span

您可以假设两者都对我的标记有效。我应该如何测试这种事情。是否有一个在线平台，我可以在其中编写我的代码的两个版本，它会在效率方面为我获取结果。

编辑：我想学习这些东西。

  • 给定两个 CSS 选择器，我怎么知道它们中的哪个工作得更快。只为求知。
  • 可以测试两个选择器渲染的在线平台。
4

4 回答 4

4

如果您正在规划您的 CSS 选择器，哪些选择器更有效，那么您将注意力集中在错误的问题上。

不要一分钱一分货，一分钱一分货。

以任何有意义的方式减慢浏览器的速度需要绝对大量的 HTML 和 CSS，因此与其关注哪个选择器更有效，不如关注哪个选择器合适。您可以通过压缩图像、缩小 CSS 和 JS 或简单地从页面中删除单个图像来节省更多性能。

在您的示例中，两个选择器都不合适，也没有效率。除非您有充分的理由嵌套选择，否则您的 CSS 应优化为：

//specificity 0-0-1-0
.some-span-type {
    ...
}

您可能需要检查跨度是否在特定类型的容器中，在这种情况下您可能需要使用：

//specificity 0-0-2-0
.some-container .some-span-type {
    ...
}

您也可能需要检查跨度是否在唯一容器内，在这种情况下您可能需要使用：

//specificity 0-1-1-0
#some-container .some-span-type {
    ...
}

问题是，一旦您开始使用两个或三个选择器添加更多样式，您会很快发现您需要三个或四个或五个选择器来设置后续元素的样式以正确覆盖现有样式。

于 2013-04-13T06:02:00.093 回答
2

有性能测试器
https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger
使用示例
http://www.html5rocks.com/en/tutorials/speed/css-paint-times/

于 2013-04-13T05:50:04.647 回答
1

根据 Mozilla 的说法，有一个明确的答案：避免使用后代选择器

后代选择器是 CSS 中最昂贵的选择器。它非常昂贵，尤其是如果选择器在标签或通用类别中。

通常，真正需要的是子选择器。例如，性能太差了，以至于 Firefox 的用户界面 CSS 中禁止了后代选择器，没有具体的理由。在您的网页上做同样的事情是个好主意

坏
树头树行树细胞{…}

更好，但仍然很糟糕（参见下一个指南）
treehead > treerow > treecell {…}

您可以在以下位置找到上述引用和更多信息： https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

于 2014-09-19T17:33:11.303 回答
0

只需使用ids. 然后你可以在自动化测试中受益，请参阅 QTP

于 2013-04-13T06:09:51.160 回答