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

詳細內容
分類：Javascript
發佈：2013-01-19, 週六 08:58
點擊數：2674

在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" async="true"></script>

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

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

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

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

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

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

相關文章中還有一些關於HTML5的發展消息，可以參考一下。

smiley如果你覺得寫的還不錯，請給我一個讚喔!!smiley

 
 

  按個讚!~支持本站!~

FB推薦載入中  

你可能會有興趣的文章：

 
 

  按個讚!~支持本站!~

FB推薦載入中