2. 程式人生 > >script標籤載入順序(defer & async)

script標籤載入順序(defer & async)

阿新 • • 發佈：2018-11-27

script 擁有的屬性

  • async：可選，表示應該立即下載指令碼，但不應妨礙頁面中的其他操作，比如下載其他資源或等待載入其他指令碼。只對外部指令碼檔案有效。
  • charset：可選。表示通過 src 屬性指定的程式碼的字符集。由於大多數瀏覽器會忽略它的值，因此這個屬性很少有人用。
  • defer：可選。表示指令碼可以延遲到文件完全被解析和顯示之後再執行。只對外部指令碼檔案有效。IE7 及更早版本對嵌入指令碼也支援這個屬性。
  • language： 已廢棄。原來用於表示編寫程式碼使用的指令碼語言（如 JavaScript 、 JavaScript1.2 或 VBScript ）。大多數瀏覽器會忽略這個屬性，因此也沒有必要再用了。
  • src：可選。表示包含要執行程式碼的外部檔案。
  • type：可選。可以看成是 language 的替代屬性；表示編寫程式碼使用的指令碼語言的內容型別（也稱為 MIME 型別）。雖然 text/javascript 和 text/ecmascript 都已經不被推薦使用，但人們一直以來使用的都還是 text/javascript 。實際上，伺服器在傳送 JavaScript 檔案時使用的 MIME 型別通常是 application/x–javascript ，但在 type 中設定這個值卻可能導致指令碼被忽略。另外，在非IE瀏覽器中還可以使用以下值： application/javascript 和 application/ecmascript 。考慮到約定俗成和最大限度的瀏覽器相容性，目前 type 屬性的值依舊還是 text/javascript 。不過，這個屬性並不是必需的，如果沒有指定這個屬性，則其預設值仍為text/javascript 。

引入方式 JavaScript 的兩種方式

內聯形式

這種方式指的是在 html 檔案中，新增一個<script></scritp>標籤，然後將 JavaScript程式碼直接寫在裡面

外接形式

外接形式是將 JavaScript 程式碼寫在外部的一個檔案裡面，在 html 檔案中通過 <script> 標籤的 src 屬性引入

兩種引入形式的比較

對於這兩種方式，毫無疑問，外接形式明顯好於內聯形式，主要表現為以下方面:

  • 可維護性：外接 Javascript 檔案可以被多個頁面呼叫而不用在每個頁面上反覆地書寫.如果有需要改變的部分,你只需要在一處修改即可.所以外接JavaScript 導致程式碼工作量減少,進而使得維護手續也更加方便。
  • 可快取：瀏覽器能夠根據具體的設定快取連結的所有外部 JavaScript檔案。也就是說，如果有兩個頁面都使用同一個檔案，那麼這個檔案只需下載一次。因此，最終結果就是能夠加快頁面載入的速度。
  • 關注點分離：將 JavaScript 封裝在外部的.js檔案遵循了關注點分離的法則.總體來說,分離 HTML,CSS 和 JavaScript 從而讓我們更容易操縱他們.而且如果是多名開發者同步工作的話,這樣也更方便。

<script> 標籤載入順序

如果要談<script> 標籤載入順序問題，首先要談的就是標籤的位置，因為標籤的位置對於JavaScript載入順序來說有著很重要的影響。

#####標籤位置
<script> 標籤的位置有兩種，一種是方式<head>元素裡面，另外一種就是放在<body> 元素中頁面內容的後面，下面將一一介紹這兩種形式：


<script> 標籤放在<head>元素裡
<!DOCTYPE html>
<html>

<head>
  <title>Example HTML Page</title>
  <script type="text/javascript" src="example1.js"></script>
  <script type="text/javascript" src="example2.js"></script>
</head>

<body>
  <!-- 這裡放內容 -->
</body>

</html>

這是一種比較傳統的做法，目的就是把所有外部檔案（包括 CSS 檔案和 JavaScript 檔案）的引用都放在相同的地方.可是，在文件的 <head> 元素中包含所有 JavaScript 檔案，意味著必須等到全部 JavaScript 程式碼都被下載、解析和執行完成以後，才能開始呈現頁面的內容（瀏覽器在遇到 <body> 標籤時才開始呈現內容）。對於那些需要很多 JavaScript 程式碼的頁面來說，這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器視窗中將是一片空白。很明顯，這種做法有著很明顯的缺點，特別是針對於現在的移動端來說，如果超過 1s 還沒有內容呈現的話將是一種很差的使用者體驗。為了避免這個問題，就有了下面這種載入方式。

<script> 標籤放在<body> 元素中頁面內容的後面
<!DOCTYPE html>
<html>

<head>
  <title>Example HTML Page</title>
</head>

<body>
  <!-- 這裡放內容 -->
  <script type="text/javascript" src="example1.js"></script>
  <script type="text/javascript" src="example2.js"></script>
</body>

</html>

對於這種方式，在解析包含的 JavaScript 程式碼之前，頁面的內容將完全呈現在瀏覽器中。而使用者也會因為瀏覽器視窗顯示空白頁面的時間縮短而感到開啟頁面的速度加快了

延遲載入

<script>的每個屬性設計來肯定都是有用的，下面我們就來說一說 defer 屬性。
HTML 4.01 為<script> 標籤定義了 'defer 屬性。這個屬性的用途是表明指令碼在執行時不會影響頁面的構造。也就是說，指令碼會被延遲到整個頁面都解析完畢後再執行。因此，在 <script> 元素中設定defer 屬性，相當於告訴瀏覽器立即下載，但延遲執行，比如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>script 標籤</title>
  <script defer="defer" type="text/javascript" src="./js/01.js"></script>
  <script defer="defer" type="text/javascript" src="./js/02.js"></script>
</head>

<body>
  <!-- content -->
  <script type="text/javascript" src="./js/03.js"></script>
</body>

</html>

在這個例子中，雖然我們把 <script> 元素放在了文件的 <head> 元素中，但其中包含的指令碼將延遲到瀏覽器遇到 標籤後再執行。HTML5 規範要求指令碼按照它們出現的先後順序執行，因此第一個延遲指令碼會先於第二個延遲指令碼執行，而這兩個指令碼會先於 DOMContentLoaded 事件執行。在現實當中，延遲指令碼並不一定會按照順序執行，也不一定會在 DOMContentLoaded 事件觸發前執行，因此最好只包含一個延遲指令碼。

“在現實當中，延遲指令碼並不一定會按照順序執行，也不一定會在 DOMContentLoaded 事件觸發前執行，因此最好只包含一個延遲指令碼。” 這段話是《JavaScript 高階程式設計（第三版）》中的一句話，糾結了很久。自己也嘗試寫了一些例子，但反饋的結果都是：如果引入的 <script>標籤 都使用了 defer 屬性，他們的執行順序都是按照他們引入的順序來的。那麼作者為什麼會寫上這一句話呢，個人感覺原因是：即使在 HTML5 規範中有這麼一條，不一定所有的瀏覽器廠商都會遵照這個規定，可能某些瀏覽器廠商並沒有實現這個規範，但支援 defer 屬性，那麼就會出現作者所描述的那種情況，所以為了安全起見，在開發中使用一個 defer 是非常有必要的。

還有一點需要注意的是，defer 屬性只適用於外部指令碼檔案。

非同步載入

說完了延遲載入，然後我們再說下非同步載入，即使用 async屬性。
HTML5 為 <script> 元素定義了 async 屬性。這個屬性與 defer 屬性類似，都用於改變處理指令碼的行為。同樣與 defer 類似， async 只適用於外部指令碼檔案，並告訴瀏覽器立即下載檔案，下載完成後立即執行。但與 defer不同的是，標記為 async 的指令碼並不保證按照指定它們的先後順序執行。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>script 標籤</title>
  <script async type="text/javascript" src="./js/01.js"></script>
  <script async type="text/javascript" src="./js/02.js"></script>
</head>

<body>
  <!-- content -->
</body>

</html>

在以上程式碼中，可能由於 01.js 下載時間比較長，由於兩個 <script> 標籤都是非同步執行，互不干擾，因此 02.js 可能就會先於 01.js 執行。因此，確保兩者之間互不依賴非常重要。指定 async 屬性的目的是不讓頁面等待兩個指令碼下載和執行，從而非同步載入頁面其他內容。為此，建議非同步指令碼不要在載入期間修改 DOM。

小結

  • 所有 <script> 標籤引進的 JavaScript 會按照他們引入的順序依次被解析，在沒有使用 defer 或者 async 的情況下，只有在解析完前面 &ltscript> 元素中的程式碼之後，才會開始解析後面 &ltscript> 元素中的程式碼。
  • 由於瀏覽器會先解析完不使用 defer 屬性的&ltscript> 元素中的程式碼，然後再解析後面的內容，所以一般應該把&ltscript> 元素放在頁面最後，即主要內容後面， &lt/body> 標籤前面。
  • 使用 defer 屬性可以讓指令碼在文件完全呈現之後再執行,延遲指令碼總是按照指定它們的順序執行。
    -使用 async 屬性可以表示當前指令碼不必等待其他指令碼，也不必阻塞文件呈現。不能保證非同步指令碼按照它們在頁面中出現的順序執行。

image.png

原文 https://www.javascriptcn.com/read-9419.html

相關推薦

script標籤載入順序(defer &amp; async)

script 擁有的屬性 async：可選，表示應該立即下載指令碼，但不應妨礙頁面中的其他操作，比如下載其他資源或等待載入其他指令碼。只對外部指令碼檔案有效。 charset：可選。表示通過 src 屬性指定的程式碼的字符集。由於大多數瀏覽器會忽略它的值，因此這個屬性很少有

script標籤的幾個屬性async、defer解釋

If async="async": The script is executed asynchronously with t

script標簽中defer和async屬性的區別

插入 asc sync 過程 並行 事件 需要 -1 事件觸發 　　向html頁面中插入javascript代碼的主要方法就是通過script標簽。其中包括兩種形式，第一種直接在script標簽之間插入js代碼，第二種即是通過src屬性引入外部js文件。由於解釋器在解析執行

用script標籤載入

此文已由作者楊帆授權網易雲社群釋出。 歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。 注：經過更深入的測試，實在不好意思，這篇文章是有問題的 更改script的type屬性 並不能通過src來載入，只能在該檔案中解析。 requirejs 的text原理是通過XHR載入的) 測試如下：

用於非同步載入的defer和async詳解

定義和用法 <script type="text/javascript" defer="defer"> alert(document.getElementById("p1").first

JS的阻塞載入和 defer 和 async 屬性

JS具有阻塞特性，當瀏覽器在執行js程式碼時，不能同時做其它事情，即<script>每次出現都會讓頁面等待指令碼的解析和執行（不論JS是內嵌的還是外鏈的），JS程式碼執行完成後，才繼續渲染頁面。 所有瀏覽器在下載JS的時候，會阻止一切其他活動，比如其他資源的下

script標籤defer和async的不同

參考：https://www.cnblogs.com/neusc/archive/2016/08/12/5764162.html點選開啟連結 　1.<script src="example.js"></script> 　　　沒有defer或async屬性，瀏覽器會

script標籤中defer和async屬性的區別

script標籤存在兩個屬性，defer和async，因此script標籤的使用分為三種情況： 　　1.<script src="example.js"></script> 　　　沒有defer或async屬性，瀏覽器會立即載入並執行相應的指令碼。也就是說在渲染script標籤之後的文

淺談script標籤中的async和defer

script標籤用於載入指令碼與執行指令碼，在前端開發中可以說是非常重要的標籤了。直接使用script指令碼的話，html會按照順序來載入並執行指令碼，在指令碼載入&執行的過程中，會阻塞後續的DOM渲染。 現在大家習慣於在頁面中引用各種的第三方指令碼，如果第三方服務商出現了一些小

script標籤中async,defer兩個屬性的區別

1、相同點   (1)、載入檔案時不阻塞頁面渲染； (2)、對於inline的script無效； (3)、使用這兩個屬性的指令碼中不能呼叫document.write方法； (4)、有指令碼的onload的事件回撥； (5)、允許不定義屬性值，僅僅使用屬性名；

script標籤中的async和defer屬性

眾所周知，html中的script標籤都是同步按順序來執行的，並且在載入和執行的時候會中斷DOM解析器的解析過程，下面列舉一個簡單的例子來觀察這一過程： loadjs.html程式碼： <!DOCTYPE html> <html> <hea

<script>標簽中的 defer 與 async區別

inf src 維護 sync 腳本執行 順序 執行 使用 完成後 　　在html裏，使用<script>標簽對腳本進行外部或內部引用，<script>標簽包含了兩個特殊的屬性：defer與async，他們的區別如下： 　　1.若<script

一個頁面有多個script標籤時，執行順序

JavaScript直譯器在執行指令碼時，是按塊執行的。通俗地說，就是瀏覽器在解析HTML文件流時，如果遇到一個script標籤，則JavaScript直譯器會等到這個程式碼塊都載入完成後，先對程式碼塊進行預編譯，然後再執行。執行完畢後，瀏覽器會繼續解析下面的HTML文件流，同時JavaSc

Script標籤和指令碼執行順序

0.前言 估計所有讀者也慢慢適應我每次講東西之前先墨跡一段的習慣了。 那麼我今天就來個轉換，我！不！墨！跡！了！ 正文開始。 1.script標籤的預設行為 首先我們先來看一下 <script> 標籤 的幾個重要特性： scri

JavaScript 之 非同步載入 defer和async的區別

按照慣例，所有script元素都應該放在頁面的head元素中。這種做法的目的就是把所有外部檔案(CSS檔案和JavaScript檔案)的引用都放在相同的地方。可是，在文件的head元素中包含所有JavaScript檔案，意味著必須等到全部JavaScript

defer和async的非同步載入

(譯者注: 非同步載入,可以理解為無阻塞併發處理.) (譯者再注: 建議使用 defer,但是經測試發現 defer 屬性對頁面內的script無效,沒有時序差別.只對外部 js檔案生效 ) 我對於HTML5感到興奮不已的原因之一是它實現了眾多業界期待已久的特性。我們一直需要輸入框顯示空白提示，但都是用J

瀏覽器環境下JavaScript指令碼載入與執行探析之defer與async特性

defer和async特性相信是很多JavaScript開發者"熟悉而又不熟悉"的兩個特性，從字面上來看，二者的功能很好理解，分別是"延遲指令碼"和"非同步指令碼"的作用。然而，以defer為例，一些細節問題可能開發者卻並不一定熟悉，比如：有了defer特性的指令碼會延遲到什麼時候執行；內部指令碼和外部指

Web動態載入JS外部檔案(script標籤)

( 摘自高效能Javascript ) 文件物件模型（DOM）允許你使用JavaScript 動態建立HTML的幾乎全部文件內容。其根本在於，<script>元素與頁面其他元素沒有什麼不同：引用變數可以通過DOM進行檢索，可以從文件中移動、刪除，也

腳本引用中使用defer和async用法和區別

兩個 不依賴 doc 體驗 html 中文 htm 停止 其他 是的，就是在頁面腳本引用的時候設置defer或者async，為什麽會有這兩個屬相來輔助腳本加載那，因為瀏覽器在遇到script標簽的時候，文檔的解析會停止，不再構建document，有時打開一個網頁上會出現空

defer=“defer”和async=“async”

指定 延遲 順序 def 們的 font 執行 nbsp bsp <script type="text/javascript" src="demo_defer.js" defer="defer"></script> 立即下載，但延遲執行。即腳本將在頁