html中載入JavaScript腳本檔案的常用方式總結-js教程-PHP中文網

當瀏覽器遇到（內嵌） 標籤時，目前瀏覽器無從獲知javaScript是否會修改頁面內容。因此，這時瀏覽器會停止處理頁面，先執行javaScript程式碼，然後再繼續解析和渲染頁面。同樣的情況也發生在使用 src 屬性加在javaScript的過程中（即外鏈 javaScript），瀏覽器必須先花時間下載外鏈文件中的程式碼，然後解析並執行它。在這個過程中，頁面渲染和使用者互動完全被阻塞了。

也就是說：每當瀏覽器解析到 標籤（無論內嵌或外鏈）時，瀏覽器會（一根筋地）優先下載、解析並執行該標籤中的javaScript程式碼，而阻塞了其後所有頁面內容的下載和渲染。

方式一： 慣例的做法

#最傳統的方式是插入head標籤內 標籤。

然而這種常規的做法卻隱藏著嚴重的效能問題。根據上述對 標籤特性的描述，我們知道，在該範例中，當瀏覽器解析到 標籤時，瀏覽器會停止解析其後的內容，而優先下載腳本文件，並執行其中的程式碼，這意味著，其後的test.css樣式檔案和 標籤都無法被加載，由於 標籤無法被加載，那麼頁面自然就無法渲染了。因此在該javaScript程式碼完全執行完之前，頁面都是一片空白。

登入後複製 方式二： 經典的做法

既然 標籤會阻塞其後內容的加載，那麼將 標籤放到所有頁面內容之後不就可以避免這種糟糕的狀況了嗎？ 將所有的 標籤盡可能地放到 標籤底部，以盡量避免對頁面其餘部分下載的影響。

在IE8+瀏覽器上已經實現了腳本並行下載，但在某些瀏覽器中（即使腳本文件放到了 標籤底部），頁面中腳本仍是一個接著一個加載的。所以我們需要下一個方法，即：動態載入腳本。

方式三： 動態腳本

#透過文件物件模型（DOM），我們幾乎可以頁面任意地方創建。

var script = document.createElement('script'); script.type = 'text/javaScript'; script.src = 'file1.js'; document.getElementsByTagName('head')[0].appendChild(script); 登入後複製 上述程式碼動態建立了一個外鏈file1的 標籤，並將其加入 標籤內。這種技術的重點在於：

無論在何時啟動下載，檔案的下載和執行過程不會阻塞頁面其他進程（包括腳本載入）。 然而這種方法也是有缺陷的。這種方法載入的腳本會在下載完成後立即執行，那麼意味著多個腳本之間的運行順序是無法保證的（除了Firefox和Opera）。當某個腳本對另一個腳本有依賴關係時，就很可能發生錯誤了。例如，寫一個jQuery程式碼，需要引入jQuery庫，然而你寫的jQuery程式碼檔案很可能會先完成下載並立即執行，這時瀏覽器會報錯－'jQuery未定義'之類的，因為此時jQuery庫還未下載完成。於是做出以下改進：

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){}); 登入後複製 file2會在file1加載完後才開始加載，保證了在file2執行前file1已經準備妥當。而file1和file3是並行下載的，互不影響。 雖然loadScript函數已經夠好，但還是有些不盡人意的地方－透過分析這段程式碼，我們知道，loadScript函數中的順序載入是以腳本的阻塞載入來實現的(正如上述紅字部分指出的那樣) 。而我們真正想實現的是——腳本同步下載並按相應順序執行，即並行加載並順序執行。