本文主要介紹讓瀏覽器非阻塞加載javascript的幾種方式。

通常大多數(shù)瀏覽器是并行下載資源的，但由于外部腳本的特殊性例如通過腳本改變文檔的DOM結(jié)構(gòu)、腳本之間的存在依賴關(guān)系、使用document.write 向頁(yè)面輸出HTML等。瀏覽器為了確保正確執(zhí)行腳本和呈現(xiàn)布局在瀏覽器加載和執(zhí)行完成它之前會(huì)完全阻塞頁(yè)面后續(xù)內(nèi)容的呈現(xiàn)和其他資源的加載。

在頁(yè)面的加載過程中如果可以做到內(nèi)容的逐步呈現(xiàn)，對(duì)于良好的用戶體驗(yàn)來(lái)說(shuō)是非常重要的。通常我們也會(huì)在wondow對(duì)象的onload事件處理函數(shù)中做一些事情，但由于腳本阻塞加載和呈現(xiàn)的特性這一方面增加了頁(yè)面載入時(shí)間推遲了onload事件的觸發(fā)，另一方面也延遲了用戶所期待的反饋。這就需要我們使用一些方法來(lái)讓瀏覽器以非阻塞的方式加載外部腳本。

一 使用XMLHttpRequest對(duì)象異步方式加載外部腳本。

這種方式好處是觸發(fā)較少的瀏覽器忙指示器，能夠被所有現(xiàn)代瀏覽器的所支持。不足的之處在于由于瀏覽器的跨域安全機(jī)制所以只能允許加載同域下外部腳本。另外如果多個(gè)腳本之間存在依賴關(guān)系的話，需要使用編寫相關(guān)的隊(duì)列管理腳本來(lái)控制多個(gè)腳本的執(zhí)行順序。

二 使用Javascript來(lái)動(dòng)態(tài)創(chuàng)建外部腳本的SCRIPT元素

這種方式是我認(rèn)為跨域并行加載外部腳本情況下的***方案，實(shí)現(xiàn)方法是使用Javascript來(lái)動(dòng)態(tài)的創(chuàng)建在HTML中引用外部腳本所需要srcript元素并給創(chuàng)建的srcript元素的src屬性設(shè)置相應(yīng)的外部腳本的URL來(lái)實(shí)現(xiàn)和其他資源并行加載。

三 使用iframe加載外部腳本

這種方式我們需要使用一個(gè)新HTML頁(yè)面把外部腳本轉(zhuǎn)換成到該HTML頁(yè)面的行內(nèi)腳本，然后在主頁(yè)面中使用iframe加載這個(gè)包含腳本的HTML頁(yè)面，使用這種方式需要重構(gòu)部分代碼來(lái)訪問主頁(yè)面中DOM元素。而且IFRAM是開銷相對(duì)較大DOM元素，同樣也有跨域限制。

四 使用Script標(biāo)簽的 derfer 屬性

這種方式是實(shí)現(xiàn)非阻塞并行加載外部腳本的最簡(jiǎn)單的方式，只需要在引用外部腳本的是常規(guī)方式上給SCRIPT標(biāo)簽應(yīng)用defer屬性即可。但是使用這種方式加載外部腳本缺點(diǎn)是它只在部門瀏覽器中實(shí)現(xiàn)并行加載因此兼容性欠缺。

五 docuument.write script tag

這種方式實(shí)現(xiàn)起來(lái)也比較簡(jiǎn)單，就是直接使用是javascript的document.write方法來(lái)輸出在HTML中引用外部腳本的script標(biāo)記的字符串。不足之處和方法五一樣兼容性欠缺。

總結(jié)

上述幾種方式需要根據(jù)具體需求，如是否需要跨域？是否需要確保腳本按順序執(zhí)行？是否需要觸發(fā)更多或更少的瀏覽器的忙指示器？以及兼容性，支持的代碼量來(lái)確定來(lái)綜合考慮那種方式才是追合適的。

【編輯推薦】

1. Javascript解決瀏覽器兼容性問題
2. 4月超棒的JavaScript游戲開發(fā)框架推薦
3. 13個(gè)經(jīng)典JavaScript游戲 附源代碼下載
4. 高性能WEB開發(fā)之如何加載JavaScript
5. 從零開始學(xué)習(xí)jQuery之你必須知道的JavaScript