js載入之使用DOM方法動態載入Javascript檔_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檔案。 <BR><div class="codetitle"><span><a style="max-width:90%" data="78858" class="copybut" id="copybut78858" onclick="doCopy('code78858')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code78858"> <BR>　　function loadScript(url){ < ; document.createElement("script"); <BR>　　　　script.type = "text/javascript"; <BR>　　　　script.src = url; <BR>　　　　script.src = url; <.comd. <BR> <BR>這樣做的原理是，瀏覽器即時創造出一個<script>標籤，然後"非同步"讀取Javascript檔案。這樣不會造成頁面堵塞，但會造成另一個問題：這樣載入的Javascript文件，不在原始的DOM結構之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回呼函數對它無效。</script>