blog.Ring.idv.tw

The async and defer Script Attributes

The async and defer Script Attributes


上圖是HTML的Parsing Model,從圖中來看較值得注意的即為「Tree Construction」至「Script Execution」這一段,這段的意思是當HTML Parser在剖析HTML syntax並建構DOM (Document Object Model)的時候,若遇到「<script>」時會先暫停手邊的工作,等待執行完該Script之後再繼續Parsing,但是若遇到「<script src="external.js"></script>」時,它則需要等待下載該Script檔案完成後並執行該Script。

根據上述的HTML Parsing Model,我們就不難知道為何有些網頁總是會出現部份內容(或空白),然後可能需要等待一些時間後才會完整呈現,這時候除了調整Script的位置之外,我們還有更好的方式,那就是藉由Script element的「async」或「defer」屬性來加以改善。

Normal execution

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

這是一般常見的用法,但大多數的時候其實我們並不需要採用此同步的方式來執行

P.S. 一般的內嵌外部廣告仍需要採用此方式,因為它需要同步對DOM進行一些操作,如:document.write()。

Deffered execution

<script defer src="external.js"></script>

採用「defer」的作法,HTML Parser仍會持續進行剖析並建構DOM,但會在背景同時下載external.js,待檔案下載完成且DOM也建構完成之後,按照Script的先後順序依序執行,並發生在DOMContentLoaded事件執行之前,。

Asynchronous execution

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

採用「async」的作法和「defer」有點類似,兩者皆不會影響到HTML Parser的進行,但兩者最大的差別在於「async」並不保證Script的執行順序,而是採用先下載完成就先執行的模式,並發生在window's load event執行之前。

參考資源

Running scripts in WebKit

Asynchronous and deferred JavaScript execution explained

2012-06-26 13:21:06

Leave a Comment

Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment