更具体的选择器更快解析吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了更具体的选择器更快解析吗？相关的知识，希望对你有一定的参考价值。
我有一个网站：
body#contact h1 {
color: red;
}
#contact h1 {
color: red;
}
body.contact h1 {
color: red;
}
.contact h1 {
color: red;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="overrides.css">
</head>
<body id="contact" class="contact">
<h1>Contact us!</h1>
</body>
</html>我应该在css文件中使用第1,2,3或4行吗？他们都做同样的事情，但最后一个可能选择比我想要的更多。在优化速度时，是否有优势？
我不认为我们可以说特异性提高了解析速度。 id稍有改进的是渲染速度。还有其他因素会影响您的渲染速度，例如CSS文件大小以及必须多次重新定义同一类的规则，例如
一些改进渲染的建议：
- 为一般内容中使用的元素定义基本规则（段落，列表，粗体，斜体......）。这样您就会覆盖默认的浏览器CSS规则。
- 如果每个
<li>都有不常见的规则，例如特定于模块的规则，则使用模块父类来定义它们将避免浏览器抓取整个HTML，并且在使用相同规则后不必覆盖规则标签为不同的设计作品。 - 如果有多个级别的子节点，则需要为每个子节点使用需要自定义的类，而不是添加更多级别挂起的父类，否则当需要异常时，您将以大型层次结构类链结束。
- 尝试创建可以在所有设计中回收的CSS模块，应用定义该模块元素的单个类。
- 如果可能的话，尽量避免使用*。如今不像20年前那么多问题，但更具体的是速度更好。
- 不要滥用：之前和之后，负责任地使用它们。这是伪元素，可以动态修改DOM，有时，某些浏览器无法正确呈现它们。
- 尝试使用CSS shorthands作为一般规则。
- 如果使用baground图案，请平衡图像大小和重复频率。创建一个40px png或gif的模式，而不是使用4px的最小大小，例如因为浏览器必须将图像渲染10倍，这值得小额外的文件大小。
- 使用精灵作为图标类似的元素，但不是太大。你可以为每种颜色制作一个精灵。我还建议垂直进行，全部在一列中。这样你就可以使用像
background-position-y: calc(-8 * $module)这样的东西轻松找到图标。此方法将为您节省大量css规则以定义位置以及HTML元素，因为您不必在两个轴（x，y）中聚集bg图像 - 如果您使用标签，请始终在内联添加
with和height属性。如果这些图像是.jpg，则使用约60的压缩并保存为渐进式jpg。
我认为使用这个基本规则，在大多数情况下你不会有任何渲染问题。
h1 {
margin: 16px 8px;
font-size: 24px;
color: #999966;
}
p {
margin: 8px 8px 16px;
}
.thumnnail {
float: left;
margin: 0 8px;
}
.content, aside {
display: table-cell;
}
.content {
width: 75%;
}
.content ul {
margin: 8px;
padding: 8px 16px ;
}
.content li {
margin:8px 0;
}
.tabs {
margin: 0;
padding: 0;
background: #ddd;
}
.tab {
list-style: none;
padding: 8px;
}
.tab + .tab {
border-top: solid 2px #fff;
}<section class="content">
<h1>My title</h1>
<img class="thumnnail" src="https://fakeimg.pl/250x100/" title="my image"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<ul>
<li>Excepteur sint occaecat cupidatat</li>
<li>non proident sunt in culpa</li>
<li>qui officia deserunt mollit anim id est laborum.</li>
</ul>
</section>
<aside>
<ul class="tabs">
<li class="tab">Tab 1</li>
<li class="tab">Tab 2</li>
<li class="tab">Tab 3</li>
</ul>
</aside>选择器越短越好。如果可能，请确保密钥选择器是类或ID，以使其保持快速和特定。
有关更多信息，请阅读以下文章。强烈推荐。
https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/
在您阅读我的答案之前，我想告诉您，通过CSS代码优化速度是一个很大的问题空间。您可以使用缩小器优化速度并最小化CSS的大小。这将简化服务器端文件的加载并将其发送到互联网（向所有请求它的浏览器），并且在浏览器端，它将通过减少必须下载的文件来提高性能。除此之外，CSS代码性能严格是浏览器级别的问题，如果您发现客户端性能问题，则应该只对其进行处理。
此外，在对CSS进行任何优化之前，请首先通过删除h1的规则进行测试，看看这是否会对性能产生影响。
在这个答案中，我将假设您在浏览器运行CSS时遇到客户端性能问题。 id的#选择器告诉浏览器搜索给定的id，因为在有效的HTML代码的情况下id是唯一的，大多数浏览器将在第一次出现时停止搜索。但是，你为id定义了body，由于body是根html标签的直接子项，因此不会过多地提高性能。如果你有一个部分可以找到你所有的h1标签，那么如果你给它一个id并在你的选择器中使用它会很棒。 class选择器不会在第一场比赛停止，因为class不被认为是独特的。让我们假设您有一个div，其中所有的h1标签都在里面：
<div>
<!-- There are some h1 tags in here -->
</div>
如果你给它一个id：
<div id="h1-container">
<!-- There are some h1 tags in here -->
</div>
并在您的选择器中使用它：
#h1-container h1 {
/*Your rules*/
}
那应该很快。如果您仍然遇到性能问题，那么您需要向我们提供有关您的问题的更多信息，可能还有一个可重现的示例，如JSFiddle。
以上是关于更具体的选择器更快解析吗？的主要内容，如果未能解决你的问题，请参考以下文章