面试题之一文搞定浏览器的渲染原理

浏览器渲染原理：

从服务器获取的HTML字符串渲染到页面的整体过程包括以下几步：

• 解析 HTML

• 样式计算

• 布局

• 分层

• 生成绘制指令

• 分块

• 光栅化

• 绘制

解析 HTML：

整体过程：解析 html代码，生成 DOM 和CSSOM树

在解析的过程中，会遇到link、script标签，对于这类标签，浏览器有特殊的操作：

为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML中的外部 CSS 文件和外部的 JS文件。

那么会有一种情况，那就是渲染主线程在解析的过程中，解析到了link/script标签，而此时外部 CSS 文件/外部的 JS文件还没下载解析好（下载和解析是两个过程），那么对于css文件和js文件的处理又是不同的情况了

对于CSS 文件:

如果外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作都不是在渲染主线程中进行的，这也是 CSS 不会阻塞 HTML 解析的根本原因（HTML 解析是在渲染主线程上进行的）

补充： 虽然下载解析css外部文件不会阻塞 HTML 解析，但css解析完成生成CSSOM树时，会阻塞 HTML 解析，如下图

对于js文件：

一般情况下：

<script src="script1.js"></script>

如果外部的 js没有下载解析好，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

补充： 如果你想首屏渲染的越快&#x