CSS 选择器性能提升

3.标签选择器(div,h1,p)

4.相邻选择器(h1+p)

5.子选择器(ul < li)

6.后代选择器(li a)

7.通配符选择器(*)

8.属性选择器(a[rel=“external”])

9.伪类选择器(a:hover, li:nth-child)

根据以上「选择器匹配」与「选择器执行效率」原则，我们可以通过避免不恰当的使用，提升 CSS 选择器性能。

1、避免使用通用选择器

1. .content * {color: red;}

浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。

2、避免使用标签或 class 选择器限制 id 选择器

BAD

button#backButton {…}

BAD

.menu-left#newMenuIcon {…}

GOOD

#backButton {…}

GOOD

#newMenuIcon {…}

3、避免使用标签限制 class 选择器

BAD

treecell.indented {…}

GOOD

.treecell-indented {…}

BEST

.hierarchy-deep {…}

4、避免使用多层标签选择器。使用 class 选择器替换，减少css查找

BAD

treeitem[mailfolder=“true”] > treerow > treecell {…}

GOOD

.treecell-mailfolder {…}

5、避免使用子选择器

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总