JS异步加载的方式

今天又在JS异步加载的方式上出错了，所以又来复习一下JS异步加载

想要更加深刻的了解异步加载，我就得更深入了解JS加载的时间线，
所以我整理了一下我对JS时间线的理解。
首先，JS的时间线是在JS出生的那一刻开始记录所有浏览器按照顺序做的事，就是加载的顺序，可以用来优化什么。

1. 创建document对象，开始解析web页面
2. 遇到link外部css，创建线程加载，并继续解析文档
3. 遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4. 遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
5. 当文档解析完成，document.readyState = ‘interactive’。先解析完，再加载完，然后状态位变为interactive
6. 文档解析完成后，所有设置有defer的脚本会按照顺序执行。
7. document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
   例：同时打印出a和complete,而且onDOMContentLoaded是不好使的，只有绑定在addEventListener才好用。

console.log(document.readyState);
document.onreadystatechange = function(){
   
    console.log(document.readyState);