引入js文件的声明通常写在head里面如：

<head>
.....
<script type="text/javascript" src="js1.js"></script>
<script type="text/javascript" src="js2.js"></script>
</head>

这时候js文件是并行下载到浏览器的，执行的时候是按顺序执行的，js文件的下载和执行会阻断页面的渲染，所以有很多页面是把js文件的引入写在<body>里面或者后面

要实现js的动态加载首先想到的就是利用document.write()将js引入动态声明，或者将<script>元素动态的加到<head>里面

function loadjs(script_name){
  var obj = document.createElement("script");
  obj.setAttribute("type","text/javascript");
  obj.setAttribute("src",script_name);
  obj.setAttribute("id", "script_id");
  var script = document.getElementById("script_id");
  if(script){
  document.getElementsByTagName("head")[0].removeChild(script);
  }
  document.getElementsByTagName("head")[0].appendChild(obj);
  }

这样可以实现js文件的动态引入，下一个问题就是何时引入js，如果在页面初始化的时候引入，就失去了动态引入的意义，js代码的执行都是事件驱动的，可以在某个事件触发的时候再去执行js文件的引入。这样又会出现一个新的问题，当执行某个操作后js文件被动态引入，此时js代码会先下载到浏览器然后再执行，这样就降低了js运行的效率，得不偿失。解决这个问题的关键是让js代码动态执行，js的下载和执行分开，这样一种"preload"方式可以通过下面的代码实现

<object  data="loadjs.js"  width="0" height="0">

或者是动态的向<body>里面添加<object>标签，这样就会提前把js文件下载到浏览器的缓存，待需要执行的时候，在让浏览器加载这个文件

function cacheJS(script_name){
var obj=document.createElement("object");
obj.data=script_name;
obj.width=0;
obj.height=0;
document.body.appendChild(obj);
}