我们晓得有3种体式格局在浏览器里加载js代码：

1：<script>…</script>之间嵌入js代码**
2：<script src=’xx.js’></script> 经由过程src引入外部js文件**
3：加载js代码如workers（比方 web worker或许service worker）

由于js module和地道的js剧本代码有差别之处（比方js module里的变量只在本module内里可见，不会加到global，所以也不会挂在到window上），为了能加载js module代码，上面提到的3种机制都邑有响应的转变。接下来就详细来看一下，浏览器加载module代码的机制：

1： js module的加载依旧有上面提到的三种体式格局
我们先来讲前2种，也是我们最熟习的经由过程<script>标签的体式格局：

<script src="./index.js" type="module"></script>

<script type="module">
    console.log('in html')
</script>>

以module的体式格局加载，需要把<script>标签的type设置为‘module’，当没有设置type值的时刻，默许是”text/javascript”。

2：defer和async
我们晓得<script>标签另有defer和async这2个布尔型的属性，他们能够决议js代码的实行递次，也会有document的剖析发生影响，如今我们来看一下他们会对我们的模块加载发生如何的影响：
defer
我们先来温习一下defer的特征：
1：带defer的js代码不会障碍页面剖析，js代码的下载和页面的剖析是同步进行的，js代码的实行要等页面剖析完成以后再最先。
2：加载多个带defer的js文件，会根据递次实行。比方下面的一段代码，a.js实行完以后才会下载b.js和实行b.js.

<script src="./static/js/a.js" defer></script>
<script src="./static/js/b.js" defer></script>

3: defer只对带src的从外部加载js文件的<script>有用，关于内嵌js代码的<script>…</script>是不起作用的。

<script type=’module’> 用module体式格局加载的js，默许带有defer的属性，即具有defer的殊效，上面提到的前2点都一样，只是第三点差别：纵然内嵌js代码的module，也具有defer的属性。比方:

<!--第一实行index.js-->
<script src="./index.js" type="module"></script>

<!--第二实行内嵌module-->
<script type="module">
    console.log('in html')
</script>

<!--第三实行main.js-->
<script src="./main.js" type="module"></script>

async
先来温习一下async的特征：
1： 带有async的<script>的js文件下载不会壅塞页面剖析，然则js文件一旦下载完，就会马上实行，假如这时刻页面剖析还没有完成，这就会壅塞页面剖析。
2：多个带有async的<script>的js文件的实行递次是没法肯定的。
那假如type=’module’又同时带有async的<script>文件的实行特征是如何的呢？由于前面我们说了type=’module’相当于默许带有defer，然则我们晓得defer和async是差别的。结论就是带有async的模块加载根据async的特征实行，比方：

<script src="./index.js" type="module" async></script>
<script src="./main.js" type="module" async></script>

究竟是先实行index.js照样main.js，这里是不能肯定的。

3：加载module的时刻文件途径
与加载通例的js代码差别的是，模块加载对文件途径有请求，下面4种是正当的：
1：以 / 开首的根目录
2：以 ./ 开首的当前途径
3：以 ../开首的父途径
4：一个URL途径
比方：

<!--以下为正当的文件途径-->
<script src="/module1.js" type="module"></script>
<script src="./module2.js" type="module"></script>
<script src="../module/module3.js" type="module"></script>
<script src="https://www.xxxx.com/module/module4.js" type="module"></script>

<!--以下为不正当的文件途径-->
<script src="module5.js" type="module"></script>
<script src="module/module5.js" type="module"></script>