首頁 > web前端 > js教程 > js載入之使用DOM方法動態載入Javascript文件

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

高洛峰
發布: 2017-02-06 09:28:29
原創
1313 人瀏覽過

傳統上,載入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中文網!

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