js 事件线， 异步引入

 

js时间线：
浏览器解析html页面过程中，整个js运行的状态。
三个状态：
 loading  : 页面开始解析的准备
  domtree树
  创建了document ,节点 、文本，准备将所有节点注入到document中
  document.readState = loading;

 interactive：页面解析中
 解析html ：
  1、遇到css（头部样式、link）,独立开启一个线程下载 ；创建cssDom继续解析
  2、遇到js ：<script></script>或者<script src="1.js"> ,终止解析（html解析阻塞） 
    <script></script>：一边读取 一边执行
    <script src="1.js">：先下载，执行js
  3、遇到js ：<script async src="1.js"></script> (异步：独立一个线程) ，
  继续解析（边解析边下载），文件下载完毕会立即执行js(解析停止：html解析阻塞)，带js
  执行完毕继续解析。
  4、遇到js ：<script defer src="1.js"></script>,继续解析（不会引起阻塞）
   defer（会先下载文件）,html解析完毕后在执行js
  5、继续解析、img iframe等 会先解析结构；src 异步处理下载资源
  6、html 结构解析完成 
   document.readState = interactive：
   底层会触发一个事件：DOMContentLoaded (只能用事件监听器绑定)

 complete：解析完成
 1、填充图片、资源填充
  document.readState=complete

获取页面解析状态：
document.readState
onreadystatechange（事件、监听对象的状态变更触发）

<script src="1.js"></script>  同步 下载- 执行（html parsing 暂停） 页面阻塞

 
js 异步引入：
下载文件(html parsing)->执行(html parsing 暂停)
<script async="async" src="1.js"></script> 

下载文件(html parsing)->html parsing(interactive) ->执行 不会导致页面阻塞
<script defer="defer" src="1.js"></script>

使用场景：（不把引入放置body外）
没有模块依赖，放置独立js业务逻辑，体量较小的js代码
<script src="1.js"></script>

js 模块文件 有关联 ，有普通js模块与之关联（1.js 被2.js关联）
<script  src="2.js"></script>
<script async src="1.js"></script>

js模块依赖1.js 1.js依赖另一个模块
<script defer="defer" src="1.js"></script>

阻塞：js 执行的过程中 ，终止了 html结构编译与渲染。
 1、解释性： 一边读取一边编译
 2、单线程： 占用主线程导致  html结构编译与渲染停止；  
     异步：独立开辟线程运行