2018.05.18
第一部分:导入
相关概念
- DOMContentLoaded事件:当 HTML 文档加载完成并解析完成之后,会触发 DOMContentLoaded事件;不需要等待样式表、图片和子框架的完成加载。即 DOMContentLoaded事件只与 DOM的解析完成有关。
- load 事件: 当整个页面加载完成之后,会触发 load 事件。
注意事项
- 浏览器为了更快的用户体验,渲染引擎会尽快在屏幕上展示内容,所以浏览器会展示部分解析完成的文档。(边解析边展示)
第二部分:
浏览器渲染流程
- 浏览器发送请求,获取HTML文档
- 开始自上而下解析 HTML 文档,并构建 DOM 树
- 遇到内联
图形表示
常见问题解答
- HTML 的加载和解析是同时进行的吗?
先加载,然后解析,两者不是同时的。如果两者是同时进行的话,那是不是只要 HTML 加载完成,就代表HTML解析完成呢?肯定不是呀。所以,两者不同时。
- 为啥 js 会阻塞 HTML 解析和渲染?
因为 js 会操作 DOM,所以要等 js 执行完成之后,才开始解析 HTML。 - CSS 不会直接影响 HTML 的解析。为啥会 影响 JS 解析的同时,间接影响到 HTML 解析?如何解释?
因为 JS 脚本需要查询 CSS 信息,所以 JS脚本必须等到 CSSOM树构建完成之后才能执行。脚步执行完毕,HTML解析才会继续执行。所以这样就间接的影响了 HTML的解析。 - defer 和 async的区别?
共同点:都是立即下载 JS脚本。适用于外部脚本。
区别:(1)defer 是立即下载,但是要等到 DOM 解析完成之后(也就是 DOMContentLoaded事件执行前执行 JS脚本);(2)async是立即下载脚本,只要等到 CSSOM构建完成就会异步执行 JS脚本,不会等到 DOM 构建完成之后。JS脚本的执行和 HTML解析是
附加一张网络常见图片
![image](http://jbcdn2.b0.upaiyun.com/2012/02/How-browsers-work3.png)链接:
如果有错误,还望指正哦!