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

Question

我见过人们讨论多次加载相同的 Javascript，当代码每次在每个包含上运行时都会产生问题。

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

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

1. DOM 大小会增加吗？
2. 每次包含时都会渲染 CSS 文件吗？
3. 这会影响页面的性能吗？

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

Answer 1

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

import css 1
import css 2

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

Answer 2

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