异步加载和js时间线

Js的加载方式有异步加载和同步加载。
一.同步加载
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般把

 <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.js"></script>

二.异步加载
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。
1、defer 异步加载：加载后续文档元素的过程和JS的加载是并行进行（异步）的，但是JS的执行在所有元素解析完成之后进行，而且它是按照加载顺序执行脚本的

<script src="js/common.js" defer="defer"></script>

2、aysnc ：加载和渲染后续文档的过程和当前JS的加载与执行并行进行（异步），它是乱序执行的，不管你声明的顺序如何，只要它加载完了就会执行

<script src="js/common.js" async="async"></script>

3.按需加载。

  demo2.js文件
　　function test(){
　　　　console.log(a);
}
 
<script>
　　var script = document.createElement('script'); 　　//创建
　　script.type = 'text/javascript'; 　　　　　　　　　//设置
　　var src = "dmeo2.js"; 　　　　　　　　　　　　//下载文件，当下载时它会发送请求，发请求过程中，页面已经解析完,系统解析很速度很快 ps:引入dmeo2.js文件
　　document.head.appendChild; 　　　　　　　　//以下两行，不会执行到，所以会报test未定义
　　test();
</script>

js加载线
1、创建document对象，开始解析页面。创建HTMLHtmlElement对象，添加到document中。此时，document.readyState = ‘loading’，准备进入加载阶段。
2、遇到link外部css，创建线程加载，并继续解析文档。并发；
3、遇到script外部js，并设置有async、defer属性。创建线程加载，并继续解析文档。这里，实际上是通过 document.createElement(‘script’) 方式动态插入script元素，来模拟async属性（异步），实现了脚本异步加载和执行。而defer属性（延迟）是指创建线程加载，等到DOM结构加载完成后才会执行。
4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档；
defer属性设置后，表示加载script外部js和解析html页面是异步，并且等到html解析完成再执行js解析后的代码；

async属性设置后，表示加载script外部js和解析html页面是异步，但是当js解析完成，立刻执行它，此时html解析是被阻塞的；

document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行；
5.遇到img标签等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档
6.当文档解析完成，document.readyState = “interactive”；
7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。
8…当文档解析完成之后，document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段
9.当所有saync的脚本加载完成并执行后，img等加载完成后，document.readyState = “complete” window对象触发load事件
10.从此，页面以异步响应方式处理用户输入，网络事件等。