含有延迟脚本和异步脚本的网页加载流程

1、正常的网页加载流程：

（1）浏览器一边下载HTML网页，一边开始解析
（2）解析的过程中，发现<script>标签
（3）暂停解析，网页渲染控制权交给JavaScript引擎
（4）如果<script>标签引用了外部脚本，就下载该脚本，否则直接执行
（5）执行完毕，控制器还给渲染引擎，恢复往下解析HTML网页

注：
(1) js放在head中会立即执行，阻塞后续的资源下载和执行，如果外部脚本加载事件很长，就会造成网页长时间失去响应，浏览器成假死状态，这被称为“阻塞效应”。

(2)js阻塞其他资源的加载的原因是：浏览器为了防止js修改DOM树，需要重新构建DOM树的情况出现；

(3)但如果js放在body内容的最后，html不会等待js下载执行就会开始绘制，可以避免资源阻塞，同时使静态html页面迅速显示，还可以避免DOM结构还没有生成就调用Dom而报错，因为如果脚本在网页尾部加载的话，DOM一定已经生成了。

(4)js的执行依赖前面的样式。即只有当前面的样式全部下载完之后才会执行js,但是此时外链css和外链js是并行下载的。

(5)html的绘制会被css和js阻塞，html需要等head中所有的js和css加载完成之后才会绘制。

2、延迟脚本（如果外链js含有defer="true"属性）

如果外链js含有defer="true"属性，会并行加载js，<script>包含的脚本将会延迟到浏览器遇到</html>标签后再执行。如果有多个延迟脚本，按他们出现的先后顺序执行。

此时的网页加载流程为：
（1）浏览器开始解析HTML网页
（2）解析的过程中遇到带有defer属性的script标签中的外部脚本
（3）浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
（4）浏览器完成解析HTML网页，此时再执行下载的脚本
注：defer属性只适用于外部脚本

3、异步脚本（如果外链的js含有async="true"属性）

async="true"属性告诉浏览器，js不会修改dom和样式，故不依赖其它的js和css，因此js下载之后立即执行。
async="true"属性的目的是不让页面等待脚本的下载和执行，而是使用另一个进程下载脚本，下载时不会阻塞渲染。因此async属性可以保证脚本下载的同时，浏览器继续渲染。

此时的网页加载流程为：
（1）浏览器开始解析HTML网页
（2）解析的过程中遇到带有async属性的script标签
（3）浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
（4）脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本
（5）脚本执行完毕，浏览器恢复解析HTML网页

注：同样与 defer 类似，async 只适用于外部脚本文件，并告诉浏览器立即下载文件。但与 defer 不同的是，标记为 async 的脚本并不保证按照指定它们的先后顺序执行。哪个脚本先下载结束，就先执行那个脚本。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。