事情是这样的，自己在看这两个的区别的时候，看到的说法都是在说，@import会慢于link去执行，使用@import的时候样式表会在页面加载完之后再去执行，而link会在页面加载的时候执行，不过我在chrome下去测试却不是这样的，测试的结果是，按照其在页面中的引入顺序来加载的。
一 @import 和 link的区别
link的使用
<link rel="stylesheet" type="text/css" href='path to style.css'></link>
@import的使用
<style type="text/css">@import url(Path To stylesheet.css)</style>
二 yahoo的建议:优先选择link（但是现在我却不得不质疑yahoo的这点建议了）
image.png
三 纠正错误 (测试环境：chrome，IE10)
- 关于加载: 测试之后只和其在页面的顺序有关系，按照顺序来加载。
- 关于渲染原则：
- （如果都是通过head引入的话）如果是在同等的权重的情况下，越是在后面的权重就越高。
- （如果是在style中引入的话）如果是同等权重的情况下，导入的优先级最低。！！！！注意，import的要在style的顶部引入才有用，不然起不到效果。
- 关于兼如果是容性： @import已经在IE5以上都支持了，link则无兼容性问题了，但是link自身有很多的属性，有一些属性对一些浏览器还未做到兼容。
四 ：兼容性情况图
@import的兼容性支持情况
link的兼容性情况图
四 关于测试的结果图：
打开chrome调试，按照以下步骤，查看日志，分别查看请求的顺序，可以发现，是按照页面的引入顺序来请求的，然后解析的话，则按照哪个先请求回来就先解析。
image.png
五 最后：测试代码
下面写了三部分的测试代码，可以分别注释去测试，查看结果。
//
<!DOCTYPE html>
<html>
<head>
<!-- 测试一，颜色为粉色，权重一样的话，以最后一个为准。 -->
<!-- <style type='text/css'>@import url("tets.css");</style>
<link rel="stylesheet" href="test1.css" type='text/css'>
<style>
.test {
background: green;
}
</style>
<link rel="stylesheet" href="test3.css" type='text/css'> -->
<!-- 颜色为红色，权重一样的情况下，以最后一个为准。 -->
<!-- <style type='text/css'>@import url("tets.css");</style>
<link rel="stylesheet" href="test1.css" type='text/css'>
<style>
.test {
background: green;
}
</style>
<link rel="stylesheet" href="test3.css" type='text/css'>
<style type='text/css'>@import url("tets.css");</style> -->
<!--颜色为绿色。 -->
<style type='text/css'>@import url("tets.css");</style>
<link rel="stylesheet" href="test1.css" type='text/css'>
<link rel="stylesheet" href="test3.css" type='text/css'>
<style type='text/css'>@import url("tets.css");</style>
<style>
.test {
background: green;
}
</style>
</head>
<body>
<div class='test'>
<h1>hhhhhh</h1>
</div>
</body>
</html>
这是自己的一个质疑和验证过程，也希望有人可以一起来交流。
网友评论