javaScript文件（下面簡稱腳本文件）需要被HTML文件引用才能在瀏覽器中運(yùn)行。在HTML文件中可以通過不同的方式來引用腳本文件，我們需要關(guān)注的是，這些方式的具體實(shí)現(xiàn)和這些方式可能會(huì)帶來的性能問題。
當(dāng)瀏覽器遇到（內(nèi)嵌）<script>標(biāo)簽時(shí)，當(dāng)前瀏覽器無從獲知javaScript是否會(huì)修改頁面內(nèi)容。因此，這時(shí)瀏覽器會(huì)停止處理頁面，先執(zhí)行javaScript代碼，然后再繼續(xù)解析和渲染頁面。同樣的情況也發(fā)生在使用 src 屬性加在javaScript的過程中（即外鏈 javaScript），瀏覽器必須先花時(shí)間下載外鏈文件中的代碼，然后解析并執(zhí)行它。在這個(gè)過程中，頁面渲染和用戶交互完全被阻塞了。
也就是說：每當(dāng)瀏覽器解析到<script>標(biāo)簽（無論內(nèi)嵌還是外鏈）時(shí)，瀏覽器會(huì)（一根筋地）優(yōu)先下載、解析并執(zhí)行該標(biāo)簽中的javaScript代碼，而阻塞了其后所有頁面內(nèi)容的下載和渲染。
方式一：慣例的做法
最傳統(tǒng)的方式是在head標(biāo)簽內(nèi)插入<script>標(biāo)簽。
然而這種常規(guī)的做法卻隱藏著嚴(yán)重的性能問題。根據(jù)上述對<script>標(biāo)簽特性的描述，我們知道，在該示例中，當(dāng)瀏覽器解析到<script>標(biāo)簽時(shí)，瀏覽器會(huì)停止解析其后的內(nèi)容，而優(yōu)先下載腳本文件，并執(zhí)行其中的代碼，這意味著，其后的test.css樣式文件和<body>標(biāo)簽都無法被加載，由于<body>標(biāo)簽無法被加載，那么頁面自然就無法渲染了。因此在該javaScript代碼完全執(zhí)行完之前，頁面都是一片空白。
<script type="text/javaScript" src="example.js"></script>
方式二：經(jīng)典的做法
既然<script>標(biāo)簽會(huì)阻塞其后內(nèi)容的加載，那么將<script>標(biāo)簽放到所有頁面內(nèi)容之后不就可以避免這種糟糕的狀況了嗎？ 將所有的<script>標(biāo)簽盡可能地放到<body>標(biāo)簽底部，以盡量避免對頁面其余部分下載的影響。
在IE8+瀏覽器上已經(jīng)實(shí)現(xiàn)了腳本并行下載，但在某些瀏覽器中（即使腳本文件放到了<body>標(biāo)簽底部），頁面中腳本仍是一個(gè)接著一個(gè)加載的。所以我們需要下一個(gè)方法，即：動(dòng)態(tài)加載腳本。
方式三：動(dòng)態(tài)腳本
通過文檔對象模型（DOM），我們可以幾乎可以頁面任意地方創(chuàng)建。
<script type='text/javascript'> var script = document.createElement('script'); script.type = 'text/javaScript'; script.src = 'file1.js'; document.getElementsByTagName('head')[0].appendChild(script);</script>上述代碼動(dòng)態(tài)創(chuàng)建了一個(gè)外鏈file1的<script>標(biāo)簽，并將其添加到<head>標(biāo)簽內(nèi)。這種技術(shù)的重點(diǎn)在于：
無論在何時(shí)啟動(dòng)下載，文件的下載和執(zhí)行過程不會(huì)阻塞頁面其他進(jìn)程（包括腳本加載）。
然而這種方法也是有缺陷的。這種方法加載的腳本會(huì)在下載完成后立即執(zhí)行，那么意味著多個(gè)腳本之間的運(yùn)行順序是無法保證的（除了Firefox和Opera）。當(dāng)某個(gè)腳本對另一個(gè)腳本有依賴關(guān)系時(shí)，就很可能發(fā)生錯(cuò)誤了。比如，寫一個(gè)jQuery代碼，需要引入jQuery庫，然而你寫的jQuery代碼文件很可能會(huì)先完成下載并立即執(zhí)行，這時(shí)瀏覽器會(huì)報(bào)錯(cuò)――‘jQuery未定義'之類的，因?yàn)榇藭r(shí)jQuery庫還未下載完成。于是做出以下改進(jìn)：
<script type='text/javascript'> function loadScript(url, callback) { var script = document.createElement('script'); script.type = "text/javaScript"; // IE和opera支持onreadystatechange // safari、chrome、opera支持onload if (script.readyState) {//IE script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else {//其他瀏覽器 script.onload = function() { callback(); }; } script.src = url; document.getElementsByTagName('head')[0].appendChild(script); }</script>上述代碼改進(jìn)的地方就是增加了一個(gè)回調(diào)函數(shù)，該函數(shù)會(huì)在相應(yīng)腳本文件加載完成后被調(diào)用。這樣便可以實(shí)現(xiàn)順序加載了，寫法如下（假設(shè)file2依賴file1，file1和file3相互獨(dú)立）：
loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});
file2會(huì)在file1加載完后才開始加載，保證了在file2執(zhí)行前file1已經(jīng)準(zhǔn)備妥當(dāng)。而file1和file3是并行下載的，互不影響。 雖然loadScript函數(shù)已經(jīng)足夠好，但還是有些不盡人意的地方――通過分析這段代碼，我們知道，loadScript函數(shù)中的順序加載是以腳本的阻塞加載來實(shí)現(xiàn)的(正如上述紅字部分指出的那樣)。而我們真正想實(shí)現(xiàn)的是――腳本同步下載并按相應(yīng)順序執(zhí)行，即并行加載并順序執(zhí)行。
方式四：LABjs
LABjs庫能幫我們真正地實(shí)現(xiàn)“并行加載與順序執(zhí)行”，推薦寫法如下：
<script src="LAB.js"></script><script type="text/javaScript"> $LAB .script("script1.js").wait() .script("script2-a.js") .script("script2-b.js") .wait(function(){ initScript1(); initScript2(); }) .script("script3.js") .wait(function(){ initScript3(); });</script>方式五：requireJS
<script src="require.js"></script><script type="text/javaScript"> require([ "script1.js", "script2-a.js", "script2-b.js", "script3.js" ], function(){ initScript1(); initScript2(); initScript3(); } );</script>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
