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): 有虎 async 和 defer 属性的解释 #542

Browse Source
This commit is contained in:
ruanyf 2017-11-11 20:39:50 +08:00
parent 535dd1ff98
commit ece1bb9dfa
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/module-loader.md
View File

@ -6,7 +6,7 @@
### 传统方法
在 HTML 网页中，浏览器通过`<script>`标签加载 JavaScript 脚本。
HTML 网页中，浏览器通过`<script>`标签加载 JavaScript 脚本。
```html
<!-- 页面内嵌的脚本 -->
@ -32,7 +32,7 @@
上面代码中，`<script>`标签打开`defer`或`async`属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。
`defer`与`async`的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，`defer`是“渲染完再执行”，`async`是“下载完就执行”。另外，如果有多个`defer`脚本，会按照它们在页面出现的顺序加载，而多个`async`脚本是不能保证加载顺序的。
`defer`与`async`的区别是：`defer`要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；`async`一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，`defer`是“渲染完再执行”，`async`是“下载完就执行”。另外，如果有多个`defer`脚本，会按照它们在页面出现的顺序加载，而多个`async`脚本是不能保证加载顺序的。
### 加载规则