CSS解析速率表:
不同的 CSS 选择器的组合,解析速度也会受到不同的影响
那么如何编写CSS代码,来提高效率,这里需要注意几点:
1、使用 id selector 非常的高效。在使用 id selector 的时候需要注意一点:因为 id 是唯一的,所以不需要既指定 id 又指定 tagName,虽然这样写也没问题,但是会增加CSS编译与解析时间:
Bad
p#id1 {color:red;}
Good
#id1 {color:red;}
2、避免深层次的 node ,譬如:
Bad
div > div > div > p {color:red;}
Good
p-class{color:red;}
3、慎用 ChildSelector ;
4、不到万不得已,不要使用 attribute selector,如:p[att1=”val1”]。这样的匹配非常慢。更不要这样写:p[id=”id1”]。这样将 id selector 退化成 attribute selector。
Bad
p[id="id1"]{color:red;}
p[class="class1"]{color:red;}
Good
#id1{color:red;}
.class1{color:red;}