CSS对Web页面载入效率的影响分析总结_经验交流

我们罗列了十几条相关的知识与注意点，大家可以系统的探讨一下，让我们编写的Web页面打开更加流畅。
　　请不要告诉我，你看不懂E文，只是你不愿意看！！！

1、样式系统如何分解规则
样式系统将规则分为四个主要类别。 理解这些类别至关重要，因为就规则匹配而言，它们是第一道防线。 我在接下来的段落中使用术语“键选择器”。 键选择器被定义为最右边出现的 id 选择器、类选择器或标签选择器。 

1.1、ID 规则
第一类由那些以 ID 选择器作为键选择器的规则组成。 

button#backButton { } /* 这是一条 ID 分类规则*/
#urlBar[type="autocomplete"] { } /* 这是一条 ID 分类规则*/
树项目> 树排> treecell#myCell:active{}/*这是一个 ID 分类的规则*/
1.2、类规则
如果一个规则指定了一个类作为它的键选择器，那么它就属于这个类别。 

button.toolbarButton { } /* 基于类的规则 */
.fancyText { } /* 基于类的规则 */
menuitem > .menu-left[checked="true"] { } /* 基于类的规则 */
1.3、标签规则

td { } /* 基于标签的规则 */
treeitem > treerow { } /* 基于标签的规则 */
input[type="checkbox"] { } /* 基于标签的规则 */
1.4、通用规则 
所有其他规则都属于此范围类别。 


:table { } /* 通用规则 */
[hidden="true"] { } /* 通用规则 */
* { } /* 通用规则*/
树>; [collapsed="true"] { } /* 通用规则 */
2、样式系统如何匹配规则
样式系统通过从最右边的选择器开始并通过规则的选择器向左移动来匹配规则。 只要您的小子树继续签出，样式系统就会继续向左移动，直到它匹配规则或由于不匹配而退出。 
你的第一道防线是根据键选择器的类型进行的规则过滤。 此分类的目的是过滤掉规则，以便您甚至不必浪费时间尝试匹配它们。 这是大幅提高性能的关键。 您甚至需要检查给定元素的规则越少，样式解析速度就越快。 举例来说，如果您的元素有 ID，则只会检查与您的元素 ID 匹配的 ID 规则。 只会检查在您的元素上找到的类的类规则。 只会检查与您的标签匹配的标签规则。 通用规则将始终受到检查。 

3、高效 CSS 指南
确保规则不会出现在通用类别中！

3.2、不要使用标签名称或类来限定 ID 分类规则
如果您有一个以 ID 选择器作为其键选择器的样式规则，则不必费心将标签名称添加到规则。 ID 是唯一的，因此您无缘无故地减慢了匹配速度。 

复制代码代码如下：

BAD - button#backButton { }  
BAD - .menu-left#newMenuIcon { }  
GOOD - #backButton { }  
GOOD - #newMenuIcon { }  

3.3、不符合类别分类带有标签名称的规则
与上面的规则类似，我们所有的类都将是唯一的。 您应该使用的约定是在类名称中包含标签名称。 

复制代码代码如下：

BAD - treecell.indented { }  
好 - .treecell 缩进 { }  

3.4、尝试将规则放入最具体的类别中！ 
我们系统速度缓慢的最大原因是我们的标签类别中有太多规则。 通过向我们的元素添加类，我们可以进一步将这些规则细分为类类别，然后我们不再浪费时间尝试为给定标签匹配尽可能多的规则。 


不好 - Treeitem[mailfolder="true"]> 树行> treecell { } 
好 - .treecell-mailfolder { } 

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

不好 - Treehead Treerow Treecell { } 
更好，但仍然不好（请参阅下一个指南）- Treehead > 树行> treecell { } 
3.6、标签分类规则不应包含子选择器！ 
避免将子选择器与标签分类规则一起使用。 对于该元素的所有出现，您将大大增加匹配时间（特别是如果规则很可能更频繁地匹配）。 


坏 - 树头> 树行> treecell { } 
BEST - .treecell-header { } 

3.7、质疑子选择器的所有用法！ 
使用子选择器时要小心。 如果您能想出一种方法来避免必须使用它，那就这样做。 特别是，子选择器经常与 RDF 树和菜单一起使用，如下所示。 


坏 - Treeitem[IsImapServer="true"]> 树行> .tree-folderpane-icon { } 
​请记住，RDF 中的属性可以在模板中复制！ 利用这一事实，在希望根据该属性进行更改的子 XUL 元素上复制 RDF 属性。 


好 - .tree-folderpane-icon[IsImapServer="true"] { } 

3.8、靠继承！ 
了解哪些属性可以继承，并允许它们继承！ 我们明确设置了 XUL 小部件，以便您可以在父标签上放置列表样式图像（仅一个示例）或字体规则，并且它将过滤到匿名内容。 您不必浪费时间编写直接与匿名内容对话的规则。 
不好 - #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }  好 - #bookmarkMenuItem { list-style-image: url(blah); } 
在上面的示例中，对匿名内容进行样式设置的愿望（不理解列表样式图像继承）导致了一条属于类类别的规则，而该规则实际上应该最终位于最具体的类别中所有类别中的 ID 类别。 
请记住，尤其是匿名内容，它们都有相同的课程！ 上面的错误规则会导致检查每个菜单的图标以查看它是否包含在书签菜单项中。 这是非常昂贵的（因为有很多菜单）； 除了书签菜单之外，任何菜单都不应该检查这条规则。 

3.9、使用-moz-image-region！ 
将一堆图像放入单个图像文件中并使用 -moz-image-region 选择它们的效果明显优于将每个图像放入其自己的文件中。 
原始文件信息 - 作者：David Hyatt