通用选择器的性能影响是什么？

Question

通用选择器的性能影响是什么？

Bun*_*gle 41 html css performance css-selectors

我试图在一个页面中找到一些简单的客户端性能调整,每页收到数百万的页面浏览量.我有一个问题是使用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>

Run Code Online (Sandbox Code Playgroud)

通用选择将适用上述声明的body,h1和p元素,这是因为它们在文档中的唯一.

一般来说,我会从以下规则中看到更好的表现:

body, h1, p {
  margin: 0;
  padding: 0;
}

Run Code Online (Sandbox Code Playgroud)

或者这具有完全相同的净效应？

通用选择器是否执行了我可能不知道的更多工作？

我意识到这个例子中的性能影响可能非常小,但我希望能够学到一些可能会在实际情况中带来更显着的性能提升的东西.

我不打算在文档的后面用其他样式覆盖通用选择器规则中的样式 - 即,将它用作快速和脏的重置样式表.我实际上正在尝试完全按照我的意图使用通用选择器 - 将规则集应用于文档中的所有元素,一劳永逸.

最后,我希望确定通用选择器是否存在固有的缓慢,或者是否由于滥用滥用而导致说唱不好.如果* { margin: 0; }字面上相当于body, h1, p { margin: 0; },那么这将回答我的问题,我会知道与前者一起,因为它更简洁.如果没有,我想理解为什么通用选择器执行得更慢.

Answer 1

mxc*_*xcl 57

在现代浏览器中,如果不对每个元素应用慢速效果(例如,盒阴影,z轴旋转),则性能影响可以忽略不计.通用选择器速度慢的神话是十年前的一个宿醉,当时它很慢.

参考:http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx

归档时间：	15 年，3 月前
查看次数：	11305 次
最近记录：	9 年，1 月前