javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > script标签的异步加载

script标签的异步加载async、defer、type="module"全面解析

作者：FarmerLiusun

script标签用来在网页中执行JavaScript,它可以直接包含JavaScript代码,也可以直接通过src指向一个同域或者不同域的外链,这篇文章主要介绍了script标签异步加载async、defer、type="module"的相关资料,需要的朋友可以参考下

本文主要是分享一下，关于加载script多种方式及区别

众农周知，浏览器解析html时，如果遇到使用 <script src="index.js"></script> 加载js时，html的解析会被阻塞，这个时候会先去下载index.js，等待下载完并执行完js之后，然后再继续解析html。这样的话，如果js下载时间过长，无疑会增加页面的渲染时间，那么，有没有啥办法可以让解析html与下载js并行执行呢？有的，并且提供了多种。

1.五种加载方式深度解析

1.1 同步加载<script src="index.js"></script>

特点

不推荐使用

适用场景

  1. 传统的加载script方式，需要兼容低版本浏览器
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 同步加载且阻塞解析html -->
   <script src="index.js"></script>
  </head>
  <body>
  </body>
</html>

1.2 异步加载，使用defer属性

特点

适用场景

  1. 加载的js存在依赖关系，须按顺序执行
  2. 加载的js需要操作DOM
  3. 常见vue、react项目中，构建工具已自动处理，编译后自动添加defer属性
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/test/favicon.ico" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <title>xxxxx管理系统</title>
    
    <!-- 异步加载，优先执行第三方依赖 -->
    <script defer="defer" src="/test/js/chunk-vendors.0821bbb1.js"></script>
    <!-- 异步加载，上面的js执行完再执行 -->
    <script defer="defer" src="/test/js/app.566a7ad5.js"></script>
    
    <link href="/test/css/chunk-vendors.ff7db5f3.css" rel="external nofollow"  rel="stylesheet" />
    <link href="/test/css/app.0d1bd94e.css" rel="external nofollow"  rel="stylesheet" />
  </head>

  <body>
    <noscript
      ><strong
        >System doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
  </body>
</html>

1.3 异步加载，使用async属性

特点

适用场景

  1. 加载的js没有赖关系，单独执行
  2. 加载的js无需操作DOM
  3. 常用于分析、广告、埋点脚本加载
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/test/favicon.ico" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <title>xxxxxx官网</title>
    
    <!-- 异步加载，独立运行，无脚本依赖 -->
    <script async src="https://www.guanggao.com/gg/js?id=GG_1"></script>
    <script async src="https://www.guanggao.com/gg/js?id=GG_2"></script>
  </head>

  <body>
    <noscript
      ><strong
        >System doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
  </body>
</html>

1.4 异步加载，使用type="module"属性

特点与defer差不多

适用场景 与defer差不多

  1. 加载的js存在依赖关系，须按顺序执行
  2. 加载的js需要操作DOM
  3. 使用esm开发的脚本
  4. 常见使用vite构建的vue、react项目中，编译后自动添加type="module"属性
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/test/favicon.ico" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <title>xxxxxx系统</title>
    
    <!-- 异步加载，使用esm开发 -->
    <script type="module" crossorigin src="/assets/index-BmxZ5FsG.js"></script>
  </head>

  <body>
    <noscript
      ><strong
        >System doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
  </body>
</html>

1.5 异步加载，使用type="module" async属性

特点与async差不多

适用场景 与async差不多

  1. 加载的js没有赖关系，单独执行
  2. 加载的js无需操作DOM
  3. 常用于分析、广告、埋点脚本加载
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/test/favicon.ico" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <title>xxxxxx官网</title>
    
    <!-- 异步加载，使用esm开发，独立运行，无脚本依赖 -->
    <script type="module" async src="https://www.guanggao.com/gg/js?id=GG_1"></script>
  </head>

  <body>
    <noscript
      ><strong
        >System doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
  </body>
</html>

2.总结

2.1.加载script的5种方式：

2.2.各方式差异：

加载方式执行时机是否阻塞HTML解析执行顺序适用场景
<script>立即执行是文档顺序传统脚本
<script defer>DOM解析后否文档顺序依赖DOM的脚本
<script async>下载完成后下载不阻塞，执行可能阻塞无序独立第三方脚本
<script type="module">DOM解析后否文档顺序ES模块化代码
<script type="module" async>下载完成后下载不阻塞，执行可能阻塞无序独立ES模块

2.3.加载流程图：

2.4.使用建议：

 总结

到此这篇关于script标签的异步加载async、defer、type="module"的文章就介绍到这了,更多相关script标签的异步加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文