what
two concept
js引擎:渲染引擎:
why
- 性能优化
- 渲染时间
下面是一个再简单不过的页面：
index.js
alert(1232)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='./index.js'></script>
</head>
<body>
<img src="http://www.jb51.net/images/logo.gif" alt="123">
</body>
</html>当浏览器渲染这个页面的时候，在解析到js脚本时候，弹出框会让js暂停执行，这时候页面是空白的，但是要主意的是，这时候页面已经加载完毕了，body中有一个img标签，在network我们可以看到，此时已经在请求这个图片资源(??)
为了在页面初始化时，提升页面渲染效果和用户体验，那些负责UI展现的脚本需要立即加载，其他的资源则按需或者稍后加载
how
把脚本放在页面body标签的尾部。这样，一方面用户可以更快地看到页面，另一方面脚本可以直接操作已经加载完成的dom元素。但这并不是最好的方案
理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。这样，一旦文档就绪就可以运行脚本，
添加defer 或者async完成以上需求：
<script src="./index.js" defer></script>defer：
- 在DOM渲染的同时加载脚本文件，但是在文档就绪后再去执行，而且是按照文件的先后顺序依次执行
- 只有 Internet Explorer 支持 defer 属性。
async：
- 允许在下载脚本的同时进行DOM的渲染。但是它将在下载后尽快执行（即JS引擎空闲了立马执行)(操作 DOM 的脚本就不适合使用async)不能保证脚本会按顺序执行(这与defer不同)
如下的测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="http://www.jb51.net/images/logo.gif" alt="123">
<script src='./index.js' async></script>//console.log('index')
<script src='./index2.js' async></script>//console.log('index2')
</body>
</html>渲染以上页面，我们在控制台发现，index1和index2的打印顺序是随机，不确定的
Firefox 3.6、Opera 10.5、IE 9和 最新的Chrome和Safari都支持async属性- 仅仅适用于外部脚本(只有在使用
src属性才有效)
Conclusion
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载并行进行（异步）。<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
- defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
- 它俩的差别在于脚本下载完之后何时执行.
- JS资源的加载和JS的解析是两个不同的阶段，JS的解析和文档的渲染虽然是不同的线程，但是不能同时执行，所以图中的红线和绿线不能并行