ES6模块加载下

2020-02-14 本文已影响0人 WWWWWWWWWWWWWWM

1、传统的浏览器加载是遇到js文件时会从上到下依次加载，比如：

<script src="path/to/a.js"></script>
<script src="path/to/b.js"></script>

当a.js这个脚本文件比较大时，加载时间比较长，会造成阻塞，b.js文件不能执行，为了解决这个问题，引入了defer和async.只需要在引入的script标签上加上defer或者async属性就可以了，用法如下：

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

defer与async的区别是：defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的
2、type="module"不会造成浏览器阻塞

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

<script type="module">
  import $ from "./jquery/src/jquery.js";
  $('#message').text('Hi from jQuery!');
</script>

3、ES6 模块与 CommonJS 模块的差异