[英]What is the performance impact of the universal selector?
我试图在一个每月接收数百万次页面浏览量的页面中找到一些简单的客户端性能调整。 我担心的一个问题是使用 CSS 通用选择器 ( * )。
例如，考虑一个非常简单的 HTML 文档，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
通用选择器会将上述声明应用于body 、 h1和p元素，因为它们是文档中唯一的元素。
一般来说，我是否会从以下规则中看到更好的性能：
body, h1, p {
margin: 0;
padding: 0;
}
或者这会产生完全相同的净效应吗？
通用选择器是否执行了更多我可能不知道的工作？
我意识到此示例中的性能影响可能非常小，但我希望了解一些可能会在实际情况下带来更显着性能改进的内容。
我不打算用文档后面的其他样式覆盖通用选择器规则中的样式 - 即，将其用作快速且脏的重置样式表。 我实际上正在尝试完全按照我的预期使用通用选择器 - 将规则集应用于文档中的所有元素，一劳永逸。
最终，我希望确定通用选择器是否存在固有的缓慢之处，或者它是否只是由于滥用泛滥而造成不好的说唱。 如果* { margin: 0; } * { margin: 0; }字面上等同于body, h1, p { margin: 0; } body, h1, p { margin: 0; } ，然后将回答我的问题，我会知道去与前者，因为它更简洁。 如果没有，我想了解为什么通用选择器执行得更慢。
在现代浏览器中，性能影响可以忽略不计，只要您不对每个元素应用慢速效果（例如框阴影、z 轴旋转）。 通用选择器很慢的神话是十年前它很慢的宿醉。
参考： http : //www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx
我知道通配符会影响性能，但在较小的站点上，这种影响可以忽略不计。 通配符是基于渐进增强构建站点的非常有用的工具。 显然，使用HTML * 之类的东西确实会影响较大站点的性能，但使其更具体，例如#element_id * ，有助于快速对子元素进行通用更改。
毕竟，通配符的存在是有原因的。 您只需要了解何时使用它比不使用它更有益。 这取决于上下文。
我在制作 CSS 模板时使用通配符和通用选择器。 这也是使用自定义样式快速调整不熟悉的 WordPress 主题中的一系列元素的好方法。
即使是流行且精简的 Bootstrap，也会在适当的情况下使用通配符。
参考：
避免通用选择器将始终加快您的页面渲染。 通配符 * 很慢，尤其是当您的页面变得复杂且元素数量激增时。
您应该始终将 ID 指定到尽可能低的级别（我意识到这几乎是不可能的，尤其是在处理诸如数据库结果之类的事情时）。 但是当你使用选择器时
.mysuperclass ul li p a
您有一个类，后跟四个通用选择器 - 这意味着对于 .mysuperclass 的每个元素，渲染引擎必须遍历该父级中的每个元素以查找这些规则。
简而言之，我的答案是尽可能具体地使用您的 CSS，并尽可能深入地使用您的选择器深入到 DOM。 避免通配符和泛型。
使用* universal selector和html有什么区别？
[英]What is the difference between using the * universal selector and html?
将通用选择器（*）与相邻的选择器（+）结合使用
[英]Using universal selector (*) in conjunction with the adjacent selector (+)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.