@import 与链接 [英] @import vs link

问题描述

首先我知道标题说这是一个重复的问题 此处、此处和此处.我读到的关于这个主题的所有内容都已经超过两年了.在那段时间里发生了很多变化，所以同样的想法仍然是可取的吗?

First I know the title says this is a duplicate question as asked here, here, and here. Everything I read on this topic is over two years old. A lot has changed in that time period so are the same thoughts still advisable?

这是一个示例，我在样式表中使用 @import 来引入我的重置 CSS 和其他一些样式.我应该将其从 @import 更改为 吗?根据这个 文章 我应该使用链接.所以我问其他开发者，到目前为止(2011 年 8 月 25 日)真正最好的方法是什么

Here is an example, I use @import inside a stylesheet to bring in my reset CSS and a couple other styles. Should I change that from @import to <link>? According to this article I should use link. So I ask other developers, what is truly the best way as to date (August 25, 2011)

推荐答案

如果在过去的一两年里发生了什么变化的话，那就没什么了，而且从那时起我们仍然在处理许多相同的浏览器，所以你不应该改变你的做法.

Not much if anything has changed in the past year or two, and we're still dealing with a lot of the same browsers from then, so you should not change your practice.

在所有情况下都优于 @import，因为后者会阻止并行下载，这意味着浏览器将等待导入的文件完成下载在它开始下载其余内容之前.

<link> is preferred in all cases over @import, because the latter blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

您可以在此处详细了解这一点:

You can see this in great detail here:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

所以，虽然 @import 可能很方便，但这就是它提供的全部内容.如果你真的想利用快速加载时间，使用最少数量的样式表(在大多数情况下可能是一个)，用高效的选择器编写好的 CSS(通常的东西)，缩小它，并使用 ; 标签.

So, while @import may be convenient, that's all it offers. If you really want to take advantage of fast loading times, use the minimum number of stylesheets (probably one in most cases), write good CSS with efficient selectors (the usual stuff), minify it, and use a <link> tag.

这本来是一条评论，但太长了:

This was going to be a comment but it got too long:

代替@import(我知道它很方便)，您应该在您的网站上线时将这些文件合并为一个.无论如何你都不应该在那个时候进行调整，并且有许多工具可以帮助缩小它.就我个人而言，使用 PHP，我有一个配置文件，我在其中定义了所有写入单独 CSS 文件的 CSS 文件(我将在 标记中引用的那个文件)，然后如果缓存版本较旧(手动或自动确定)，它将合并/缩小它们并将内容写入缓存"文件，并返回时间戳查询字符串以附加到 CSS 文件名以强制重新下载.

Instead of @import (I know it is very convenient), you should combine the files into one when your site goes live. You shouldn't be tweaking at that point anyways, and there are a number of tools to help minify it. Personally, using PHP, I have a config file where I define all the CSS files that are written to a separate CSS file (the one I will reference in the <link> tag), then if the cached version is old (either determined manually or automatically), it combines/minifies them and writes the content to the "cache" file, and returns a timestamp query string to append to the CSS file name to force a fresh download.

如果您也使用 PHP，我强烈推荐 cssmin，它可以解析样式表for @import 并将内容拉入一个文件，并处理缩小的所有方面.

If you are using PHP as well, I highly recommend cssmin, it can parse stylesheets for @import and pull the content into one file, as well as handle all aspects of minification.

这篇关于@import 与链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！