script標籤的非同步與延遲執行

張貼日期：2013/11/18 上午 02:49:13

文章來源:http://www.victsao.com/blog/81-javascript/125-javascript-script-asyanddefer

在HTML5中，script標籤多了許多屬性，async 就是其中之一。

async屬性可以讓javascript進行非同步的載入跟執行，而不會停止網頁其他部分的載入與解析。

這種讓外部js擋在背景載入與執行的方法，大大的提升了網頁載入與執行的效能。

雖然只適用於外部js檔，但實用性相當高，以後網頁要添加一些小工具，像是月曆之類的。

也就不用過於害怕添加太多而導致網頁載入被拖垮了。

async 屬性 與 defer屬性合用會有下列幾種：

1.async與defer屬性皆不存在：

<script src="123.js"></script>

同步下載與執行，這種作法會讓瀏覽器停止對網頁的解析，直到js檔執行完畢為止，

對網頁效能有顯著的負面影響。

2.async屬性存在：

<script src="123.js" async="true"></script>

非同步下載與執行，程式碼在下載完後會立即執行。下載與執行都在背景執行，

不影響網頁本身的解析。有顯著的效能提升。

3.defer屬性存在：

<script src="123.js" defer="true"></script>

js檔會在背景下載，並在網頁解析完成後才開始執行。

4.async與defer皆存在：

<script src="123.js" defer="true" ansyc="true"></script>

優先使用ansyc，而忽略defer，如果瀏覽器對ansyc不支援，那會使用defer屬性。

上面我都用 "存在" 這字眼，原因之一是HTML5的原文是使用 " present" ，

另外一個原因是因為，IE並不理會HTML5中ansyc與defer皆是boolean值的規定。

只要有ansyc字眼出現，他就認為是要非同步下載執行。

所以說下面幾個寫法對IE而言都是一樣的。

<script src="123.js" async ></script>

<script src="123.js" async="true"></script>

<script src="123.js" async="false"></script>