浏览器解析html页面过程中，整个js运行的状态分为三个：
1、loading 页面开始解析的准备
2、interactive 页面解析中
3、complete 解析完成
由于js可以在页面的任何位置写入，所以页面解析遇到js也会对应解析，但是运行到js的时候会导致页面的阻塞，js执行的过程中，终止了html结构编译与渲染。
js分同步引入和异步引入
同步引入
同步引入<script src="1.js"></script> 同步 下载 -> 执行 （html parsing 暂停）页面阻塞
使用场景：没有模块依赖，防止独立js业务逻辑，体量较小的js代码
异步引入
<srcipt async src="1.js"></script> 下载文件（html parsing)->执行（html parsing 暂停）
使用场景：js 模块文件 有关联,有普通js模块与之关联（1.js 被 2.js关联）
<srcipt defer src="1.js"></script> 下载文件（html parsing)->html parsing(interactive) ->执行 不会导致页面阻塞
使用场景：js模块依赖1.js 1.js依赖另外一个模块
页面阻塞的前提是不把引入放置在body外和script在body内部
页面解析的三个状态
1、loading 页面开始解析的准备
domtree树
创建了document ,节点 、文本，准备将所有节点注入到document中
document.readState = loading;
2、interactive 页面解析中
解析html
1、遇到css(头部样式、link)，独立开启一个线程下载 ；创建cssDom继续解析
2、遇到js：<script></script>或者<script src="1.js">，终止解析（html解析阻塞)
<script></script>:一边读取一边执行
<script src="1.js">:先下载，执行js
3、遇到js:<srcipt async src="1.js"></script>(异步：独立一个线程)，继续解析（边解析边下载），文件下载完毕会立即执行js(js执行，解析停止:html解析阻塞),js执行完毕继续解析。
4、遇到js：<srcipt defer src="1.js"></script>,继续解析（不会引起阻塞）
defer(会先下载文件），html解析完毕后再执行js
5、继续解析、img iframe等，会先解析结构；src异步处理下载资源
6、html 结构解析完成
document.readState = interactive:
底层会触发一个事件：DOMContentLoaded(只能用事件监听器绑定）
3、complete 解析完成
1、填充图片、资源填充
document.readState = complete
2、html 结构解析+资源解析完毕 自动触发onload
window.onload = function(){
console.log(document.readState)
}
获取页面解析状态
document.readState
onreadystatechange(事件、监听对象的状态变更触发）
监听某个对象状态变更的方法:
docunmet.onreadystatechange=function(){
console.log(document.readState)
}
