JS时间线及异步加载三种方法

JS时间线及异步加载

时间线是什么样的一个步骤呢
1、先创建一个document对象，浏览器开始去解析你的html页面，document.readyState=‘loading’

2、当遇到外部资源（外部js文件、外部css文件、外部的图片、以及一些标签的href）的时候，除了script标签中的src（当没有设置async、defer）为同步，其余的全部为异步（主线程去调子线程完成）
dom解析完以后document.readyState=‘interactive’
（外部资源可能还没下载完成）

3、当外部资源全部下载完成后，document.readyState=‘complete’
window触发load事件
DOMContentLoaded 这是唯一一个有大写字母的事件名称

我们来看一个例子

明明我先写的是load事件，却先打印的是DOMContentLoaded事件，就是因为时间线加载的问题，这也明显的反应了时间线的加载过程

JS异步加载的三种方法
1、defer 仅限IE
2、async HTML5中新增属性
3、按需加载
创建script标签
为其设置src属性
成为异步后再插入到dom中