常见的js动态加载技术之一是把一些逻辑独立的js脚本文件单独加载。这样做的好处是，比如可减少不必要的js脚本文件的加载，以提高网页浏览器的速度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态加载js</title>
<script type="text/javascript">
//动态加载js文件--my.js
function loadJs(){
//得到html的头部dom
var theHead = document.getElementsByTagName('head').item(0);
//创建脚本的dom对象实例
var myScript = document.createElement('script');
myScript.src = './my.js'; //指定脚本路径
myScript.type = 'text/javascript'; //指定脚本类型
myScript.defer = true; //程序下载完后再解析和执行
theHead.appendChild(myScript); //把dom挂载到头部
}
</script>
</head>
<body style="text-align:center">
<p>
<input type="button" value="动态加载JS" onclick="loadJs()"/>
</p>
</body>
</html>
my.js:
var test = function(){ alert("动态加载js文件"); } test();
点击按钮之后，执行js代码片段。
解析：本例采用动态创建的方式来动态加载js，这是较为合理的一种方式。首先，创建一个js的DOM对象，然后，为它配置好脚本的地址和类型，最后把它挂载到网页的头部，也就是head部分。只有当用户单击“OK”按钮之后，“my.js”这个脚本文件才会被加载到网页中执行。