js載入之使用DOM方法動態載入Javascript檔案

傳統上，載入Javascript檔案都是使用<script>標籤。
就像下面這樣：
<script type="text/javascript" src="example.js"></script>
 
<script>標籤很方便，只要加入網頁，瀏覽器就會讀取並運行。但是，它存在一些嚴重的缺陷。
　　（1）嚴格的讀取順序。由於瀏覽器按照<script>在網頁中出現的順序，讀取Javascript檔案，然後立即運行，導致在多個檔案互相依賴的情況下，依賴性最小的檔案必須放在最前面，依賴性最大的檔案必須放在最後面，否則代碼會報錯。
　　（2）效能問題。瀏覽器採用"同步模式"載入<script>標籤，也就是說，頁面會"堵塞"（blocking），等待javascript檔案載入完成，然後再運行後面的HTML代碼。當存在多個<script>標籤時，瀏覽器無法同時讀取，必須讀取完一個再去讀取另一個，造成讀取時間大大延長，頁面響應緩慢。
為瞭解決這些問題，可以使用DOM方法，動態載入Javascript檔案。
複製代碼 代碼如下:
　　function loadScript(url){
　　　　var script = document.createElement("script");
　　　　script.type = "text/javascript";
　　　　script.src = url;
　　　　document.body.appendChild(script);
　　}

這樣做的原理是，瀏覽器即時創造出一個<script>標籤，然後"非同步"讀取Javascript檔案。這樣不會造成頁面堵塞，但會造成另外一個問題：這樣載入的Javascript檔案，不在原始的DOM結構之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回呼函數對它無效。