script标签的defer和async属性

最新推荐文章于 2023-09-22 19:00:24 发布

cithegod

最新推荐文章于 2023-09-22 19:00:24 发布

阅读量872

点赞数 1

分类专栏： javaScript 文章标签： html5 html javascript async

本文链接：https://blog.csdn.net/cithegod/article/details/76560147

版权

javaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

defer & async

前提

在说defer和async两个script标签的属性之前，要先说一下浏览器对于页面进行加载的流程，浏览器渲染页面是基于两棵树进行的，分别是DOM树和render树，DOM树由HTML决定，HTML元素会被解析为一个个节点，自上而下形成一棵树；而render树是由CSS和DOM树决定的，每个节点在接收了CSS之后，会根据其所占据的空间，形成一棵render树，render树和DOM树是具有映射关系的，但是节点却不一样，比如设置display: none的元素是不具有render树节点的，render树决定的是显示在视口中的元素。

当输入网址，发出一个请求，并且服务端响应了HTML文件，这时，浏览器会对HTML文件进行解析，来逐步生成DOM树。
如果浏览器在解析HTML文件的时候遇到了外部资源，则会发送请求，来向服务器请求该外部资源。
如果资源是script脚本文件，那么DOM树的构建过程会被阻塞，直到脚本加载并且执行完毕，才会继续进行DOM树的构建。
其他资源会进行异步请求，在构建DOM树的过程中，也会同时进行render树的构建。
render树中的内容，会被布局和绘制到页面中。

那这里面有两个问题，JavaScript会阻塞页面的渲染，是如何阻塞的？CSS是否会阻塞页面的渲染呢？

测试的服务器端

使用NodeJS写一个简单的服务器来进行调试：

    const http = require('http');
    const fs = require('fs');
    const SysPath = require('path');

    const server = http.createServer((req, res) => {
      const path = req.url;
      console.log(`request file is ${path}`);
      let filePath = '';
      if (path === '/') {
        filePath = './index.html';
      } else {
        filePath = SysPath.join('./', path);
      }
      const readStream = fs.createReadStream(filePath);
      readStream.on('error', function(error) {
        res.statusCode = 404;
        res.end('file is not found');
      });
      // 这里可以选择需要延迟返回的文件，现在设置为根目录的html和index.js脚本
      // 两个元素可以直接进行返回
      if (path === '/' || path === '/index.js') {
        res.statusCode = 200;
        readStream.pipe(res);
        return;
      }
      setTimeout(function() {
        res.statusCode = 200;
        readStream.pipe(res);
      }, 5000);
    });

    server.listen('9999', function() {
      console.log(`server is listening in port 9999!!`);
    });

CSS的延迟加载情况

使用上面的服务器，请求HTML，并且将CSS引入的部分放到head标签中：

    <head>
      <link href="./main.css" rel="stylesheet" />
    </head>

可以看到，当样式表被阻塞的时候，页面的渲染也被阻塞，虽然之前div已经有了其他的样式，但是这些样式仍然不能被渲染出来。

css defer

JavaScript阻塞

JavaScript会阻塞页面的渲染大家基本上是都知道的，JavaScript会完全阻塞页面的同步渲染，为了防止这种情况发生，加快首屏显示的速度，标准里面给出了两种异步加载脚本的方法。

其中一个是defer，这个是在HTML5之前就实现了的，这个属性可以让这个外联脚本在另外一个线程中进行请求与加载，然后等待DOM树构建完成，再执行脚本。

而async和defer类似，都是在另外一个线程中进行脚本的加载，但是不同点在于，async会在脚本加载完成之后立刻进行执行。当然，脚本在执行的时候仍会阻塞掉浏览器渲染的主进程。

大概的加载流程就和下面这个图一样：

async-defer

但是async有一个很大的缺点在于，当有多个脚本同时标注为异步脚本，那么这些脚本均会在其被加载完成后直接执行，这样由于某些脚本的加载速度比较快，有些脚本的加载速度慢，会导致脚本的执行顺序和预料当中的不一致，所以有依赖关系的脚本尽量不要使用async进行加载。

而defer脚本由于是在DOMContentLoaded事件触发之后开始执行，所以脚本的执行顺序也是严格按照脚本的引入顺序进行的。

这些延迟都是针对外联脚本的，而内联脚本则不受这个属性的影响，内联脚本会直接执行，并且阻塞页面的渲染进程。

延迟脚本的执行顺序

可以修改一下服务端的代码对执行顺序进行一下验证：

    if (path === '/') {
      res.statusCode = 200;
      readStream.pipe(res);
      return;
    }
    // 对于main.js进行5s的延迟，对于index.js进行2s的延迟
    let delay = 2000;
    if (path === './main.js') {
      delay = 5000;
    }
    setTimeout(function() {
      res.statusCode = 200;
      readStream.pipe(res);
    }, delay);