标签script属性defer、async、type教程

星光不问赶路人
177 阅读1分钟

属性defer & async

defer属性可以让JavaScript文件在异步加载的同时保证顺序

defer属性会推迟对DOMContentLoaded事件的执行，直到所有设置了defer属性的JavaScript文件都加载完毕。

属性type

内联的<script>元素有一个特性，就是如果定义的type类型不标准，那么此时<script>元素里面的文本内容就会按照普通的文本字符串进行渲染，而不再是JavaScript代码。

属性值module

设置了type="module"的<script>元素是异步加载与执行的，异步但保证顺序，和defer属性的表现类似

属性值importmap

type="importmap"可以被看成JavaScript模块化加载的进阶用法。

Import Maps的设置必须在所有模块JavaScript的前面进行。

当导入 JavaScript 模块时，import 语句和 import() 运算符都有一个“模块标识符”，其指示要导入的模块。浏览器必须能够将此标识符解析为绝对路径，才能导入模块。

使用 scopes 键提供映射，仅当导入模块的脚本包含特定的 URL 路径时才使用。 仅当导入模块的脚本包含一个指定的 URL 路径时，你才可以使用 scopes 键去提供映射。这允许根据正在导入的代码使用不同版本的模块。

<script type="importmap">
  // 定义导入的 JSON 对象
</script>

范例

使用的文件说明：

  • a.js
  • lib/b.js
<!DOCTYPE html>
<html lang="en">
  <body>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
          "math": "./a.js"
        },
        "scopes": {
          "/lib/": {
            "vue": "https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.esm.browser.js"
          }
        }
      }
    </script>
    <script type="module">
      import { add } from 'math';
      import { version } from './lib/b.js';

      console.log('add result: ', add(3, 3)); // add result:  6
      console.log('version 2: ', version);    // version 2:  2.7.16
    </script>
    <script type="module">
      import { version } from 'vue';
      console.log('version 3: ', version);    // version 3:  3.5.13
    </script>
  </body>
</html>

参考

avatar
文章
阅读
粉丝