[HTML]script 新增 async 和 defer 二個屬性說明

2019-02-06

在今日 Javascript 是網頁設計不可或缺的技術,引用外部 Javascript 檔,也是避免不了的技巧。

以往引用外部 Javascript 檔,由於實在是太常引用,一般我們直接會使用這樣的寫法:

<script type="text/javascript" src="demo.js"></scrpt>

<script src="demo.js"></scrpt>

但最近卻發現很多網頁引用的語法是

<script async src="demo.js"></scrpt>

或是也有出現, 這樣的寫法

<script defer src="demo.js"></scrpt>

一般人應該不容易注意到這四種寫法的差別吧!

我們今天就詳細的說明一下,到底這四種引用外部 Javascript 檔案的差別在哪裡

 

首先最早期引用外部 Javascript 檔案的標準定義寫法是

<script type="text/javascript" src="demo.js"></scrpt>

整個網頁的繪製會停下,等 demo.js 下載完並執行完,網頁繪製才繼續。

這個代表,在網頁遇到此語法時,並下載後會先執行,執行完這支 Javascript 檔案後,網頁才會繼續繪製下去。

如果遇到這支 Javascript 檔案很大或是要執行不少時間,網頁就會讓人覺得卡卡的。

所以也很多前端網頁程式設計師,會將引用外部 Javascript 檔案,放在網頁的最後面,而不是放在<head></head>裡面,避免造成下載顯示網頁畫面花費太久的時間!另外,<head></head>區段通常也是做為編碼宣告

另外,也有很多人直接省略屬性 type="text/javascript",直接寫成<script src="demo.js"></scrpt>

script 標籤屬性 type="text/javascript"是 HTML 4.01 和 XHTML 1.0 標準的定義,根據需要指定屬性

目前常用的瀏覽器,當沒有寫屬性時,預設會自動使用 JavaScript。

HTML5 中,也定義了 type 預設值為 text/javascript,所以一般而言,現在直接使用<script>就可以了。

嵌入的位置可以在<head>和<body>之中的任意位置,就看你選擇適當的區段。

 

接著,我們介紹 HTML5 新增定義的屬性 async, defer

● async 屬性

<script async src="demo.js"></scrpt>

網頁繪製不會停下, demo.js 在背景下載。待 demo.js 下載完畢,網頁繪製停下,執行 demo.js 。待 demo.js 執行完畢,網頁繪製繼續。

當網頁遇到後,下載後再先執行,但執行這支 Javascript 檔案的同時,也繼續載入網頁以及執行其他的 Javascript。

這支 Javascript 檔案和其他的 Javascript 檔案無連帶關係,不需要等待其他的 Javascript 檔案執行完。

目前支援 HTML5 的所有瀏覽器,都支援這個新的 script 屬性語法。

● defer 屬性

<script defer src="demo.js"></scrpt>

網頁繪製不會停下, demo.js 在背景下載,待 DOMContentLoaded 再執行 demo.js 。

要等待整個網頁都下載及分析完成後才會執行,非常類似於把 Javascript 檔案放在頁尾的情況。

這支 Javascript 檔案一定要等網頁全部都繪製完後才能執行。

目前支援 HTML5 的所有瀏覽器,都支援這個新的 script 屬性語法。

● async + defer 屬性

<script async defer src="demo.js"></scrpt>

等待整個網頁都下載及分析完成後,才會非同步執行這支 Javascript 檔案後面剩下的部分。

不知道,以上的說明,有沒有讓你更清楚

  • Top