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

31次阅读

共计 2170 个字符，预计需要花费 6 分钟才能阅读完成。

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

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

<script> : 当 HTML 解析过程中遇到 script 标签时，浏览器中断 HTML 解析，随即下载 script 文件，实现后立刻执行 script，执行实现后再持续 HTML 解析
<script async> : 当 HTML 解析过程中遇到 script 标签时，不会中断 HTML 解析，同时并行下载 script 文件，下载实现后中断 HTML 解析并执行 script，执行实现后再持续 HTML 解析（script 的执行程序不肯定依照 script 标签的呈现程序，而是取决于 script 下载实现的程序）
<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/…

正文完