URL 输入到浏览器渲染页面发生了什么

一、前言：

前端包含了渲染和计算两个部分。

1）渲染部分由 HTML 和 CSS 共同定义，之后，交由浏览器进行渲染，因此，浏览器确实屏蔽了大部分连接到底层能力的部分，造成前端缺乏抓手。但是，随着 WebGL、WebGPU 等全新 API 暴露，前端还是有一些抓手的。

2）计算部分由 JavaScript 定义，之后，交由脚本引擎执行，因此，脚本引擎屏蔽了大部分连接到底层能力的部分，造成前端缺乏抓手，同时，脚本引擎基本都用虚拟机屏蔽底层指令集和硬件差异，因此，又多了一层屏蔽。

参考文献： 百度安全验证 从硬件、渲染、计算三大视角解析渲染性能优化的本质

二、发生了5个主要过程

输入URL到看见页面发生了什么？简单来说，共有以下几个过程：

• 1）DNS解析
• 2）发起TCP连接
• 3）发送HTTP请求
• 4）服务器处理请求并返回HTTP报文

• 5）浏览器解析渲染页面
• 6）连接结束。

史上最详细的经典面试题 从输入URL到看到页面发生了什么？ - 掘金

---

三、主要涉及浏览器三个进程

在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ - 知乎

---

四、渲染进程发生了什么？ 

    其中，浏览器页面解析渲染，如下：（ Render Tree 即渲染节点 ）

这个图就是 Webkit 页面解析渲染的过程。

1. 构建DOM树
2. 样式计算
3. 布局（创建布局树）
4. 分层（基于布局树，生成图层树）
5. 绘制（渲染引擎会对图层树中的每个图层进行绘制，以线性方式排列任务形成一个待绘制列表）

这个过程涉及两个比较重要的概念重绘（replaint）和回流（reflow）

replaint 重绘：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

reflow 回流： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。

reflow 和 repaint 都是耗费浏览器性能的操作，这两者尤以reflow为甚；因为每次reflow，浏览器都要重新计算每个元素的形状和位置。

     6.合成（划分图块+光栅化+绘制提交。所谓光栅化，即是将待会制列表生成的256x256 或 512x512大小的图块，转换为位图。）

在reflow和repaint之后，浏览器会将多个复合层传入GPU；进行合成工作，那么合成是如何工作的呢？

假设我们的页面中有A和B两个元素，它们有absolute和z-index属性；浏览器会重绘它们，然后将图像发送给GPU；然后GPU将会把多个图像合成展示在屏幕上。

光栅化，实际生成位图的操作由栅格化来执行也称为光栅化,图块是执行栅格化操作的最小单位.栅格化的操作都是在栅格化线程池中完成,渲染引擎会维护一个栅格化线程池。

通常情况下,栅格化的操作都会使用 GPU 加速来完成,GPU 生成位图的操作又叫做快速栅格化或者GPU 栅格化,生成的位图会保存在 GPU 中。

一篇文章说清浏览器解析和CSS（GPU）动画优化

---

五、与GPU的关系

说法一：

栅格化完成后，合成器线程会获得栅格线程传过来的"draw quads"图块信息，根据这些信息，合成器线程合成了一个frame，然后将该合成frame通过IPC传回给浏览器进程，浏览器进程在传到GPU进行渲染，最后就展示到你的屏幕上了。 

浏览器工作原理/浏览器是如何渲染页面？（文字版） - 哔哩哔哩

说法二：

 一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。

浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

前端的宿主环境：浏览器 / 浏览器内核 / 渲染引擎是在系统的 UI 引擎和渲染引擎之上又包裹了一层。同时，这一层包裹还涉及不同浏览器厂商在不同平台上的不同实现。       

 从成像原理上说，渲染过程包括：CPU 计算（UI 引擎或浏览器引擎、渲染引擎的工作）、图形渲染 API（OpenGL/Metal）、GPU 驱动、GPU 渲染、VSYNC 信号发射，HSYNC 信号发射的过程。

 百度安全验证 从硬件、渲染、计算三大视角解析渲染性能优化的本质

 

那么，常用浏览器内核 Webkit 如何参与解析渲染页面的呢？它的架构是什么呢？将在下一章介绍。