JS时间线

浏览器解析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)

}