乐趣区

关于javascript:Asyncdefer以及普通加载script区别详解

jiezi

如果用一张图片诠释这几种 script 加载的特点，应该是这样的：

联合图片咱们能够将三种形式的特点总结如下：

  1. <script> : 当 HTML 解析过程中遇到 script 标签时，浏览器中断 HTML 解析，随即下载 script 文件，实现后立刻执行 script，执行实现后再持续 HTML 解析
  2. <script async> : 当 HTML 解析过程中遇到 script 标签时，不会 中断 HTML 解析，同时 并行 下载 script 文件，下载实现后 中断 HTML 解析 并执行 script，执行实现后再持续 HTML 解析（script 的执行程序不肯定依照 script 标签的呈现程序，而是取决于 script 下载实现的程序）
  3. <script defer> : 当 HTML 解析过程中遇到 script 标签时，不会 中断 HTML 解析，同时 并行 下载 script 文件，直到 HTML 解析实现再执行 script（script 的执行程序与 script 标签呈现程序 统一）

咱们能够通过一个小我的项目验证下面的论断。

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    console.time('timer');
    console.timeLog('timer', '--- Start parsing HTML');
    document.addEventListener('DOMContentLoaded', function () {console.timeLog('timer', '--- Document loaded');
    });
  </script>
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <!-- 此处省略 500 行反复元素 -->
  <script>console.timeLog('timer', '--- Start loading 1.js')</script>
  <script src='./1.js'></script>
  <script>console.timeLog('timer', '--- Start loading 2.js')</script>
  <script src='./2.js'></script>
  <script>console.timeLog('timer', '--- Start loading 3.js')</script>
  <script src='./3.js'></script>
  <!-- 此处省略 1500 行反复元素 -->
   <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <script>
    console.timeLog('timer', '--- End parsing HTML')
  </script>
</body>

</html>

1.js:

const text1 = `
  // 超长文本
`

text1.split(' ');
console.timeLog('timer', '--- 1.js excuted');

2.js:

const text2 = `
  // 超长文本
`

text2.split(' ');
console.timeLog('timer', '--- 2.js excuted');

1.js:

const text3 = `
  // 超长文本
`

text3.split(' ');
console.timeLog('timer', '--- 3.js excuted');

咱们别离应用一般、async 和 defer 的形式加载 1.js、2.js、3.js，察看控制台的打印后果：

一般:

论断：script 呈现会 中断HTML 加载，且 script 会程序的加载、执行，所有 script 执行实现后再解析 HTML。

Async:

论断：HTML 解析和 script 下载 同步 进行，script 执行会中断 HTML 解析；script 执行程序和 tag 呈现程序不肯定雷同；script 可能会在 document loaded 之后 执行。

Defer:

论断：HTML 解析和 script 下载 同步 进行；script 会在 HTML 解析实现后 和document loaded 之前 执行，且执行程序和 tag 呈现程序统一。

由以上试验可知：如果应用一般形式时通常倡议将 script 放到 <body> 的最初，免得阻塞 HTML 解析影响网页关上速度。而 defer 绝对于 async 更具劣势，不会阻塞 HTML 解析且 script 的执行程序能够预测，有一些须要事后下载执行的 script 能够应用 defer 的形式在 <head> 中援用。

本文 code 地址：https://github.com/MudOnTire/…

退出移动版