首頁 > web前端 > js教程 > js載入之使用DOM方法動態載入Javascript檔_javascript技巧

js載入之使用DOM方法動態載入Javascript檔_javascript技巧

WBOY
發布: 2016-05-16 17:16:48
原創
867 人瀏覽過

傳統上,載入Javascript檔案都是使用<script>標籤。 <BR>就像下面這樣: <BR><script type="text/javascript" src="example.js"></script>
js載入之使用DOM方法動態載入Javascript檔_javascript技巧 
<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>

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板