[CSS]提出质疑:@import和link的区别

事情是这样的,自己在看这两个的区别的时候,看到的说法都是在说,@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>

这是自己的一个质疑和验证过程,也希望有人可以一起来交流。

推荐阅读更多精彩内容