CUF_meeting_knowledge_share

CUF_meeting_knowledge_share copied to clipboard

书写高效的CSS

浏览器样式匹配规则

• 关键选择器
• 从右往左

关键选择器

选择器的最后面的部分即为关键选择器(即用来匹配目标元素的那部分,而不是该元素的父辈元素)

 #header, a img, h1 + [title] {
    ... ...
 }
 //关键选择器分别为 #header, img, [title]

拆分样式

为了提高样式匹配效率,浏览器根据关键选择器将样式拆分为四种类型,放置到4张不同的哈希表里:

• ID规则
• Class规则
• 标签规则
• 通用规则(不符合上面的都是)

ID规则

这一类别包含了那些将 ID 选择器作为关键选择器的规则

button#backButton {…} /* This is an ID-categorized rule */
#urlBar[type="search"] {…} /* This is an ID-categorized rule */
table > tr > td#myCell:active {…} /*This is an ID-categorized rule*/

Class规则

如果一个规则将一个 class 作为它的关键选择器,那么它就属于该类别.

button.settingButton {…} /* A class-based rule */
.fancyText {…}    /* A class-based rule */
ul > .menu-left[checked="true"] {…} /* A class-based rule */                 

标签规则

如果既没有 class 也没有 ID 来作为关键选择器，那么接下来的候选者就是 标签 类别.如果一条规则将一个标签作为它的关键选择器,那么这条规则就属于该类别.

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

通用规则

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

   [hidden="true"] {…} /* A universal rule */
   * {…} /* A universal rule */
   ul > [title="hehe"] {…} /* A universal rule */

从右向左

浏览器读取你的选择器, 遵循的原则是从选择器的右边到左边读取. 先从关键选择器开始匹配规则, 然后左移, 匹配祖先, 成功, 持续左移, 直到和规则匹配, 或者是因为不匹配而放弃。 所以,对于一个给定的元素, 需要匹配的规则越少, 样式的解析就会越快.

高效CSS指南

• 避免通用规则
• 不要用标签名或 classes 来限制 ID 规则
• 不要用标签名限制 class 规则
• 尽量使用最具体的类别
• 避免后代选择器
• 属于标签类别的规则永远不要包含子选择器
• 在使用子选择器的地方想想为什么
• 依赖继承

如何测试 ?

Chrome30(不包含30)以下的版本包含有CSS selector profile可以对选择器进行性能测试

CSS样式分析

analyze-css

参考资料:

书写高效的CSS

you can get PPT from 书写高效的CSS

史上最全浏览器 Hack: http://browserhacks.com/