Question

CSS选择器的性能已经得到了很多强调，并提出了很好的建议：

使用高效的选择器。
删除未使用的CSS规则。
删除包含当前页面未使用的CSS的任何内联样式块。

然而，没有具体的参考来避免在DOM中避免不必要的ID（为了识别像Wordpress那样的所有内容）。比如这样胖的菜单：

    <div id="nav">
      <ul id="menu-main-navigation" class="menu genesis-nav-menu menu-primary">
        <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-22"></li>
        <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"></li>
        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"></li>
        <li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118"></li>
      </ul>
   </div>

感觉就像许多不必要的HTML解析和匹配一样，找不到不存在的css ID规则，或者几乎没有使用默认存在的类，没有充分的理由（例如菜单项 - 这里的＃类），on为每个页面下载的常量不必要字节的顶部。可能更糟糕的是，单个缓存的css文件中未使用的css规则仅下载一次。或者如果不是更糟糕的话，是否还不足以建议避免？

或Modernizr膨胀案例如下：

<html data-env="production" lang="en" xml:lang="en" style="" class=" js flexbox flexboxlegacy canvas canvastext no-touch postmessage hashchange history websockets rgba hsla multiplebgs backgroundsize borderimage cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache overthrow-enabled">

与未使用的外部规则相比，任何浏览器专家对此的看法，以及性能有多糟糕。

Answer 1

如果我没弄错的话，现代浏览器在解析CSS时会将CSS ID和类选择器添加到自己的哈希映射中。然后，当在带有ID的HTML元素上应用CSS时，它会在ID哈希映射中搜索ID（O(1)或O(lg N)复杂度，具体取决于浏览器实现）。（类会以相同的方式工作。）所以实际上看看是否有附加到ID或类的样式是非常快（恒定或对数时间）。

如果情况确实如此，那么在这种情况下，查看一堆“未定义的”ID和类的时间（在我看来）是非常微不足道的。这可能是为什么没有人提到任何关于“未定义”ID和类使用的原因。

Here's one website mentioning it.（在页面上查找hash map）

我认为为这些“未定义的”ID和类下载的额外字节数本身就是一个争论。如果在网页服务器端没有进行压缩，我会更担心。

Answer 2

这是一个有趣的问题，网站开发人员知道他们必须尽可能轻松快速地制作网站，原因很多。

网站的许多方面都可以（应该）进行优化，如图像大小，js最小化，css最小化，缓存元素......

但我认为我们应该至少分开两个案例：

CMS /框架为非程序员开箱即用，但仍需定制：
- 就像在你的例子中一样：wordpress：wordpress主题往往有很多css元素，但它们提供了一个易于操作的高自定义级别，如果代码尽可能优化，肯定会受到影响。
- 您可以将主题视为基本形式，如果您是开发人员，您可以从任何主题开始，创建您的子主题并进行优化。
程序员必须处理的所有其他事情才能使webapp工作：
- 这与上面的第二种情况类似，如果开发人员可以编写任何代码，那么他可以根据需要对其进行优化。

好的，这有点偏离问题主题，但我认为值得一提。

回到css体重：

css文件：一个大的css文件可能大约是20kb，这会增加你网站的重量。这可以缓存，并将其与图像尺寸进行比较并不是一个很大的重量，但是当你尽力加速网站时，你必须尽可能地减少一切。

关于内联css权重：如果一个大的css文件大约是20kb，没有理由（没有匹配）内联/添加的css会带来一些额外的kb，但我真的认为它们可以被忽略复杂的html，也使用图像和js和jquery css可能会低于5％的重量kb。（我在网上搜索有关％html，css，js％的任何信息，但没有找到任何东西5 ％是我认为是最大值，但真正的价值可能会有所不同：研究会很好......）

浏览器完成的Css匹配：

更少的CSS，更少的代码匹配，更快的页面...但让我们考虑js和jquery：很多匹配甚至操作都很快完成。这再次表明，你可以优化代码，但它不会花费你的时间来优化其他东西（如图像，js，查询......）。

所以这是我在尝试优化网站时学到的东西：

花时间优化内联css，尽可能减少它不会像花时间优化其他东西一样多。但是，当您在网页中使用更好的优化css代码时，差异（速度很小甚至检测不到）总是如此。

DOM中“未定义”CSS属性的性能成本是多少？

2 个答案: