讓瀏覽器非阻塞載入javascript的幾種方法小結

瀏覽器為了確保正確執行指令碼和呈現布局在瀏覽器載入和執行完成它之前會完全阻塞頁面後續內容的呈現和其他資源的載入。

在頁面的載入過程中如果可以做到內容的逐步呈現，對於良好的使用者體驗來說是非常重要的。通常我們也會在wondow對象的onload事件處理函數中做一些事情，但由於指令碼阻塞載入和呈現的特性這一方面增加了頁面載入時間延遲了onload事件的觸發，另一方面也延遲了使用者所期待的反饋。這就需要我們使用一些方法來讓瀏覽器以非阻塞的方式載入外部指令碼。

一 使用XMLHttpRequest對象非同步方式載入外部指令碼。

這種方式好處是觸發較少的瀏覽器忙指標，能夠被所有現代瀏覽器的所支援。不足的之處在於由於瀏覽器的跨域安全機制所以只能允許載入同域下外部指令碼。另外如果多個指令碼之間存在依賴關係的話，需要使用編寫相關的隊列管理指令碼來控制多個指令碼的執行順序。

二 使用Javascript來動態建立外部指令碼的SCRIPT元素

這種方式是我認為跨域並行載入外部指令碼情況下的最佳方案，實現方法是使用Javascript來動態建立在HTML中引用外部指令碼所需要srcript元素並給建立的srcript元素的src屬性設定相應的外部指令碼的URL來實現和其他資源並行載入。

四 使用iframe載入外部指令碼

這種方式我們需要使用一個新HTML頁面把外部指令碼轉換成到該HTML頁面的行內指令碼，然後在首頁面中使用iframe載入這個包含指令碼的HTML頁面，使用這種方式需要重構部分代碼來訪問首頁面中DOM元素。而且IFRAM是開銷相對較大DOM元素，同樣也有跨域限制。

五 使用Script標籤的 derfer 屬性

這種方式是實現非阻塞並行載入外部指令碼的最簡單的方式，只需要在引用外部指令碼的是常規方式上給SCRIPT標籤應用defer屬性即可。但是使用這種方式載入外部指令碼缺點是它只在部門瀏覽器中實現並行載入因此相容性欠缺。

六 docuument.write script tag

這種方式實現起來也比較簡單，就是直接使用是javascript的document.write方法來輸出在HTML中引用外部指令碼的script標記的字串。不足之處和方法五一樣相容性欠缺。

總結

上述幾種方式需要根據具體需求，如是否需要跨域？是否需要確保指令碼按順序執行？是否需要觸發更多或更少的瀏覽器的忙指標？以及相容性，支援的代碼量來確定來綜合考慮那種方式才是追合適的。