摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级
一、CSS选择符
CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。
作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CSS选择符模式，尽量编写高效的CSS选择符，从而加快页面的渲染速度，缩短页面呈现时间。
二、浏览器读取选择器浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行的。2.1 举例
浏览器读取选择器的顺序如下:
查找页面中所有 class=red 的 span 元素
查找 1. 结果的父元素中是否有 p 元素
查找 2. 结果的父元素中是否有 id=box 的 div 元素
2.2 从右到左的用处尽早的过滤掉无关的样式规则
尽快的匹配到目标元素
2.3 关键选择器选择器的最后一部分，也就是选择器的最右边部分被称为 关键选择器 （keyselector），它将决定 CSS 选择器的效率。
三、选择器的效率 3.1 从高到低内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素（类型）选择器 = 伪元素选择器
3.2 总结ID和类名用于关键选择器上效率是最高的，而CSS3的仿伪类和属性选择器，虽然使用方便，但其效率却是最低的。
四、选择器性能优化根据以上「浏览器读取选择器」与「选择器的效率」原则，我们可以通过避免不恰当的使用，提升 CSS 选择器的性能。
4.1 避免使用通用选择器浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。
4.2 不要在编写id规则时用标签名或类名 4.3 不要在编写class规则时用标签名 4.4 把多层标签选择规则用class规则替换，减少css查找 4.5 避免使用子选择器后代选择器在CSS中是最昂贵的选择器。贵得要命——尤其是把它和标签或通配符放在一起！
标签后面最好永远不要再增加子选择器
4.6 依靠继承 4.7 避免单规则的属性选择器属性选择器根据元素的属性是否存在或其属性值进行匹配，如下例规则会把herf属性值等于 ”#index” 的链接元素设置为红色：
但其匹配开销是非常大的，浏览器先匹配所有的元素，检查其是否有href属性并且herf属性值等于”#index”， 然后分别向上逐级匹配class为selected的元素，直到文档的根节点。所以应避免使用关键选择器是单规则属性选择器的规则。
4.8 避免类正则的属性选择器CSS3添加了复杂的属性选择器，可以通过类正则表达式的方式对元素的属性值进行匹配。当然这些类型的选择器定是会影响性能的，正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=， |=， ^=， $=， 和 ~=语法的属性选择器。
4.9 移除无匹配的样式移除无匹配的样式，有两个好处：
第一，删除无用的样式后可以缩减样式文件的体积，加快资源下载速度；
第二，对于浏览器而言，所有的样式规则的都会被解析后索引起来，即使是当前页面无匹配的规则。移除无匹配的规则，减少索引项，加快浏览器查找速度；
五、总结网站编写CSS时，应该优先考虑使用class选择器，避免使用通配符选择器（*）和属性选择器（a[rel=”external”]），后代选择器与标签选择器结合使用也应避免。
使用id选择器的性能最好，但是编写时要注意其唯一性，谨慎使用。
CSS3选择器（例如：:nth-child(n)第n个孩子）在帮助我们锁定我们想要的元素的同时保持标记的干净和语义化，但事实是，这些花哨的选择器让更多的浏览器资源被密集使用。如果你关心页面性能的话，他们真不该被使用！
扩展阅读
前端面试题-CSS选择器
前端面试题-CSS优先级
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52015.html
摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
摘要：另外回答的时候要淡定，一些问题就算不懂也不能慌，要和面试官谈笑风生，然后尽量扯回到自己懂的东西上面大公司比如百度给我的感觉就是很重视基础思维和潜力。 —— 虽然我的offer少，但是我的拒信多啊 这几天终于闲下来，做一点微小的工作，整理了一些之前几家公司的前端面试题和个人经验，想做前端的师弟妹可以参考，也欢迎各同行大神来指教~ （以下问题不分先后，时间久远难免有些遗漏；很多问题面试官都...
阅读 1965·2023-04-25 16:19
阅读 3090·2021-11-24 09:39
阅读 828·2021-11-16 11:44
阅读 1687·2019-08-29 12:52
阅读 1138·2019-08-26 13:33
阅读 1073·2019-08-26 10:26
阅读 2199·2019-08-23 16:42
阅读 2566·2019-08-23 14:37
