、async 和 defer 屬性

?http://blog.csdn.net/qq_34986769/article/details/52155871

1. defer 屬性

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

defer屬性聲明這個腳本中將不會有 document.write 或 dom 修改。
瀏覽器將會并行下載?file.js 和其它有 defer 屬性的script，而不會阻塞頁面后續處理。
defer屬性在IE 4.0中就實現了，超過13年了！Firefox 從 3.5 開始支持defer屬性 。
注：所有的defer 腳本保證是按順序依次執行的。
2. async 屬性

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

async屬性是HTML5新增的。作用和defer類似，但是它將在下載后盡快執行，不能保證腳本會按順序執行。它們將在onload 事件之前完成。
Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 屬性?？梢酝瑫r使用 async 和 defer，這樣IE 4之后的所有 IE 都支持異步加載。
3. 詳細解釋
<script> 標簽在 HTML 4.01 與 HTML5 的區別：

??? type 屬性在HTML 4中是必須的，在HTML5中是可選的。
??? async 屬性是HTML5中新增的。
??? 個別屬性（xml:space）在HTML5中不支持。

說明：

??? async：false，script 將立即獲取（下載）并執行，然后才繼續后面的處理，這期間阻塞了瀏覽器的后續處理。
??? async：true，那么 script 將被異步下載并執行，同時瀏覽器繼續后續的處理。
??? HTML4中就有了defer屬性，它提示瀏覽器這個 script 不會產生任何文檔元素（沒有document.write），因此瀏覽器會繼續后續處理和渲染。

??? 如果沒有 async 屬性 但是有 defer 屬性，那么script 將在頁面parse之后執行。（async=false;defer=true）

??? 如果同時設置了二者，那么 defer 屬性主要是為了讓不支持 async 屬性的老瀏覽器按照原來的 defer 方式處理，而不是同步方式。（異步兼容，同時使用defer+async）

?

?

--------------------------------------------------------------------------------------------------------------------------------http://blog.csdn.net/q121516340/article/details/51436314

優化腳本文件的加載提高頁面的加載速度，一直是前端工程師提高頁面加載速度很重要的一條。因為涉及到各個瀏覽器對解析腳本文件的不同機制，以及加載腳本會阻塞其他資源和文件的加載。當瀏覽器解析器遇到<script>時，會立即加載（加載：下載，解析和執行），瀏覽器對其他資源和文檔的加載會停止。為了提高頁面的加載速度，得讓JS不阻塞其他資源的加載。

Webkit 和 Firefox 對JS的執行過程進行了優化，增加了“預解析”這個過程，“預解析”過程不會修改DOM樹，所以可以跟其他解析過程并行,該過程由預解析器去完成，而可能會改變DOM樹執行過程則由主解析器來完成，在通過解析過程了解JavaScript文章中有提到的JS的“預解析”過程，此過程應該就是由瀏覽器的預解析器完成，預解析器還負責解析樣式表和圖片。

另一方面，瀏覽器同事請求http的數量也是有一定限制的，加載js不像加載樣式那樣是并行的。樣式表是構建呈現樹的一部分，瀏覽器在解析頁面結構是由DOM樹和呈現樹兩部分組成，而解析執行樣式表只會改變樣式表不會更改DOM樹，呈現樹跟DOM樹雖然是相對應的，但并非一一對應。因此，也就沒有必要停止對其他資源和文檔的加載了。

提高頁面加載速度的最簡單快速的方法就是將腳本文件放到body底部。但這并不是提高頁面加載速度最優方案的方案，接下來我們介紹其他方案。

首先來介紹一下<script>時能讓腳本延遲和異步執行的兩個屬性：defer和async。

Defer、Async屬性

• defer是html4.0中定義的，該屬性使得瀏覽器能延遲腳本的執行，等文檔完成解析完成后會按照他們在文檔出現順序再去下載解析。也就是說defer屬性的<script>就類似于將<script>放在body的效果。
• async是HTML5新增的屬性，IE10和瀏覽器都是支持該屬性的。該屬性的作用是讓腳本能異步加載，也就是說當瀏覽器遇到async屬性的<script>時瀏覽器加載css一樣是異步加載的。

支持async屬性的瀏覽器貌似沒什么問題，但是defer屬性在各個瀏覽器中支持程度有點不同。測試代碼如下

<script type="text/javascript" defer> alert('defer') </script> <script type="text/javascript"> alert('script') </script> <script type="text/javascript"> window.onload = function(){ alert('onload') } </script>

defer測試代碼，可將代碼復制到本地自己測試，外部腳本src引入，內聯腳本直接粘帖

運行以上代碼，得出以下結論：

• 外部JS在各個瀏覽器里運行結果跟定義的執行順序正常，alert信息會按照 script->defer->onload順序彈出；
• 內聯腳本，如果腳本都是IE9/8/7/6按照定義的順序彈出信息，其他瀏覽器則按照 defer->script->onload 順序彈出信息，表示defer失效。
• 而如果有多個內聯defer腳本、在body和head都有分布或者在iframe中也有內聯defer腳本，則在IE6中表現一致。

如果想給腳本增加defer屬性讓其延遲加載的話，最好是外部腳本，內聯的defer不僅多數瀏覽器不支持，而且IE6的表現也不一致。

所以將腳本放在body底部比給腳本增加defer屬性讓腳本延遲加載更好，就像yslow建議的那樣：put style top,put script bottom。

瀏覽器的在遇到defer和async屬性的<script>的瀏覽器執行過程如下（以下摘自javascript權威指南）：

WEB瀏覽器創建Document對象，并且開始解析WEB頁面，解析HTML元素和它們的文本內容后添加Element對象和Text節點到文檔中。這個過程的readystate的屬性值是“loading”

當HTML解析器遇到沒有async和defer屬性的<script>時，它把這些元素添加到文檔中，然后執行行內或外部腳本。這些腳本會同步執行，并且在腳本下載（如果需要）和執行解析器會暫停。這樣腳本就可以用document.write()來把文本插入到輸入流中。解析器恢復時這些文本會成為文檔的一部分。同步腳本經常單定義函數和注冊后面使用的注冊事件處理程序，但它們可以遍歷和操作文檔樹，因為在它們執行時已經存在了。這樣同步腳本可以看到他自己的<script>元素和它們之前的文檔內容

當解析器遇到了設置async屬性的<script>元素時，它開始下載腳本，并繼續解析文檔。腳本會在它下載完成后盡快執行，但是解析器沒有停下來等他下載。異步腳本禁止document.write()方法。它們可以看到自己的<script>元素和它之前的所有文檔元素，并且可能或干脆不可能訪問其他的文檔內容。

當文檔完成解析，document.readyState屬性變成“interactive”。

所有有defer屬性的腳本，會被它們在文檔的里的出現順序執行。異步腳本可能也會在這個時間執行。延遲腳本能訪問完整的文檔樹，禁止使用document.write()方法。

瀏覽器在Document對象上觸發DOMContentLoaded事件。這標志著程序執行從同步腳本執行階段轉到異步事件驅動階段。但要注意，這時可能還有異步腳本沒有執行完成。

這時，文檔已經完全解析完成，但是瀏覽器可能還在等待其他內容載入，如圖片。當所有這些內容完成載入時，并且所有異步腳本完成載入和執行，document.readyState屬性變為“complete”，WEB瀏覽器出發Window對象上的load事件。

從此刻起，會調用異步事件，以異步響應用戶輸入事件，網絡事件，計算器過期等。

轉載于:https://www.cnblogs.com/qdcnbj/p/8066452.html

總結

以上是生活随笔為你收集整理的script 有哪个属性可以让它不立即执行 defer,async的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。