根据浏览器CSS渲染原理写出高性能的CSS代码

注意：CSS 引擎查找样式表，对每条规则都按从右到左的顺序去匹配。

例子

示例1

1
#nav li {}

CSS选择符是从右到左进行匹配的，浏览器必须遍历页面上每个li元素并确定其父元素的id是否为nav。

示例2

1
*{}

这种效率是差到极点的做法，因为 * 通配符将匹配所有元素，所以浏览器必须去遍历每一个元素，这样的计算次数可能是上万次

示例3

1
ul#nav{} ul.nav{}

在页面中一个指定的ID只能对应一个元素，所以没有必要添加额外的限定符，而且这会使它更低效。同时也不要用具体的标签限定类选择符，而是要根据实际的情况对类名进行扩展。例如把 ul.nav 改成 .main_nav 更好。

优化方案

  1. 避免使用通配规则。如 *{} 计算次数惊人！只对需要用到的元素进行选择

  2. 尽量少的去对标签进行选择，而是用 class。如： #nav li{} ,可以为 li 加上 nav_item 的类名，如下选择 .nav_item{}

  3. 不要去用标签限定ID或者类选择符。如：ul#nav ,应该简化为 #nav

  4. 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

  5. 考虑继承。了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则