继上一篇“浅谈js加载的时间线”下面来讲一下关于异步加载的几种方式
第一种延迟脚本defer
HTML4.01为<script>标签定义了defer属性，这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完毕后再运行，因此在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行
例如:在下面代码中将外部js放到<head>里，然后设置defer="defer"属性
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>PISMDB</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--<!– Fonts–>-->
<link rel="stylesheet" type="text/css" href="./assets/css/reset.css" th:href="@{/static/assets/css/reset.css}">
<!--<!– Vendors–>-->
<link rel="stylesheet" type="text/css" href="./assets/vendors/bootstrap/bootstrap.min.css"
th:href="@{/static/assets/vendors/bootstrap/bootstrap.min.css}">
<!-- css -->
<link rel="stylesheet" type="text/css" href="./assets/css/main.css" th:href="@{/static/assets/css/main.css}">
<script src="./assets/vendors/_jquery/jquery-3.3.1.min.js" defer="defer"></script>
<script type="text/javascript" src="./assets/vendors/_jquery/jquery.SuperSlide.2.1.3.js" defer="defer"></script>
<script src="./assets/vendors/bootstrap/bootstrap.min.js" defer="defer"></script>
</head>
<body>
<!-- 定义头部 -->
<div class="head">
...
在浏览器中执行代码通过network可查看，js的加载是按照顺序来进行加载。
然后查看js的执行顺序
添加代码：readyState代表dcument的状态，监听在文档加载时的状态变化，DOMContentLoaded事件在文档解析完成后的某个时间进行触发
<script type="text/javascript">
console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState);
}
console.log("这是js执行的");
document.addEventListener('DOMContentLoaded',function(){
console.log('DOMContentLoaded 触发了');
},false)
浏览器执行结果如下：js在DOMContentLoader触发之前进行加载
在上面例子中，虽然我们把<script>元素放到了文档的<head>元素中，在此处进行加载，但是执行却延迟到浏览器遇到</html>标签后再执行，HTML5规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，第二个先于第三个延迟脚本执行，而这三个脚本会先于DOMContentLoaded事件执行。
在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本
defer属性只适用于外部脚本文件，这一点在HTML5中已经明确规定，因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。IE4~IE7还支持对嵌入脚本的defer属性，但是IE8及之后的版本则完全支持HTML5规定的行为，因此将延迟脚本放在页面底部是最佳选择
第二种HTML5为<script>元素定义的async属性
这个属性与defer属性类似，都用于改变处理脚本的行为，同样与defer类似，只适用于外部脚本文件，并告诉浏览器立即下载文件，但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行
例如：将外部js脚本设置为async属性
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>PISMDB</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--<!– Fonts–>-->
<link rel="stylesheet" type="text/css" href="./assets/css/reset.css" th:href="@{/static/assets/css/reset.css}">
<!--<!– Vendors–>-->
<link rel="stylesheet" type="text/css" href="./assets/vendors/bootstrap/bootstrap.min.css"
th:href="@{/static/assets/vendors/bootstrap/bootstrap.min.css}">
<!-- css -->
<link rel="stylesheet" type="text/css" href="./assets/css/main.css" th:href="@{/static/assets/css/main.css}">
<script src="./assets/vendors/_jquery/jquery-3.3.1.min.js" async></script>
<script type="text/javascript" src="./assets/vendors/_jquery/jquery.SuperSlide.2.1.3.js" async></script>
<script src="./assets/vendors/bootstrap/bootstrap.min.js" async></script>
<!-- -->
</head>
在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行，因此确保它们之间互不依赖非常重要
异步脚本一定会在页面的load事件之前执行，但可能会在DOMContentLoaded事件触发之前或者之后执行。
第三种动态的创建script的标签(可以解决兼容h5以及低版本ie的问题)
<script type="text/javascript">
function asyncLoaded(url,callback){
var script = document.createElement("script");
// script.src = url; 假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readyState =="loaded"){
// 执行某个函数
callback()
}
}
}else{
script.onload = function(){
// 执行某个函数
callback()
}
}
script.src = url; //异步的过程
document.head.appendChild(script)
}
asyncLoaded("05.js",function(){
fn() //05.js中的函数
})
</script>
这种方式的缺点就是要清楚文件的加载顺序，当js文件多了，依赖关系复杂的时候，很难管理加载的依赖顺序
