# 深入理解浏览器运行原理
## 网页解析过程
输入域名 => DNS解析为IP => 目标服务器返回`index.html`
> DNS：Domain Name System
## HTML解析过程
- 浏览器开始解析`index.html`文件，当遇到``则向服务器请求下载`.css`文件
- 遇到`
```
```
// defer.js
console.log('defer script enter')
```
上述代码在控制台的输出为：
```
script enter
defer script enter
DOMContentLoaded enter
```
- 多个带`defer`的脚本也是按照自上至下的顺序执行的
- 从某种角度来说，`defer`可以提高页面的性能，并且推荐放到`head`元素中
- 注意：`defer`仅适用于外部脚本，对于`script`标签内编写的默认`JS`代码会被忽略掉
## async属性
`async`属性也可以做到：让脚本异步加载而不阻塞DOM树的构建，它与`defer`的区别：
- 用`async`标记的脚本是**完全独立**的
- `async`脚本不能保证执行顺序，因为它是独立下载、独立运行，不会等待其他脚本
- 使用`async`标记的脚本不会保证它将在`DOMContentLoaded`之前或之后被执行
要使用`async`属性标记的`script`操作DOM，必须在其中使用`DOMContentLoaded`监听器的回调函数，在该事件触发（DOM树构建完毕）后，执行相应的回调函数