一般來說如果一次性的載入所有需要的JavaScript代碼，就會造成初始網頁打開速度變慢，但是很多載入的代碼又並不需要使用，這種無謂的性能浪費應該予以避免。如果要動態載入JavaScript代碼,可以利用DOM模型在HTML文檔中添加<script>結點，並將此結點的src屬性（即外聯Javascript文件）設置為需要動態載入的JavaScript代碼。
下面就是完成這樣功能的一個示例：
(1)、新建JsLoaderTest.html文件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>按需載入JavaScript代碼的例子</title> <script type="text/javascript"> function JsLoader(){ this.load=function(url){ //獲取所有的<script>標記var ss=document.getElementsByTagName("script"); //判斷指定的文件是否已經包含，如果已包含則觸發onsuccess事件並返回for (i=0;i<ss.length;i++){ if (ss[i].src && ss[i].src.indexOf(url)!=-1){ this.onsuccess(); return; } } //創建script結點,並將其屬性設為外聯JavaScript文件s=document.createElement("script"); s.type="text/javascript"; s.src=url; //獲取head結點，並將<script>插入到其中var head=document.getElementsByTagName("head")[0]; head.appendChild(s); //獲取自身的引用var self=this; //對於IE瀏覽器，使用readystatechange事件判斷是否載入成功//對於其他瀏覽器，使用onload事件判斷載入是否成功//s.onload=s.onreadystatechange=function(){ s.onload=s.onreadystatechange=function(){ //在此函數中this指針指的是s結點對象，而不是JsLoader實例, //所以必須用self來調用onsuccess事件，下同。 if (this.readyState && this.readyState=="loading") return; self.onsuccess(); } s.onerror=function(){ head.removeChild(s); self.onfailure(); } }; //定義載入成功事件this.onsuccess=function(){}; //定義失敗事件this.onfailure=function(){}; } function btnClick(){ //創建對象var jsLoader=new JsLoader(); //定義載入成功處理程序jsLoader.onsuccess=function(){ sayHello(); } //定義載入失敗處理程序jsLoader.onfailure=function(){ alert("文件載入失敗！"); } //開始載入jsLoader.load("hello.js"); } </script> </head> <body> <label> <input type="submit" name="Submit" onClick="javascript:btnClick()" value="載入JavaScript文件"> </label> </body> </html>(2)、新建hello.js文件,包含如下代碼：
// JavaScript Document function sayHello(){ alert("Hello World!成功載入JavaScript文件"); } // JavaScript Documentfunction sayHello(){ alert("Hello World!成功載入JavaScript文件"); }