CSS代码编写的一些性能优化技巧总结

2020-05-03 10:51:30易采站长站整理

input[type="checkbox"] {…} /* A tag-based rule */  

通用规则

不属于上面那些类别的规则都属于这个类别。

示例

CSS Code复制内容到剪贴板

[hidden="true"] {…} /* A universal rule */     
* {…}  /* A universal rule */  
tree > [collapsed="true"] {…} /* A universal rule */  

样式系统如何匹配规则

样式系统从关键选择器开始匹配规则,然后左移(查找规则选择器的任何祖先元素)。只要选择器的子树(substree)一直在检查,样式系统就会持续左移,直到和规则匹配,或者是因为不匹配而放弃该条规则。

规则过滤是你需要学习的最基础的概念。分类存在的意义就是过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。

这就是能够极大提高性能的关键。对于一个给定的元素,需要匹配的规则越少,样式的解析就会越快。

举个例子,如果一个元素拥有一个 ID,那么只有匹配该 ID 的 ID 规则才会被选中。同理,只有当 Class 规则中的 class 出现在元素上时该规则才被检查。只有当标签规则的标签匹配时该规则才被检查。通用规则始终都会检查。

高效 CSS 指南

避免通用规则

请确保规则不以通用类型选择器作为结束!

不要用标签名或 classes 来限定 ID 规则

如果规则拥有 ID 选择器作为其关键选择器,则不要为规则增加标签名。因为 ID 是唯一的,增加标签只会没必要地减缓匹配过程。

CSS Code复制内容到剪贴板

button#backButton {…}  

CSS Code复制内容到剪贴板

.menu-left#newMenuIcon {…}  

CSS Code复制内容到剪贴板

#backButton {…}  

CSS Code复制内容到剪贴板

#newMenuIcon {…}  

例外:在不同的场景下,要动态改变元素的class,从而应用不同的样式,这是可取的。但是这个相同的class是与其他元素所共享的。
不要用标签名限定 class 规则

前面那节内容在这里同样适用。虽然在同一页面能够多次使用 class,但它仍然比标签名更独特。

按照惯例,你可以将标签名包含在 class 名里。但是,这会有损灵活性;如果设计更改以至于要变更标签,这条class 名也必须跟着变动。(最好的办法是选择严格语义化的名字,毕竟分离样式表的一个目标就是为了灵活性。)

CSS Code复制内容到剪贴板

treecell.indented {…}