详解defer和async的原理及应用

快来打我* 2022-08-21 08:59 87阅读 0赞

`defer`和`async`是`script`标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。  
在介绍他们之前，我们有必要先了解一下页面的加载和渲染过程：  
1. 浏览器通过HTTP协议请求服务器，获取HMTL文档并开始从上到下解析，构建DOM；  
2. 在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件；  
3. 样式文件下载完成后，构建CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM  
4. 完成文档解析后，将DOM和CSSDOM进行关联和映射，最后将视图渲染到浏览器窗口  
在这个过程中，脚本文件的下载和执行是与文档解析同步进行，也就是说，它会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。  
所以我们需要清楚的了解和使用`defer`和`async`来控制外部脚本的执行。  
在开发中我们可以在`script`中声明两个不太常见的属性：`defer`和`async`，下面分别解释了他们的用法：  
`defer`：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。  
`async`：HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。  
为了演示脚本的执行情况，进而介绍这两个属性的作用，我们先来搭建一个简单的服务器：  
![20160429105544639][]  
如图所示，我们创建一个`app`目录，用于放置一些简单的Web资源，同时创建了一个简易的Node服务器`server.js`，其代码如下：

从上面的代码我们可以看出，当服务器接收到请求之后，会判断请求资源是否为JS，如果是则延迟1s后返回对应的资源。  
启动这个服务很简单，只需执行`node server.js`即可，然后就可以在浏览器中输入`http://localhost:3000/app/index.html`访问主页了，现在我们来看看`index.html`中的内容：

<!DOCTYPE html>
    <html>
        <head>
            <title>defer & async</title>
            <link rel="stylesheet" type="text/css" href="css/main.css">
            <script type="text/javascript" src="js/1.js"></script>
        </head>
        <body>
            <div class="text">Hello World</div>
            <script type="text/javascript" src="js/2.js"></script>
        </body>
    </html>

在这个HTML文档中，我们先在`head`中引用了一个外部的脚本文件`js/1.js`，然后在我们要显示的Hello World后面又引用了一个`js/2.js`，它们的内容都很简单，就是弹出对应的标示信息：

// js/1.js
    alert(1);
    
    // js/2.js
    alert(2);

下面我们就来访问主页，看看会发生些什么：  
![20160429111049567][]  
从图中可以看到，渲染的过程的确是自上而下，同步进行的，也就是说遇到外部的脚本，就得暂停文档的解析，下载并且解释执行，这种方式是阻塞的，会造成网页空白的现象。  
现在稍微修改一下代码，将`head`中的`script`标签加上`defer`属性，然后也稍微改动一下两个JS文件：

// js/1.js
    console.log(1);
    
    // js/2.js
    console.log(2);

再次访问`index.html`，我们会在控制台中看到下面的执行顺序：  
![20160429122104500][]  
显而易见，`1.js`被延后致至文档解析完成后执行了，它的执行顺序比`body`中的`<script>`还要靠后。与默认的同步解析不同，`defer`下载外部脚本的不是阻塞的，浏览器会另外开启一个线程，进行网络连接下载，这个过程中，文档解析及构建DOM仍可以继续进行，不会出现因下载脚本而出现的页面空白。  
关于`defer`我们需要注意下面几点：  
1. `defer`只适用于外联脚本，如果`script`标签没有指定`src`属性，只是内联脚本，不要使用`defer`  
2. 如果有多个声明了`defer`的脚本，则会按顺序下载和执行  
3. `defer`脚本会在`DOMContentLoaded`和`load`事件之前执行  
我们稍微改动一下代码，验证一下上面的几条：

<!DOCTYPE html>
    <html>
        <head>
            <title>defer & async</title>
            <link rel="stylesheet" type="text/css" href="css/main.css">
            
            <script type="text/javascript" src="js/1.js" defer></script>
            <script type="text/javascript" src="js/2.js" defer></script>
            <script type="text/javascript" defer>
                console.log(3);
            </script>
        </head>
        <body>
            <div class="text">Hello World</div>
    
            <script type="text/javascript">
                document.addEventListener("DOMContentLoaded", function() {
         
                    console.log('dom content loaded, ready state:', this.readyState);
                }, false);
    
                window.addEventListener('load', function() {
         
                    console.log('window loaded, dom ready state:', document.readyState);
                }, false);
            </script>
        </body>
    </html>

上面代码中，`head`中所有的`script`标签都加上了`defer`，其中第三个是内联脚本，然后我们也添加了`DOMContentLoaded`和`load`事件，下面来看一下打印的结果：  
![20160503095354803][]  
可以看到，外联的脚本是按照声明顺序执行的，内联脚本并没有遵守这个规则，另外，`DOMContentLoaded`和`load`事件依次被捕获，`DOM`的状态分别变为`interactive`和`complete`。

接下来我们介绍一下`async`属性，为了能够很好的演示执行顺序，我们还需要一些修改：

<!DOCTYPE html>
    <html>
        <head>
            <title>defer & async</title>
            <link rel="stylesheet" type="text/css" href="css/main.css">
            
            <script type="text/javascript" src="js/1.js" async></script>
            <script type="text/javascript" src="js/2.js" async></script>
            <script type="text/javascript" src="js/3.js" async></script>
        </head>
        <body>
            <div class="text">Hello World</div>
        </body>
    </html>

JS文件内如下：

// js/1.js
    console.log(1);
    
    // js/2.js
    console.log(2);
    
    // js/3.js
    console.log(3);

再次访问`index.html`，会发现控制台打印如下：  
![20160429125534090][]  
我们发现，3个脚本的执行是没有顺序的，我们也无法预测每个脚本的下载和执行的时间和顺序。`async`和`defer`一样，不会阻塞当前文档的解析，它会异步地下载脚本，但和`defer`不同的是，`async`会在脚本下载完成后立即执行，如果项目中脚本之间存在依赖关系，不推荐使用`async`。  
关于`async`，也需要注意以下几点：  
1. 只适用于外联脚本，这一点和`defer`一致  
2. 如果有多个声明了`async`的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序  
3. `async`会在`load`事件之前执行，但并不能确保与`DOMContentLoaded`的执行先后顺序

下面这两张图可以更清楚地阐述`defer`和`async`的执行以及和`DOMContentLoaded`、`load`事件的关系：  
![20160503104416135][]  
图片来源：[Asynchronous and deferred JavaScript execution explained][]

![20160503101844263][]  
图片来源：[Running Your Code at the Right Time][]

以上就是`defer`和`async`的介绍，了解和掌握这两个属性的作用，不仅对JS代码执行的控制更加熟练，也会对页面渲染多一分了解。

[20160429105544639]: /images/20220724/98ec6e3991c6494c801edcef75b7a16a.png
[20160429111049567]: /images/20220724/3de2e995f97a493aae9ad2f0ceeb9efb.png
[20160429122104500]: /images/20220724/8629a116864c43eb8b18340f810d761d.png
[20160503095354803]: /images/20220724/8f45bec6b2dc4bad8f5b4c7b6977ade5.png
[20160429125534090]: /images/20220724/722d164ca6b042c6a57b12fff48faa63.png
[20160503104416135]: /images/20220724/f0de99037ae547ec84c5d906712f318c.png
[Asynchronous and deferred JavaScript execution explained]: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/
[20160503101844263]: /images/20220724/423f8377b9f74c89858d6661592c7147.png
[Running Your Code at the Right Time]: https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm