JavaScript加载

本篇文章转载自我的个人博客

传统js加载方式

<script src="path/to/myModule.js"></script>
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

上面代码中，由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略。 默认情况下 浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。

defer async属性都是异步加载

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。  

ES6加载

<script type="module" src="./foo.js"></script>
<!-- 等同于 -->
<script type="module" src="./foo.js" defer></script>

加载ES6模块必须加上 type="module"  ，浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

注意：

    1、代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见。

    2、模块脚本自动采用严格模式，不管有没有声明use strict。

    3、模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口。

    4、模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。

    5、同一个模块如果加载多次，将只执行一次。

ES6 模块与CommonJS模块的差异

     1、CommonJS 模块输出的是一个值的拷贝（模块中的值不会受影响），ES6 模块输出的是值的引用

     2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

 ES6 输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。