@import vs <link /> vs monolithic css

时间:2013-06-26 02:28:42

标签: css httprequest

我知道有很多类似的问题已被问到,但我没有看到所有三种可能的链接和管理风格方法的比较。哪个是浏览性能的最佳和最差?我知道<link>推荐@import,因为它允许并行下载,但我也听说过一个大的CSS比<link>多个css文件好。这是否意味着使用@import比一个大型CSS更糟糕?我认为他们会以同样的方式工作,但也许它结合了两个世界中最糟糕的。

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

因此,为了回答这个问题,可以看到比较三种不同情景的一些基准或可信赖的估计(即秒数)。

例如: main.css(15kb) special.css(60kb) grid.css(20kb)

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

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

1 个答案:

答案 0 :(得分:0)

在这个主题上查看Ben Callahan's recent talk

我目前通过SASS将所有内容导入到一个大文件中,因为gzip可以真正解决这个问题,1个更大的HTTP请求比多个更小的请求更好(当然是这样)。