CSS：@import与< link href =""> [英] CSS: @import vs. <link href="">
问题描述
好的，我听说过如何优化网站的加载速度的百万种方法：HTTP请求越少越好（这就是为什么图像精灵诞生了）;仅注入一页专用的JavaScript文件。使用CSS尽可能多的视觉增强，然后也许考虑SVG图形（虽然这一个仍然有争议）;压缩您的CSS和JavaScript文件和HTML标记;将您的脚本合并为一个文件（更少的HTTP请求再次）; gzip您的资产;等等。
Ok, I've heard a million ways about how to optimize a website's load speed: The fewer HTTP requests, the better (that's why image sprites were born); Inject only the JavaScript files one page exclusively needs. Use CSS for visual enhancements as much as possible, then maybe consider SVG graphics (although this one is still debatable); compress your CSS and JavaScript files and HTML markup; consolidate your scripts into one single file (fewer HTTP requests back again); gzip your assets; etc, etc.
但今天我在网站上发现这个评论：
But today I find this comment on a website:
关注Web开发最佳实践，我们不再在我们的项目中使用@import规则。
"Since we care about web development best practices, we don’t use @import rules in our projects anymore."
为了澄清，我的问题不在于差异之间：
To clarify, my question IS NOT about the difference between:
< link rel =stylesheethref =file.css> code>< style type =text / css> @import url（styles.css）;< / style>
<link rel="stylesheet" href="file.css"> vs. <style type="text/css">@import url("styles.css");</style>
将此文档添加到HTML文档之间的区别是：< link rel =stylesheethref =file.css> 这个 @import url（styles.css）在您的主要CSS文件中。
Is about the difference between adding this to your HTML document: <link rel="stylesheet" href="file.css"> vs. adding this @import url("styles.css") INSIDE your main CSS file.
我的意思是，HTTP请求仍然存在，它们只是从不同的位置。
I mean, HTTP requests will still be there, they're just being made from different locations.
我阅读Steve Souders的 不要使用@import 文章和About.com的文章 @import和CSS的链接之间有什么区别？ ，但他们比较我上面提到的方法，我不是指的，所以我不清楚为什么不使用 @import 。
I read Steve Souders' don’t use @import article, and About.com's article What's the Difference Between @import and link for CSS?, but they compare the methods I mentioned above I wasn't referring to, so it wasn't clear to me why not use @import.
BTW，我不在乎Netscape
BTW, I don't care about Netscape 4 or IE6 (Thank God I can say that now) or IE7 and the FOUC.
提前感谢。
推荐答案
区别在于并行下载。 @import 阻止并行下载。这意味着浏览器将等待导入导入的文件，然后再下载下一个文件。
The difference comes down to parallel downloading. @import blocks parallel downloading. This means the browser will wait to import the imported file before downloading the next file.
这篇关于CSS：@import与< link href ="">的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
