多次导入同一个 CSS 文件会增加任何性能问题吗？答案

【问题标题】：Does importing same CSS file multiple times add any performance issues?多次导入同一个 CSS 文件会增加任何性能问题吗？
【发布时间】：2012-06-30 16:20:57
【问题描述】：

我看到有人讨论过多次加载相同的 Javascript，导致代码在每次包含时都运行时出现问题。

我在同一个 DOM 中多次包含同一个 CSS 文件（无法避免添加这个，因为我正在使用一些组件）：

    <link href="style.css" rel="stylesheet" type="text/css">

DOM 大小会增加吗？
CSS 文件是否在每次包含时都被渲染？
这会影响页面的性能吗？

注意：因为我使用的是同一个 CSS 文件，所以它只下载一次。

【问题讨论】：

标签： css performance webpage-rendering

【解决方案1】：

如果您的 CSS 文件一旦渲染和使用，就不会使用第二次导入的 CSS，我认为这不会导致任何问题。例如：

import css 1
import css 2

那么你在这里有<p class="test"> 并且这个test 只从 css 1 导入中为这个标签获取一次，并且 import css 2 只会被导入而不被使用。从这个意义上说，这只是开销，并且会占用少量时间来加载文件。我在这里没有看到更多问题。

【讨论】：

【解决方案2】：

我认为这会增加不必要的开销，因为即使样式表缓存在您的浏览器中，它仍然必须检查它是否缓存了多个包含（除非您的浏览器在获取它们之前聚合所有唯一样式表）。即便如此，我希望延迟最小，但绝对不是性能改进。如果将样式表拆分为多个文件，由于并发 http 连接，您可能会在初始加载时获得明显的性能提升，但这种分离的软件维护成本可能不值得，而且它不会为你在随后的页面加载。

【讨论】：