怎么提升CSS选择器性能？

vicky.yu

1、避免使用通用选择器
.content  {color: red;}

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


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

避免使用

button#backButton {…}

避免使用
.menu-left#newMenuIcon {…}

推荐使用
#backButton {…}

推荐使用
#newMenuIcon {…}

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

避免使用
treecell.indented {…}

推荐使用
.treecell-indented {…}

最优使用

.hierarchy-deep {…}

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

避免使用
treeitem[mailfolder="true"] > treerow > treecell {…}

推荐使用
.treecell-mailfolder {…}

5、避免使用子选择器

避免使用
treehead treerow treecell {…}

BETTER, BUT STILL BAD

treehead > treerow > treecell {…}

推荐使用
.treecell-header {…}

6、使用继承

避免使用
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }

推荐使用

#bookmarkMenuItem { list-style-image: url(blah) }