浏览器的渲染原理

• 此笔记为学习的渡一机构袁老师公开课

浏览器的渲染原理

渲染时间点

• 当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。
• 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

渲染流水线

• 整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。
• 每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。
• 这样，整个渲染流程就形成了一套组织严密的生产流水线。

1 解析HTML -Parse HTML

• Document Object Model
• CSS Object Model
  

DOM树

CSSOM树

• 渲染的第一步是解析 HTML。
  解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。
• 如果主线程解析到link位