从访问URL到浏览器渲染
DNS 查询
当用户在地址栏输入一个 URL，浏览器要做的第一步是要去寻找页面资源的位置。如果导航到 https://example.com，HTML 页面被定位到 IP 地址为 93.184.216.34 的服务器。如果以前没有访问过这个网站，就需要进行 DNS 查询（Domain Name System Lookup）。浏览器向域名服务器发起 DNS 查询请求，最终得到一个 IP 地址。
获取到服务器 IP 地址，浏览器就会通过TCP“三次握手”与服务器建立连接。一旦我们建立了和 web 服务器的连接，浏览器就会代表用户发送一个初始的 HTTP GET 请求，对于网站来说，这个请求通常是一个 HTML 文件。浏览器收到第一个数据分块后，它就可以开始将接收的数据转换为 DOM 和 CSSOM 通过渲染器在屏幕上将它们绘制成用户在屏幕上看到的页面。
构建 DOM 树
浏览器从网络接收到 HTML 文件后，会从上到下、边解析边构建 DOM（Document Object Model）树。
DOM 树描述了文档的内容。<html> 元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。嵌套在其他标记中的标记是子节点。DOM 节点的数量越多，构建 DOM 树所需的时间就越长。
构建 CSSOM 树
浏览器解析 HTML 时遇到 <link> 或 <style> 标签，会加载并解析 CSS。CSS 解析后生成 CSSOM（CSS Object Model）树，表示样式的结构。
CSS 对象模型和 DOM 是相似的。DOM 和 CSSOM 是两棵树。它们是独立的数据结构。浏览器将 CSS 规则转换为可以理解和使用的样式映射。浏览器遍历 CSS 中的每个规则集，根据 CSS 选择器创建具有父、子和兄弟关系的节点树。
构建 Render Tree（渲染树）
浏览器将 DOM 树与 CSSOM 树合并，生成 Render Tree，然后用于计算每个可见元素的布局，然后将其绘制到屏幕上。
布局（Layout）
渲染树构建完毕后，浏览器就开始布局。渲染树标识了哪些节点会显示（即使不可见）及其计算样式，但不标识每个节点的尺寸或位置。为了确定每个对象的确切大小和位置，浏览器会从渲染树的根开始遍历。
在网页上，大多数东西都是一个盒子。不同的设备和不同的桌面设置意味着无限数量的不同视区大小。在此阶段，根据视口大小，浏览器将确定屏幕上所有盒子的大小。
布局是根据渲染树计算每个节点的位置与大小（即盒模型），以及确定呈现树中所有节点的尺寸和位置的过程。
这个过程也叫回流或重排（Reflow），第一次确定每个节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为重排。假设初始布局发生在返回图像之前，我们没有声明图像的尺寸，因此一旦知道图像的尺寸，就会出现重排。
绘制（Painting）
浏览器根据 Layout 结果将元素的每个可见部分绘制到屏幕上，包括文本、颜色、边框、阴影以及按钮和图像等替换元素。
绘制可以将布局树中的元素分解为多个层。将内容提升到 GPU 上的层（而不是 CPU 上的主线程）可以提高绘制和重新绘制性能。有一些特定的属性和元素可以实例化一个层，包括 <video> 和 <canvas>，任何 CSS 属性为 opacity 、3D transform、will-change 的元素，还有一些其他元素。
合成（Compositing）
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。
当页面继续加载资源时，可能会发生回流（例如没有声明图像的尺寸），回流会触发重新绘制和重新合成。如果我们定义了图像的大小，就不需要重新绘制，只需要绘制需要重新绘制的层，并在必要时进行合成。
回流 （Reflow）是指浏览器重新计算元素的几何属性（如位置、尺寸），并更新渲染树（Render Tree）的过程，回流必定引起重绘。
重绘 （Repaint）是指浏览器根据新的样式（如颜色、背景）重新绘制元素，但 不改变布局（即不触发回流），重绘不一定引起回流。
