下面是个简单易学的CSS设计制作网页不要使用@import教程，图老师小编详细图解介绍包你轻松学会，喜欢的朋友赶紧get起来吧！
【 tulaoshi.com - Web开发 】
Translate From：stevesouders
原文：高性能网站设计：不要使用@import
在高性能网站设计的第五章，我简要的提到@import 对于网站的性能有某些负面的影响，然后我在 Web 2.0 Expo 的演讲上深入探讨了这个问题，并创建了一些测试页面和HTTP瀑布状图表，这些在下面将会用到。对于这个问题的底线是：如果你想样式表并行载入，以使页面更快，请使用LINK 替代@import。
LINK vs. @import
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）大家都知道，有两种方法可以在你的页面中导入样式文件。你可以使用LINK标签:
link rel='stylesheet' href='a.css' /
或者使用@import 方法：
style
@import url('a.css');
/style
我更喜欢使用LINK，因为它比较简单而如果使用@import的话，你必须时刻记得要将@import放到样式代码的最前面，否则它将会不起作用。而且事实证明，避免使用@import 同样对网站性能有益。
@import @import
我将探究LINK和@import两种方式的不同。在这些例子中，有两个样式表: a.css和b.css。每个样式表都配置为需要花费两秒钟来下载，这样就比较容易的看出来它们对网站性能的影响。第一个例子使用@import 导入两个样式文件。这个例子，我们称之为@import @import，HTML代码可以写成这个样子：
style
@import url('a.css');
@import url('b.css');
/style
如果你一直这种方式使用@import，那么就没有什么性能问题，尽管这可能会因为竞态条件而可能引起JavaScript错误。两个样式文件将同时并行下载，就像在图一中显示的那样(第一个小的请求是HTML该文件) 。问题出现在当@import嵌套入其它样式中或者和LINK联合使用的时候。
图一：一直使用@import 是可以的
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）LINK @import
这个LINK @import的例子使用LINK加载a.css，使用@import导入b.css:
link rel='stylesheet' type='text/css' href='a.css' /
style
@import url('b.css');
/style
在IE中(在6, 7, 和8中测试过)，这会导致样式表文件逐个加载，正如图二所示。并行下载资源是加速页面的一个关键。就像图示的那样，这种方法在IE中会导致页面需要更多的时间才能加载完成。
图二. 在IE中link混合@import 会破坏并行下载
来源:https://www.tulaoshi.com/n/20160219/1630736.html
看过《CSS设计制作网页不要使用@import》的人还看了以下文章 更多>>
