CSS:@import vs. <link href ="">

Question

好的,我已经听说过如何优化网站加载速度的百万种方式:HTTP请求越少越好(这就是图像精灵诞生的原因); 仅注入一页专门需要的JavaScript文件.尽可能使用CSS进行视觉增强,然后考虑SVG图形(虽然这个仍然有争议) ; 压缩您的CSS和JavaScript文件以及HTML标记; 将您的脚本整合到一个文件中(再次返回更少的HTTP请求); gzip你的资产; 等等

但今天我在网站上发现了这条评论:

"既然我们关心Web开发最佳实践,我们就不再在项目中使用@import规则了."

澄清一下,我的问题不是关于以下两者之间的区别:

<link rel="stylesheet" href="file.css"> 与 <style type="text/css">@import url("styles.css");</style>

将此添加到您的HTML文档之间的区别是:<link rel="stylesheet" href="file.css">将此@import url("styles.css")INSIDE 添加到您的主CSS文件中.

那么,从HTML加载CSS文件到从另一个CSS文件加载文件之间的区别是什么？

我的意思是,HTTP请求仍然存在,它们只是来自不同的位置.

我读过Steve Souders' 不要使用@import文章,以及About.com的文章@import和CSS链接有什么区别？,但他们比较我上面提到的我没有提到的方法,所以我不清楚为什么不使用@import.

顺便说一句,我不关心Netscape 4或IE6(感谢上帝,我现在可以说)或IE7和FOUC.

提前致谢.

Answer 1

差异归结为并行下载. @import阻止并行下载.这意味着浏览器将在下载下一个文件之前等待导入导入的文件.