css - @import vs vs 单体 css

Question

我知道有人问过很多类似的问题，但我还没有看到对链接和管理样式的所有三种可能方法的比较。哪个是浏览性能最好和最差的？我知道 <link>推荐超过@import因为它允许并行下载，但我也听说单个大型 CSS 优于 <link>正在处理多个 css 文件。这是否意味着使用 @import比一个大的 css 还差？我原以为它们会以相同的方式工作，但也许它结合了两个世界中最糟糕的部分。

然后，实际上，我们在这里谈论的性能差异有多大？您典型的 5 页网站真的需要担心这个吗？

因此，要回答这个问题，最好能看到一些比较三种不同场景的基准或可信估计(即秒数)。

例如:主.css (15kb)特殊的.css (60kb)网格.css (20kb)

在典型的服务器上，性能差异是什么:

• 使用<link>对于所有三个
• 使用<link>对于 main.css 和 @import对于其他人
• 将它们全部合并到一个文件中

Answer 1

查看 Ben Callahan's recent talk关于这个话题。

我目前通过 SASS 将所有内容导入到一个大文件中，因为 gzip 确实可以压缩该文件，并且 1 个较大的 HTTP 请求优于多个较小的请求(当然在一定程度上)。