6

好的，关于如何优化网站的加载速度，我已经听过一百万种方法：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")您的主 CSS 文件中。

那么，从 HTML 加载 CSS 文件与从另一个 CSS 文件加载文件有什么区别？

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

我阅读了 Steve Souders 的不使用 @import文章，以及 About.com 的文章What's the Difference Between @import and link for CSS? ，但他们比较了我上面提到的我没有提到的方法，所以我不清楚为什么不使用@import.

顺便说一句，我不关心 Netscape 4 或 IE6（感谢上帝，我现在可以这么说）或 IE7 和 FOUC。

提前致谢。

4

2 回答 2

6

不同之处在于并行下载。 @import阻止并行下载。这意味着浏览器将在下载下一个文件之前等待导入导入的文件。

于 2012-10-02T15:45:49.507 回答
1

您引用的第一篇文章（Steve Souders 的“不要使用 @import”）专门解决了@import通过导入样式表内部的情况<link>——这与将@import内部<style>标记放在一起对性能不利。事实上，情况更糟：浏览器首先必须获取链接的样式表，然后解析该样式表，然后发现@import规则，然后获取导入的样式表。

于 2012-10-02T15:46:16.230 回答