1、html5 script元素async、defer異步加載使用介紹異步加載,可以理解為無堵塞并發處理，過去我們用法各種javascript技巧來做這種事情，現在webkit為html5實現了script標簽的async異步屬性，感愛好的伴侶可以了解下(譯者注: 異步加載,可以理解為無堵塞并發處理.) 我對于html5感到高興不已的緣由之一是它實現了眾多業界期盼已久的特性。我們向來需要輸入框顯示空白提醒，但都是用javascript來實現的。我們也想要囫圇塊都變成可被點擊，也是用法javascript來實現。現在webkit為html5實現了script標簽的async異步屬性。過去我們用法各種

2、javascript技巧來做這種事情，但現在新的屬性讓防止堵塞變得相對簡單。 async - html屬性如我前面提到的，添加async屬性十分容易： 復制代碼代碼如下: 實際上，假如你的javascript以及html結構設計的合理，那么90%的狀況下你的script元素可以用法異步加載。 defer - html屬性safari 掃瞄器額外添加了defer屬性 復制代碼代碼如下: async 與 defer 的差別webkit官方博客 很好地說明了async 與 defer 的不同-正常狀況下，當掃瞄器在解析html源文件時假如碰到外部的script，那么解析過程會暫停，并發送哀求來下載s

3、cript文件，惟獨script徹低下載并執行后才會繼續執行dom解析。比如：在下載過程中掃瞄器是被阻擋做其他實用的工作的，包括 解析html，執行其他腳本，以及展示css布局。雖然webkit預加載掃描程序可以探測性地在下載階段舉行多線程下載，但是某些頁面仍然存在很大的網絡延遲。當前有無數技術來提升頁面顯示速度,但都需要額外的代碼以及針對特定掃瞄器的技巧。現在，script可以通過添加async或者defer屬性來讓腳本不必同步執行，示例如下： 復制代碼代碼如下: async 和 defer 標注的 script 都不會暫停html解析就立即被下載,兩者都支持onload大事回調來解決需要該

4、腳原來執行的初始化。兩者的區分在于執行時的不同：async 腳本在script文件下載完成后會立刻執行,并且其執行時光一定在 window的load大事觸發之前。這意味著多個async腳本很可能不會按其在頁面中的浮現次序挨次執行。與此相對，掃瞄器確保多個 defer 腳本按其在html頁面中的浮現挨次依次執行,且執行時機為dom解析完成后，document的domcontentloaded 大事觸發之前。 下面展示的是一個需要1秒來下載，以及1秒來解析執行其他操作的例子，我們可以看到囫圇頁面載入花了大約2秒鐘。 同樣的例子，但這次我們指定了script的 defer 屬性.由于當defer腳本下載的時候，其他操作可以并行執行，所以也許快了1倍。 -哪些掃瞄器支持async 和 defer同樣是上面引用的文章中提到： 除了基于webkit的新版本掃瞄器,firefox已經支持defer和onload屬性很長時光了，而且從ff3.6開頭添加了async屬性。ie同樣支持defer屬性,但還不支持async屬性，從ie9開頭，onload屬性也將被支持。 aynsc 棒極了！看到webkit實現async我愉快