同步加载
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。
<script src="http://xxx/script.js"></script>
<!--所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。-->
异步加载
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。
defer
<script src="http://xxx/script.js" defer></script>
<!--要等dom文档全部解析完（dom树生成）才会被执行。-->
async
<script src="http://xxx/script.js" defer></script>
<!--加载完就执行;async只能加载外部脚本，不能写js到标签里。-->
Script DOM Element
这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。
以下是封装函数兼容性的异步加载js文件，并且可以按需执行该文件里面的函数（按需加载）
<script>
function loadScript(url,callback){
//url是按需加载的js文件
//callback是按需加载的js文件中某个函数
// 1. 创建一个script标签
var script = document.createElement('script');
// 处理ie的兼容
if(script.readyState){
script.onreadystatechange = function(){
// 如果script已经下载完成
if(script.readyState == 'complete' || script.readyState == 'loaded'){
callback();
}
}
}else{
// 监听script的下载的状态 当状态变为下载完成后 再执行callback
script.onload = function(){
callback();
}
}
//在后面引入的目的是如果在IE上如果下载太快（比读程序还快）
//IE的readystatechange 事件检测状态码的时候，它早已经从loading变成complete或者loaded（以极快的速度加载完了文件，你还没来得及检测）
// 那你再检测它就不会变了，它一直都是complete或者loaded
//这个时候就是马后炮了，检测也没用了。
// 2. 给script标签添加src 引入一个js文件
script.src = url;
// 3. 追加到body
document.body.appendChild(script);
}
</script>
补充：document三个状态
document.readyState === "loading" //表示document仍在加载
document.readyState === "interactive"//文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
interactive //活跃状态，dom树绘制完成
document.readyState === "complate" T文档和所有子资源已完成加载。状态表示 [load]