异步加载和js时间线

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把 < script > 标签放在< body>结尾处，这样尽可能减少页面阻塞。
异步在加载的过程中产生一个子进程去加载当前程序，自己去执行下一个程序
特点：单线程的异步就是多线程，只不过用异步的方式表现出来了
异步加载的三种方式
第一种方式：

<script  defer="defer"></script>

第二种方式：（只能加载src中的脚本，不能把代写在script标签中）

<script async="async"  src="js/logo.js"></scipt>

注意：不要在这里写代码
第三种方式：除了以上两种方法，还有一种兼容自己封装的异步加载方式，即动态添加script标签也能实现异步加载。

<script>
      //异步的过程
      var script = document.createElement("script");
      script.src = "js/logo.js"; 
      document.head.appendChild(script);
</script>

js加载时间线
1.创建Documen对象开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’ 。
2.遇到link外部css,创建线程加载，井继续解析文档。
3.遇到script外部js，并且没有设置async，defer, 浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4.遇到script外部js.并且设置有async， defer, 浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。(异步禁止使用document.write()，因为它会清除文档流）
5.遇到img等，先正常解析dom结构，然后浏览器异步加载src,并继续解析文档。
6.当文档解析完成，document.readyState = ‘Interactive’。
7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。(注意 async的不同，但同样禁止使用document.wite()) ;
8.document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
9.当所有async的脚本加载完成井执行后。img等加载完成后，document.readyState = ‘complete’, window对象触发load事件。
10.从此，以异步响应方式处理用户输入，网络事件等。
js时间线：第一步生成document对象，代表js可以运行了，第二步就是文档解析完了，第三步就是文档加载完了并且执行完了
所以
1.JS最好放在文档下面加载，不会阻塞页面的正常解析；
2.工具类的JS 可以放在head里面，但要异步加载；
3.window.onload事件，是要等所有加载完成后才触发（如果有一张图片一直无法加载，就会一直等待）,效率最低，所以，最好是把主程序代码放到文档解析完成后开始执行

document.addEventListener('DOMContentLoaded', function(){
//代码块
},false)