重新看：浏览器是如何渲染页面的？

写在前面的话

最近在看袁老师（渡一教育）讲的前端大师课，觉得讲解的非常通俗易懂，也根据最新官方文档做了知识更新，摒弃了已过时的内容。拿到课件后搜了一下，各大网站上已经有很多转载课件内容的，感觉都是照搬课件，没有加上自己的理解，但是也没注明文章来源，所以本文觉得还是有必要再分享一次，希望大家看了有所收获。
前几年有个很火的面试题，问在浏览器地址栏输入URL,按下回车后究竟发生了什么? 从大方向上说应该分为两步，第一步是通过通信请求拿到html文档，这个文档包含了Dom、css和js，第二部就是浏览器把这个html文档的内容通过一系列复杂的操作渲染显示出来。这两个步骤背后都有非常复杂又巧妙的实现，今天重点探讨第二步具体实现过程。

浏览器是如何渲染页面的？

（建议理解记忆）
当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。
这样，整个渲染流程就形成了一套组织严密的生产流水线。

1、解析HTML （ Parse HTML）

解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。

1. HTML 解析过程中遇到 CSS 代码怎么办？
为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS