通用选择器对性能有何影响? [英] What is the performance impact of the universal selector?
问题描述
我试图在每月获得数百万次页面浏览量的页面中找到一些简单的客户端性能调整.我担心的一个问题是使用 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>
通用选择器会将上述声明应用于 body、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.
最终，我希望确定通用选择器是否存在固有的缓慢问题，或者它是否由于滥用泛滥而名声不佳.如果 * { 边距: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.
参考:http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx
这篇关于通用选择器对性能有何影响?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
