book/es6tutorial
1
0
Fork 0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00
Code Issues Releases Wiki Activity

docs(module-loader): 浏览器模块的加载顺序

Browse Source
This commit is contained in:
ruanyf 2017-10-12 17:53:32 +08:00
parent 911dd3404a
commit 0f0408563d
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/module-loader.md
View File

@ -39,7 +39,7 @@
浏览器加载 ES6 模块，也使用`<script>`标签，但是要加入`type="module"`属性。 浏览器加载 ES6 模块，也使用`<script>`标签，但是要加入`type="module"`属性。
```html ```html
<script type="module" src="foo.js"></script> <script type="module" src="./foo.js"></script>
``` ```
上面代码在网页中插入一个模块`foo.js`，由于`type`属性设为`module`，所以浏览器知道这是一个 ES6 模块。 上面代码在网页中插入一个模块`foo.js`，由于`type`属性设为`module`，所以浏览器知道这是一个 ES6 模块。
@ -47,17 +47,21 @@
浏览器对于带有`type="module"`的`<script>`，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了`<script>`标签的`defer`属性。 浏览器对于带有`type="module"`的`<script>`，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了`<script>`标签的`defer`属性。
```html ```html
<script type="module" src="foo.js"></script> <script type="module" src="./foo.js"></script>
<!-- 等同于 --> <!-- 等同于 -->
<script type="module" src="foo.js" defer></script> <script type="module" src="./foo.js" defer></script>
``` ```
如果网页有多个`<script type="module">`，它们会按照在页面出现的顺序依次执行。
`<script>`标签的`async`属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。 `<script>`标签的`async`属性也可以打开，这时只要加载完成，渲染引擎就会中断渲染立即执行。执行完成后，再恢复渲染。
```html ```html
<script type="module" src="foo.js" async></script> <script type="module" src="./foo.js" async></script>
``` ```
一旦使用了`async`属性，`<script type="module">`就不会按照在页面出现的顺序执行，而是只要该模块加载完成，就执行该模块。
ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。 ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致。
```html ```html