花 2 天时间整理的，---- 浏览器的渲染原理

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解析是

附加一张网络常见图片


链接：

• DOMContentLoaded事件
• 为什么要了解浏览器加载、解析、渲染这个过程？
• 以色列开发人员塔利·加希尔大量研究的成果

如果有错误，还望指正哦！