问题描述
我想在一个获得数百万次每月网页浏览量的网页中找到一些简单的客户端效果调整。我有一个问题是使用CSS通用选择器（ * ）。
I'm trying to find some simple client-side performance tweaks in a page that receives millions of monthly page views. One concern that I have is the use of the CSS universal selector (*).
一个非常简单的HTML文档，如下所示：
As an example, consider a very simple HTML document like the following:
<!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>
通用选择器会将上述声明应用于正文， h1 和 p 元素，因为这些是文档中唯一的。
The universal selector will apply the above declaration to the body, h1 and p elements, since those are the only ones in the document.
一般来说，我会从一个规则看到更好的性能，例如：
In general, would I see better performance from a rule such as:
body, h1, p {
margin: 0;
padding: 0;
}
还是会有完全相同的净效应？
Or would this have exactly the same net effect?
通用选择器是否会执行我可能不知道的更多工作？
Does the universal selector perform more work that I may not be aware of?
我意识到这个例子中的性能影响可能非常小，但我希望学习一些东西，这可能会导致在现实世界的情况下更显着的性能改进。
I realize that the performance impact in this example may be very small, but I'm hoping to learn something that may lead to more significant performance improvements in real-world situations.
我不打算重写样式通用选择器规则与文档中的其他样式 - 即，使用它作为一个快速和脏的重置样式表。我实际上试图使用通用选择器完全按照我的想法 - 应用规则集到文档中的所有元素，一劳永逸。
I don't intend to override the styles in the universal selector rule with other styles later in the document - i.e., using it as a quick and dirty reset stylesheet. I'm actually trying to use the universal selector exactly as I think it's intended - to apply a rule set to all elements in the document, once and for all.
最终，我希望确定是否有一些固有的慢的通用选择器，或者如果它只是有一个坏的说唱，由于猖獗的滥用。如果 * {margin：0; } 在字面上等同于 body，h1，p {margin：0; } ，那么这将回答我的问题，我会知道去与前者，因为它更简洁。
Ultimately, I'm hoping to determine if there is something inherently slow about the universal selector, or if it just has a bad rap due to rampant misuse. If * { margin: 0; } is literally equivalent to body, h1, p { margin: 0; }, then that will answer my question, and I'll know to go with the former since it's more concise. If not, I want to understand why the universal selector performs more slowly.
推荐答案
在现代浏览器中，性能影响可以忽略不计，你不会对每个元素应用慢速效果（例如，box-shadow，z轴旋转）。
In modern browsers the performance impact is negligible, provided you don’t apply slow-effects to every element (eg. box-shadow, z-axis rotation). The myth that the universal-selector is slow is a hangover from ten years ago when it was slow.
参考：
这篇关于通用选择器的性能影响是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！