更具体的选择器更快解析吗？

问题描述 投票：1回答：3

我有一个网站：

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行吗？他们都做同样的事情，但最后一个可能选择比我想要的更多。在优化速度时，是否有优势？

css css-selectors
3个回答
1
投票

我不认为我们可以说特异性提高了解析速度。 id稍有改进的是渲染速度。还有其他因素会影响您的渲染速度，例如CSS文件大小以及必须多次重新定义同一类的规则，例如

一些改进渲染的建议：

  1. 为一般内容中使用的元素定义基本规则（段落，列表，粗体，斜体......）。这样您就会覆盖默认的浏览器CSS规则。
  2. 如果每个<li>都有不常见的规则，例如特定于模块的规则，则使用模块父类来定义它们将避免浏览器抓取整个HTML，并且在使用相同规则后不必覆盖规则标签为不同的设计作品。
  3. 如果有多个级别的子节点，则需要为每个子节点使用需要自定义的类，而不是添加更多级别挂起的父类，否则当需要异常时，您将以大型层次结构类链结束。
  4. 尝试创建可以在所有设计中回收的CSS模块，应用定义该模块元素的单个类。
  5. 如果可能的话，尽量避免使用*。如今不像20年前那么多问题，但更具体的是速度更好。
  6. 不要滥用：之前和之后，负责任地使用它们。这是伪元素，可以动态修改DOM，有时，某些浏览器无法正确呈现它们。
  7. 尝试使用CSS shorthands作为一般规则。
  8. 如果使用baground图案，请平衡图像大小和重复频率。创建一个40px png或gif的模式，而不是使用4px的最小大小，例如因为浏览器必须将图像渲染10倍，这值得小额外的文件大小。
  9. 使用精灵作为图标类似的元素，但不是太大。你可以为每种颜色制作一个精灵。我还建议垂直进行，全部在一列中。这样你就可以使用像background-position-y: calc(-8 * $module)这样的东西轻松找到图标。此方法将为您节省大量css规则以定义位置以及HTML元素，因为您不必在两个轴（x，y）中聚集bg图像
  10. 如果您使用标签，请始终在内联添加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>
0
投票

选择器越短越好。如果可能，请确保密钥选择器是类或ID，以使其保持快速和特定。

有关更多信息，请阅读以下文章。强烈推荐。

https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/

0
投票

在您阅读我的答案之前，我想告诉您，通过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。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.