先說一說兩者之間的異同

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

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

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

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

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

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

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

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

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

　　type: 規(guī)定規(guī)定被鏈接文檔的 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需要頁面網(wǎng)頁完全載入以后下載。

　　這里面涉及一個概念，標(biāo)準(zhǔn)里面代碼中引用文件都是按順序解析下載的。但是現(xiàn)代瀏覽器都做了優(yōu)化：瀏覽器的預(yù)解析。如下面的例子

<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就是代碼中引用文件的典型。在執(zhí)行@import和script腳本的時候，瀏覽器預(yù)解析需要下載的后面三個外部文件先去下載下來。

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

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

　　舉例

<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。

　　執(zhí)行彈出彈出框的順序是

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

　　解析，代碼執(zhí)行順序及和引用順序相同

　　

　　瀏覽器執(zhí)行函數(shù)的原理是根據(jù)順序掃描腳本將所有要執(zhí)行的處理放入處理隊列中并帶上執(zhí)行的上下文環(huán)境依次執(zhí)行。

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

　　我們再次拓展，在extra.js中定義一個function b(){a();}，然后在本地js調(diào)用a()之后執(zhí)行b();結(jié)果應(yīng)當(dāng)是彈出alert("test")，因?yàn)檫@個時候的上下文環(huán)境a函數(shù)為function a(){alert("test")}。

　　

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

?

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

?　　因?yàn)閘ink也屬于DOM元素，而@import是css樣式表中支持的東東

4: 用法

　　@import

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

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

　　

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/chuaWeb/p/5130213.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。