script标签中的defer与async

defer和async是script标签的两个属性，主要用于异步加载执行脚本，在不阻塞的页面文档解析前提下，控制脚本的下载和执行。

页面加载和渲染过程

1. 浏览器通过http协议请求服务器，获取html文档并开始从上到下解析，构建dom
2. 在构建dom过程中，如果遇到html文本里面引用外部资源链接，比如css、js等，会立即启用别浏览器线程下载这些静态资源。需要注意的是，当遇到js文件时，html解析会停下来，等js文件下载结束并执行完，html解析工作才会继续。但是css的加载并不会阻塞渲染过程，下载完成后会构建cssdom
3. 完成文档解析后，将dom和cssdom进行关联和映射，最后将视图渲染到浏览器窗口

script

我们需要注意的是当浏览器解析html时，遇到script引入外部js时的集中不同情况。

<script src="index.js">

在讲解页面加载和渲染过程时，有说道js的加载解析执行都是同步的会阻塞渲染，指的就是默认情况下。没有defer或async浏览器会立即加载并执行指定的脚本，"立即"指的是在渲染该script标签下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script src="index" async>

有async加载和渲染后续文档元素的过程和index.js的加载并行进行（异步），当index.js加载完毕后，会立即执行，如果这个时候html没有解析完毕会阻塞html解析，如果已经解析完毕，效果则与defer相同

<script src="index" defer>

有defer，加载后续文档元素的过程将和index.js的加载并行执行（异步），但是index.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。

加载执行时机的区别看图