CSS代码编写的性能优化技术综述

CSS规范没有指定浏览器如何实现风格的系统，只是表明他们不得不这么做。鉴于此，不同风格的系统引擎可能会有完全不同的表现和行为，特别是壁虎和WebKit。这两个引擎都是开源项目。实现类似的算法。它们有非常相似的优点和缺点。

第一部分是对一般风格系统如何分类规则的全面讨论，下一部分包括一个指南，它利用先前讨论过的风格系统编写规则。

如何划分风格体系的规则

风格系统将规则分为四大类：

1.id规则
2类规则
三.标签规则
4。一般规则
理解这些分类是至关重要的，因为它们是构建规则匹配块的基础。

我在下面的段落中使用术语键选择器（键选择器），选择器的最后一部分是键选择器（即用于匹配目标元素的部分，而不是元素的祖先元素）。

例如，在下面的规则hellip；

CSS代码将内容复制到剪贴板。
一个img，
p，
标题{ }
hellip；
}

关键选择器是IMG，P，和标题。

编号规则

第一类包含使用ID选择器作为键选择器的规则。

样品
CSS代码将内容复制到剪贴板。
按钮#返回按钮{ hellip这是身份caterized；} / * * /规则
# urlbar {类型=自动完成这是一个身份caterized { hellip；} / * * /规则
项目> treerow >树木细胞#美赛：主动{ hellip这是身份caterized；} / * * /规则

课堂规则

如果规则显式地使用类作为键选择器，则它属于该类别。

样品
CSS代码将内容复制到剪贴板。
button.toolbarbutton { hellip；} / *规则*一类/
。fancytext { hellip；} / *规则*一类/
菜单>。菜单左{检查=真正的{ hellip一类规则；} / * * /

标签规则

如果没有将类或id定义为键选择器，则下一个候选项是标签类别。

样品
CSS代码将内容复制到剪贴板。
TD { hellip；} / * * /基于标签的规则
项目> treerow { hellip；} / * * /基于标签的规则
输入{类型=复选框{ hellip基于标签的规则；} / * * /

一般规则

不属于上述类别的规则属于这一类别。

样品
CSS代码将内容复制到剪贴板。
{隐=真正的{ hellip通用规则；} / * * /
* { hellip通用规则；} / * * /
树> {崩溃=真正的{ hellip通用规则；} / * * /

风格系统如何与规则相匹配

风格系统开始比赛规则从关键选择器，然后左移（查找规则选择任何祖先元素）。只要选择的子树（substree）已检查的方式，系统会继续向左移动直到它匹配规则，或规则是放弃的原因错配。

常规过滤是你需要学习的最基本的概念。分类的意义是过滤掉不相关的规则（这样风格系统就不会浪费时间来匹配它们）。

这是提高性能的关键。对于给定的元素，需要匹配的规则越少，解析样式的速度就越快。

例如，如果一个元素有id，那么只会选择与id相匹配的ID规则。同样，只有在类规则中的类出现在元素上时才检查规则。只有当标签规则匹配时才检查规则。

高效的CSS指南

避免一般规则

请确保规则不以一般类型选择器结束。

不要将ID规则限制在标签名或类中。

如果规则具有id选择器作为其键选择器，则不要将标签名添加到规则中。

差异
CSS代码将内容复制到剪贴板。
按钮#返回按钮{ hellip；}

差异
CSS代码将内容复制到剪贴板。
。菜单左# newmenuicon { hellip；}

好的
CSS代码将内容复制到剪贴板。
#返回按钮{ hellip；}

好的
CSS代码将内容复制到剪贴板。
# newmenuicon { hellip；}

例外：在不同的场景中，最好动态地更改元素的类别以应用不同的样式。
不要用标签名称限制类规则。

前面的部分也适用于此，虽然类可以在同一页上多次使用，但它仍然比签名更为独特。

As usual, you can include the label name in the class name.However, this can be detrimental to flexibility; if the design changes to change the label, the class name must also change.(the best way is to choose a strict semantic name, after all, one of the goals of a separate stylesheet is to be flexible.)

差异
CSS代码将内容复制到剪贴板。
treecell.indented { hellip；}

好的
CSS代码将内容复制到剪贴板。
树木细胞缩进{ hellip；}。

粘贴
CSS代码将内容复制到剪贴板。
层次深{ hellip；}。

尽量使用最具体的分类

减慢速度的罪魁祸首是标签类中的规则太多了。通过向元素添加类，我们可以进一步将这些规则划分到类类别中，从而减少了用于匹配标签的时间。

差异
CSS代码将内容复制到剪贴板。
{ mailfolder =真实项目treerow } > >树木细胞{ hellip；}

好的
CSS代码将内容复制到剪贴板。
树木细胞mailfolder { hellip；}。

避免后代选择器

后代选择器是CSS中能耗最大的选择。这是一个相当高的性能开销mdash；mdash；特别是当选择器在标签或泛型类。

我们通常需要的是一个subselector。例如，当性能很差，Firefox的用户界面将不再理由禁用CSS选择器，你应该在网上，太。

差异
CSS代码将内容复制到剪贴板。
treehead treerow树木细胞{ hellip；}

有点好，但仍然不好（看下一个指南）
CSS代码将内容复制到剪贴板。
treehead > treerow >树木细胞{ hellip；}

标签分类规则不包含subselectors

避免subselectors在标签分类的规则使用。否则，在所有的地方的元素出现，比赛的时间将大大延长（特别是当规则可能匹配）。

差异
CSS代码将内容复制到剪贴板。
treehead > treerow >树木细胞{ hellip；}

好的
CSS代码将内容复制到剪贴板。
树木细胞头{ hellip；}。

想想你为什么使用subselector

使用subselector时要非常谨慎。不可豁免。

特别是，subselectors通常用于RDF树和菜单：

差异
CSS代码将内容复制到剪贴板。
项目{ isimapserver =真正的treerow } > >。树folderpane图标{ hellip；}

记住，模板中的REF特性可以重复！好好利用这个优势。RDF属性使用的subxul元件，使元件可以基于该属性的修改。

OD
CSS代码将内容复制到剪贴板。
。树folderpane图标{ isimapserver =真正的} { hellip；}

依赖遗传

知道哪些属性可以继承，然后允许它们这样做！

例如，XUL组件显式设置，使列表样式图像或字体规则父元素的来源匿名内容。因此，它是没有必要使用规则来浪费时间，直接在匿名内容。

差异
CSS代码将内容复制到剪贴板。
# bookmarkmenuitem >。菜单左{列表样式图像：URL（废话）}

好的
CSS代码将内容复制到剪贴板。
# bookmarkmenuitem {列表样式图像：URL（废话）}

在上面的示例中，为匿名内容应用样式（不使用列表样式映像的继承特性），它将生成类分类中的规则。当这个规则应该结束ID分类——-，在所有类别中，最准确的分类。

记住：所有元素都具有相同的类，尤其是匿名内容！

在上面的例子中，可怜的规则强制每个菜单的图标在包含书签的菜单项中进行测试。因为这里有很多菜单，它将非常昂贵。相反，这是规则；规则限制测试到书签菜单（容器外，而不是单独的项目）。

用张图像区域！

如果你正在开发的代码为Mozilla：将一系列的图像在一个单独的文件，并使用张图像区域的选择，这比选择他们分别在自己的文件。

使用本地样式表

如果你能明确使用样式表作为XBL的来源，这些方式只适用于绑定元素和它的匿名内容。这减少了一般规则和子元素选择器的负面影响，因为他们认为少的元素。

避免特定浏览器的呈现特性，如果没有必要的话

总是有一些特定于浏览器的或实验性的标签和CSS属性。他们发现可以通过前缀的浏览器，如WebKit，-moz，MS，O等。一旦一个标签或属性规范，前缀属性删除。例如，在边界半径标准化，所有的主流浏览器实现的，你必须使用属性，如WebKit边界半径和-moz边界半径。

随时注意前缀和标记的标准化变化和特定渲染的属性，避免任何特定的渲染特性。