import 的知识

1.defer与async的区别

前者要等到整个页面正常渲染结束，才会执行；
后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染
一句话，defer是“渲染完再执行”，async是“下载完就执行”

另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的

 

2.HTML中使用 ES6

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

type="module" 等同于打开了<script>标签的defer属性

• 代码是在模块作用域之中运行，而不是在全局作用域运行。模块内部的顶层变量，外部不可见
• 模块脚本自动采用严格模式，不管有没有声明use strict
• 模块之中，可以使用import命令加载其他模块（.js后缀不可省略，需要提供绝对 URL 或相对 URL），也可以使用export命令输出对外接口
• 模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的
• 同一个模块如果加载多次，将只执行一次
• 利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中

 

 

 

参考资料:Module 的加载实现 - 创业男生 - 博客园

 

---

 

这一篇值得研究学习

参考资料:import - JavaScript | MDN

 

 

 

//end