一般來說如果一次性的載入所有需要的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 Document
function sayHello(){
alert("Hello World!成功載入JavaScript文件");
}