yibawuqing 2019-06-26
CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。
作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间。
浏览器读取选择器,遵循的原则是从选择器的右边到左边读取。换句话说,浏览器读取选择器的顺序是由右到左进行的。
浏览器读取选择器的顺序如下:
选择器的最后一部分,也就是选择器的最右边部分被称为 关键选择器 (keyselector),它将决定 CSS 选择器的效率。
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素(类型)选择器 = 伪元素选择器
ID和类名用于关键选择器上效率是最高的,而CSS3的仿伪类和属性选择器,虽然使用方便,但其效率却是最低的。
根据以上「浏览器读取选择器」与「选择器的效率」原则,我们可以通过避免不恰当的使用,提升 CSS 选择器的性能。
浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素,直到文档的根节点。因此其匹配开销是非常大的,所以应避免使用关键选择器是通配选择器的情况。
后代选择器在CSS中是最昂贵的选择器。贵得要命——尤其是把它和标签或通配符放在一起!
标签后面最好永远不要再增加子选择器
属性选择器根据元素的属性是否存在或其属性值进行匹配,如下例规则会把herf属性值等于 ”#index” 的链接元素设置为红色:
但其匹配开销是非常大的,浏览器先匹配所有的元素,检查其是否有href属性并且herf属性值等于”#index”, 然后分别向上逐级匹配class为selected的元素,直到文档的根节点。所以应避免使用关键选择器是单规则属性选择器的规则。
CSS3添加了复杂的属性选择器,可以通过类正则表达式的方式对元素的属性值进行匹配。当然这些类型的选择器定是会影响性能的,正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=, |=, ^=, $=, 和 ~=语法的属性选择器。
移除无匹配的样式,有两个好处:
扩展阅读
前端面试题-CSS选择器
前端面试题-CSS优先级