javascript按顺序加载运行js方法
首先如果大家对JS动态加载有不理解的地方可以参阅：
javascript动态加载实现方法
动态加载JS文件的三种方法
如何你的script上没有任何异步,阻塞等标注:
浏览器会异步加载javascript文件,但是会按照引用文件中的书写顺序从上到下执行解析javascript
Defer属性标记
defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。
也就是说defer属性的script就类似于将script放在body中的加载效果一致.
但是defer属性在各个浏览器中支持程度有点不同,就是说,有的浏览器不完全支持.
Async属性标注
async是HTML5新增的属性，大部分先进支持该属性的.
该属性的作用是让脚本能异步加载，也就是说当浏览器遇到async属性的script时浏览器加载css一样是异步加载的
javascript动态加载js文件
原理很简单,创建一个script节点,给节点赋予script的属性,然后append到dom的head标签中.
functionloadJS(url){
varScript=document.createElement('script');
Script.setAttribute('src',url);
Script.setAttribute('type','text/javascript');
document.body.appendChild(Script);
returnScript;
}
如果我们同时加载多个javascript文件
loadJS('a.js');
loadJS('b.js');
上面的效果是,a.js和b.js文件会被异步同时加载,如果b.js文件比a.js文件小的话,很可能先加载执行b.js,完全不会按照书写结果加载执行
所以,如果你的b.js文件有依赖a.js的东西,那么就会报错,因为解释执行b.js的时候,a.js还在加载中.
控制javascript加载执行顺序
我们对代码做如下改进
functionloadJS(url,success){
vardomScript=document.createElement('script');
domScript.src=url;
success=success||function(){
};
domScript.onload=domScript.onreadystatechange=function(){
if(!this.readyState||'loaded'===this.readyState||'complete'===this.readyState){
success();
this.onload=this.onreadystatechange=null;
this.parentNode.removeChild(this);
}
}
document.getElementsByTagName('head')[0].appendChild(domScript);
}
通过script节点上的onload和onreadystatechange属性来监听节点src是否加载完成
如果成功,调用回调函数success();
我们在调用此方法的时候,可以通过loadJS回调函数来知道当前节点已经加载完成,然后在回调函数里继续加载其他script文件
loadJS(getUrl('a.js'),function(){
loadJS(getUrl('b.js'),function(){
console.log('a.js,b.js加载完成');
});
});
通过上面的方法加载,是一种同步阻塞加载,a.js加载完成后才会加载执行b.js文件.
如果你的javascript文件没有相互依赖关系,不要使用这种方法.