先說一說兩者之間的異同

　　兩者都可以引用外部CSS的方式，現在主流瀏覽器兩者都支持（ps:@import是CSS2.1提出的），但是存在一定的區別：

1.link是XHTML標簽，除了加載CSS外，還可以定義其他事務；@import屬于CSS范疇，只能下載CSS也只能在css代碼里面使用。

　　link標簽定義文檔與外部資源的關系,最常見的用途是鏈接樣式表以及瀏覽器標簽圖標。

　　他主要有一下幾個可用的屬性

　　href: 連接的外部文檔的位置url

　　media:?規定被鏈接文檔將被顯示在什么設備上,主流瀏覽器支持的值有?"screen"、"print" 以及 "all"

　　rel:?規定當前文檔與被鏈接文檔之間的關系，目前只有stylesheet和icon支持的比較好，其中icon指的外部鏈接文檔為瀏覽器標簽圖標。

　　sizes： html5新特性，規定被鏈接資源的尺寸，該屬性可接受多個值，值由空格分隔。僅適用于 rel="icon"。值為any（規定圖標是可伸縮的）和heightxwidth。比如下面的例子定義標簽圖標

<link rel="icon" href="http://www.w3school.com.cn/i/demo_icon.ico" type="image/gif" sizes="16x16">

　　type: 規定規定被鏈接文檔的 MIME 類型。最常見的 MIME 類型是 "text/css"。MIME類型參考

　　

　　@import在css代碼中引用外部文檔，而且只能放在代碼的最開頭。比如下面的例子就不行

<style type="text/css">.panel{width:1000px;}@import url(extra.css); </style>

　　需要改成

<style type="text/css">@import url(extra.css);.panel{width:1000px;} </style>

?

2：link引用CSS時，在頁面載入時同時下載（按請求順序下載）；@import需要頁面網頁完全載入以后下載。

　　這里面涉及一個概念，標準里面代碼中引用文件都是按順序解析下載的。但是現代瀏覽器都做了優化：瀏覽器的預解析。如下面的例子

<style type="text/css">@import url(extra.css); </style> <script type="text/javascript">document.write("<script src='extra.js'><\/script>"); </script> <script src="jquery.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> <script type="text/javascript" src='test.js'></script>

　　下載的順序是jquery.js->test.css->test.js->extra.css->extra.js。其中extra.css和extra.js就是代碼中引用文件的典型。在執行@import和script腳本的時候，瀏覽器預解析需要下載的后面三個外部文件先去下載下來。

　　注意：雖然extra.css在下載順序上是在test.css后面，但是瀏覽器認為extr.css樣式表的定義在test.css的前面，所以樣式上瀏覽器會用test.css中的樣式覆蓋extra.css的樣式。js腳本也是同理。

　　這里有一個原則，腳本（無論是html中內嵌的還是外部腳本）的優先級順序是其引用的順序，而非下載的順序，并且其中的執行代碼執行的必要條件是其引用順序在其前列的腳本已經下載完畢（實際上腳本中代碼的執行都是在所有腳本下載完成之后才執行的，只是不同腳本中的代碼執行的上下文環境是不同的，下面會詳細分析）。

　　舉例

<script type="text/javascript">document.write("<script src='extra.js'><\/script>"); </script> <script type="text/javascript" src='test.js'></script> <script type="text/javascript">a(); </script> <script src="new.js"></script> //extra.js function a(){alert("extra") } alert("extra1")//test.js function a(){alert("test"); } alert("test1"); setTimeout(a,1000);//new.js function a(){alert("new") } alert("new1")

　　引用順序是

　　extra.js -> test.js -> new.js。

　　執行彈出彈出框的順序是

　　alert("extra1") ->?alert("test1") ->?alert("test") ->?alert("new1") ->?alert("test")

　　解析，代碼執行順序及和引用順序相同

　　

　　瀏覽器執行函數的原理是根據順序掃描腳本將所有要執行的處理放入處理隊列中并帶上執行的上下文環境依次執行。

　　比如執行到本地js的a()的時候上下文環境中函數a為function a(){alert("test")}。setTimeout(a,1000)執行后a函數攜帶上下文環境（a函數為function a(){alert("test")}）被放置到另一個地方，等到時間間隔到期才被放入執行隊列，這就是為什么最后彈出alert("test")的原因。

　　我們再次拓展，在extra.js中定義一個function b(){a();}，然后在本地js調用a()之后執行b();結果應當是彈出alert("test")，因為這個時候的上下文環境a函數為function a(){alert("test")}。

　　

　　css的請求順序和覆蓋也可以用上面的描述解釋。覆蓋順序是誰先被引用誰就會被后引用的同樣的樣式覆蓋（當然這里指的是除開內聯樣式以外的樣式引用）

?

3：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

?　　因為link也屬于DOM元素，而@import是css樣式表中支持的東東

4: 用法

　　@import

@import "style.css" @import url(style.css) @import url("style.css")

?　　推薦使用@import url(style.css)

　　

　　如果覺得本文不錯，請點擊右下方【推薦】！

?

轉載于:https://www.cnblogs.com/chuaWeb/p/5130213.html

總結

以上是生活随笔為你收集整理的html/css基础篇——link和@inport详解以及脚本执行顺序探讨的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。