Module 的加载实现

一在浏览器中加载 ES6 模块

HTML中，浏览器通过<script>标签加载 JS 脚本。

浏览器默认同步加载 JS 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还须加入脚本下载时间。

如脚本体积很大，下载和执行时间就会很长，易造成浏览器堵塞，“卡死”，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法：

即 <script>标签打开defer或async属性，脚本就会异步加载。渲染引擎遇到此标签时，就开始下载外部脚本，但不会等它下载和执行完，而是直接执行后面的代码。

defer要等整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行； async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。

一句话，defer是“渲染完再执行”，async是“下载完就执行”。

另外，如有多个defer脚本，会按在页面出现的顺序加载，而多个async脚本则不能保证加载顺序（因为谁先下载完谁就执行）。

浏览器加载 ES6 模块，也使用<script>标签，但要加入type="module"属性。

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

上面代码在网页中插入模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块。

浏览器对于带有type="module"的