|
在IE6/7里JavaScript會(huì)從兩個(gè)方面阻礙頁面呈現(xiàn):
script標(biāo)簽下面的網(wǎng)頁資源在script加載完之前會(huì)停止請(qǐng)求、下載。
script標(biāo)簽下面的html元素在script加載完之前會(huì)停止渲染。
在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script標(biāo)簽會(huì)阻礙下載:
雖然在ie8,safari4,chrome2下script可以并發(fā),但依然阻礙了其他資源的下載:
有6種方法可以使script與其他資源并行下載:
1.XHR eval ― 通過XHR(XMLHttpRequest 對(duì)象)下載script,然后用eval方法執(zhí)行XHR的responseText
2.XHR Injection ― 通過XHR下載script,然后建立一個(gè)script標(biāo)簽并把它插入文檔中(body或者h(yuǎn)ead標(biāo)簽內(nèi)),接著把script標(biāo)簽的text屬性設(shè)置為XHR的responseText的值
3.XHR in Iframe ― 把script標(biāo)簽放到一個(gè)iframe里,通過iframe下載它
4.Script DOM Element ― 創(chuàng)建script標(biāo)簽并把它的src屬性指向你的腳本地址
5.Script Defer ― 添加script標(biāo)簽的defer屬性,這個(gè)只在ie中有效,但firefox3.1也支持這個(gè)屬性了
6.使用document.write方法在頁面中寫入<script src="">,這個(gè)只在ie里有效
可以通過Cuzillion查 看各個(gè)方法的使用例子。
如果有一些內(nèi)聯(lián)腳本需要在外部腳本執(zhí)行后才能執(zhí)行,那就需要同步(synchronize)他們了。稱作”coupling”,Coupling Asynchronous Scripts 這篇文章介紹了一些目前可以實(shí)現(xiàn)“coupling”的方法。
headjs,能使JS并發(fā)下載(但是順序執(zhí)行):http://headjs.com/
復(fù)制代碼 代碼如下:
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
// all done
});
// the most simple case. load and execute single script without blocking.
head.js("/path/to/file.js");
// load a script and execute a function after it has been loaded
head.js("/path/to/file.js", function() {
});
// load files in parallel but execute them in sequence
head.js("file1.js", "file2.js", ... "fileN.js");
// execute function after all scripts have been loaded
head.js("file1.js", "file2.js", function() {
});
// files are loaded in parallel and executed in order they arrive
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");
// the previous can also be written as
head.js("file1.js").js("file1.js").js("file3.js");
JavaScript技術(shù):讓JavaScript和其它資源并發(fā)下載的方法,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。