無阻塞加載腳本分析[全]_javascript技巧

由于瀏覽器是單線程的，因此腳本在載的時(shí)候會(huì)阻塞下載其它資源；雖然在現(xiàn)在瀏覽器已經(jīng)有所改善，但仍然有待改進(jìn)。
很顯然，腳本必須按順序執(zhí)行，但沒有必要按順序下載，解決方法：
1。內(nèi)嵌JS
通常由于頁面大小和緩存能帶來更多好處，因此外部文件引入JS更好一些；
在少數(shù)情況下，比如首頁、少量JS情況下尚可接受。
2。XHR Eval
通過XMLHttpRequest從服務(wù)器端獲取腳本。
主要缺陷是，通過XHR獲取的腳本必須部署在和主頁面相同的域中。
代碼如下:
Ajax.get("test.js", function (xhr) {
eval(xhr.responseText);
});

3。XHR注入
使用XHR獲取腳本并創(chuàng)建script標(biāo)簽。
同樣，通過XHR獲取的腳本必須部署在和主頁面相同的域中。
代碼如下:
Ajax.get('test.js', function (xhr) {
injectscript(xhr.responseText);
});
function injectscript(scriptText) {
var s = document.createElement('script');
s.text = scriptText;
document.getElementsByTagName('head')[0].appendChild(s);
}

4。Script in Iframe
將需要的腳本放入到一個(gè)頁面中，然后通過iframe來加載該頁面。
缺點(diǎn)是iframe本身的開銷比較大，另外瀏覽器安全機(jī)制不允許iframe中的js訪問跨域的父頁面，反之亦然。
5。Script DOM Element
JS動(dòng)態(tài)創(chuàng)建script DOM元素并設(shè)置其src屬性。
代碼如下:
var scriptElem = document.createElement('script');
scriptElem.src = 'http://domain.com/test.js';
document.ge('head')[0].appendChild(scriptElem);

6。Script Defer
給script標(biāo)簽添加defer屬性。
缺點(diǎn)是只有IE和一些新瀏覽器支持。
代碼如下:

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com