当我们在浏览器中输入网址并回车后，经历了哪些过程才能看到完整的页面呢？本文将详细介绍浏览器页面渲染的流程。
1. URL 解析
首先，浏览器会对输入的 URL 进行解析，将其分成协议、域名、路径等部分。然后，浏览器会向 DNS 服务器请求域名对应的 IP 地址。如果该域名没有被缓存，浏览器会向上级 DNS 服务器发出请求，直到找到对应的 IP 地址为止。
2. 建立连接
接下来，浏览器会根据协议（HTTP 或 HTTPS）建立与服务器的连接。如果是 HTTPS 协议，则需要进行 SSL 握手过程，确保通信安全。
3. 发送请求
连接建立完成后，浏览器会向服务器发送 HTTP 请求。请求包括请求方法、URL、协议版本、请求头和请求体等信息。
-- -------------------- ---- -------
-- ----
------------------ -
------- -------
-------- -
--------------- ------------------
--
----- ---------------- ----- ------ --
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------4. 接收响应
服务器处理完请求后，会将响应（包括状态码、响应头和响应体等信息）发送回浏览器。如果服务器返回的是 HTML 页面，则浏览器会开始解析页面。
5. 构建 DOM 树
浏览器接收到 HTML 页面后，会根据 HTML 标记构建 DOM 树。HTML 标记按照嵌套关系组成一棵树，由根节点、元素节点、文本节点等组成。DOM 树的根节点是 document 对象。
-- -------------------- ---- -------
---- ---- ---
--------- -----
------
------
----- ----------------
----------- -------------
-------
------
-------- -- - ------------
------- -- - --------------
-------
-------6. 构建 CSSOM 树
在构建 DOM 树的同时，浏览器还会根据 CSS 样式规则构建 CSSOM 树。CSSOM 树是由 CSS 规则按照层叠顺序组成的一棵树。
-- -------------------- ---- ------- -- ---- -- ---- - ---------- ----- - -- - ------ ---- -
7. 生成渲染树
接下来，浏览器会将 DOM 树和 CSSOM 树合并成一棵渲染树，该树只包含需要显示的节点和样式信息。
8. 布局
浏览器会根据渲染树的信息，计算每个节点在屏幕上的位置和大小，并生成布局信息。
9. 绘制
最后，浏览器会根据布局信息，将页面绘制到屏幕上。这一过程被称为绘制或者合成。
通过了解浏览器页面渲染的流程，我们可以更好地理解前端页面性能优化的相关问题，例如如何减少 HTTP 请求、如何优化 DOM 和 CSSOM 的构建等。
本文介绍了浏览器页面渲染的整个流程，包括 URL 解析、建立连接、发送请求、接收响应、构建 DOM 树、构建 CSSOM 树、生成渲染树、布局和绘制等环节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32969
