js載入之使用DOM方法動態載入Javascript文件

傳統上，載入Javascript檔案都是使用<script>標籤。 <br/>就像下面這樣： <br/><script type="text/javascript" src="example.js"></script>

<script>標籤很方便，只要加入網頁，瀏覽器就會讀取並運作。但是，它存在一些嚴重的缺陷。 <br/>　　（1）嚴格的讀取順序。由於瀏覽器按照<script>在網頁中出現的順序，讀取Javascript文件，然後立即運行，導致在多個文件互相依賴的情況下，依賴性最小的文件必須放在最前面，依賴性最大的文件必須放在最後面，否則程式碼會報錯。 <br/>　　（2）效能問題。瀏覽器採用"同步模式"載入<script>標籤，也就是說，頁面會"阻塞"（blocking），等待javascript檔案載入完成，然後再執行後面的HTML程式碼。當存在多個<script>標籤時，瀏覽器無法同時讀取，必須讀取完一個再去讀取另一個，造成讀取時間大大延長，頁面回應緩慢。 <br/>為了解決這些問題，可以使用DOM方法，動態載入Javascript檔案。 </script>

　　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事件中指定的回呼函數對它無效。 </script>

更多js載入之使用DOM方法動態載入Javascript檔案相關文章請關注PHP中文網！