8

好的，所以在另一个问题中正在讨论一些事情，并且提到了这个链接：

https://developer.mozilla.org/en/Writing_Efficient_CSS

在那篇文章中，他们说了一些我不知道的事情，但在我问他们之前，我应该问这个……这适用于 Firefox 解释的 CSS 吗？原谅我的菜鸟，但我不确定 Mozilla UI 是什么意思。（不要伤害我！）

如果它确实适用，当他们说：

避免后代选择器！

后代选择器是 CSS 中最昂贵的选择器。这是非常昂贵的，特别是如果使用选择器的规则在标签或通用类别中。通常真正需要的是子选择器。未经皮肤模块所有者的明确批准，在 UI CSS 中禁止使用后代选择器。

* BAD - treehead treerow treecell { }
* BETTER, BUT STILL BAD (see next guideline) - treehead > treerow > treecell { }

后代选择器只是一个空格？那么孩子和后代之间有什么区别？Child 是另一个元素中的一个元素，但这与后代不一样吗？在我写的时候，我想我可能已经弄清楚了。后代可能是孩子/孙子/曾孙/等？而孩子只有一深？

再次为我的问题的愚蠢程度感到抱歉……只是想知道，因为我一直在我的网站的 CSS 中使用后代。但是，是的，如果这与 Firefox 无关，那么整个问题都是毫无意义的......

如果不是关于 Firefox，是否有人有文章链接到解释 Firefox 或浏览器的效率的文章？

4

8 回答 8

7

后代可能是孩子/孙子/曾孙/等？而孩子只有一深？

对，就是这样。由于孩子只能是一个深度，因此渲染引擎必须递归搜索以检查规则是否匹配的空间要小得多。

是的，那篇文章总体上是关于 Firefox 和浏览器的。大多数（全部？）其中的内容适用于任何页面渲染引擎。

于 2009-08-14T18:01:55.770 回答
6

首先 - 本文中的建议不适用于 html 页面- 它们专门针对Mozilla UI - XUL，因此它可能是 XUL 的最佳实践，但不适用于 html。

在一个普通的 HTML 页面上应用 CSS 是加载页面时最快的事情之一。
此外，该文章可能会建议应用 css 规则的最快方法，但代价是什么？例如，他们建议每条规则不要超过一个类：

不好 - .treecell.indented { }
好 - .treecell-indented { }

这简直太离谱了。它可能会导致更快的 CSS，但谁在乎呢？假设您已经拥有.treecell并且.indented遵循这些建议会导致复杂的逻辑、更难的维护、重复的 css规则、更难的 JavaScript（这比 CSS 花费更多）等。
他们建议不要使用 CSS 选择器的全部丰富性并将这些选择器替换为平班，这是一种耻辱。

于 2009-08-14T18:33:54.240 回答
2

...在我写的时候，我想我可能已经弄清楚了。后代可能是孩子/孙子/曾孙/等？而孩子只有一深？

的确。

我可以在效率方面添加的一件事是：除非您真的认真，否则不要使用 *。随着规则的发展，它非常密集，大多数人只需指定他们真正想要定位的元素就可以逃脱。

于 2009-08-14T18:09:03.603 回答
1

O'Reillys “ Even Faster Web Sites”有一个完整的章节，题为“Simplifying CSS Selectors”。它引用了您在 Mozilla 上的链接。

我认为有两点值得牢记。

  1. 是的，如果你尽可能地这样做，你的 HTML 和 CSS 将会是一团乱糟糟的样式，而且由于文件大小的增加，效率可能会更低。由开发人员选择最佳平衡点。在编写时不要为优化每一行而苦恼，让它工作，然后看看有什么好处。

  2. 正如另一位评论者指出的那样，浏览器需要几毫秒才能弄清楚如何在页面加载时应用您的样式。然而，这可能产生更大影响的地方是 DHTML。每次更改 DOM 时，浏览器都会将整个样式表重新应用到页面。在这种情况下，许多低效的选择器可能会对您的页面产生明显的影响（感知滞后/无响应）。

于 2009-08-14T20:53:00.463 回答
1

子选择器的问题在于它没有得到很好的支持。当然，这可能已在较新的 IE 浏览器上得到修复。

无论如何，在为网页编写 CSS 时，这并不是什么大不了的事。我怀疑您在页面加载中节省的几分之一秒甚至会被注意到。这篇文章似乎更针对为实际浏览器而不是网站编写内容的人。

于 2009-08-14T18:18:12.820 回答
1

“父>子”仅下降一级，而“祖先后代”可能下降一级或多级。

更好的是尽可能使用“#id”标签，这样可以减少 DOM 搜索。

于 2009-08-14T18:02:33.443 回答
1

UI CSS 用于设置浏览器内部的样式 - 设置对话框、扩展界面等。

后代和孩子是不同的，孩子更加具体，因此需要考虑的事情要少得多。

于 2009-08-14T18:02:47.873 回答
1

Google 的 Page Speed（一个 Firefox/Firebug 插件）的文档包括一个关于高效 CSS 的好页面。

于 2009-11-13T05:02:12.410 回答