2015年2月27日 星期五

[JS] async, defer 差別

webber0928

HTML5 <script> 多了屬性 async 和 defer

一般情況

<script src="demo.js" ></script>
整個網頁的繪製會停下,等 'demo.js' 下載完並執行完,網頁繪製才繼續。

defer

<script src="demo.js" defer ></script>
網頁繪製不會停下, 'demo.js' 在背景下載,待 DOMContentLoaded 再執行 demo.js 。

async

<script src="demo.js" async ></script>
網頁繪製不會停下, demo.js 在背景下載。
待 demo.js 下載完畢,網頁繪製停下,執行 demo.js 。
待 demo.js 執行完畢,網頁繪製繼續。

Peter Beverloo 畫了張時序圖可供參考。
時序圖

引用網址

By webber0928

一個小菜鳥工程師,對籃球還有夢想的男孩。

0 意見:

張貼留言

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates