1

CSS 选择器的性能已经被强调了很多，有很好的建议：

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

但是，没有具体参考以避免在 DOM 中出现不必要的 id（为了 IDing 像 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 规则，或者几乎没有使用默认存在的类（例如这里的 menu-item-# 类），在顶部为每一页下载恒定的不必要字节。单个缓存 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">

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

4

2 回答 2

2

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

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

这是一个提到它的网站。hash map（在页面上查找）

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

于 2013-10-18T06:04:10.883 回答
0

这是一个有趣的问题，Web 开发人员知道出于很多原因，他们必须使网站尽可能轻巧快速。

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

但我认为我们至少应该在两种情况下分开：

  1. CMS/Frameworks 为非程序员开箱即用，但仍必须可定制：

    • 就像在您的示例中一样： wordpress：wordpress 主题往往有很多 css 元素，但它们提供了一个易于操作、高度自定义的级别，如果代码尽可能优化，肯定会受到影响。

    • 您可以将主题视为基本形式，如果您是开发人员，您可以从任何主题开始，创建您的子主题并对其进行优化。

  2. 为了使 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 代码时，差异（速度很小甚至无法察觉）始终存在。
于 2013-10-18T06:07:07.133 回答