浏览器工作原理详解重要性：前端面试题常出，如问：请说说用户打开URL到浏览器完全渲染的全过程。前端知识的本源，学习思

重要性：

主要阶段

浏览器工作原理可以概括为以下几个主要阶段：

TCP 的“三次握手”技术经常被称为“SYN-SYN-ACK”——更确切的说是 SYN、SYN-ACK、ACK——因为通过 TCP 首先发送了三个消息进行协商，然后在两台电脑之间开始一个 TCP 会话。是的，这意味着当请求尚未发出的时候，终端与每台服务器之间还要来回多发送三条消息。

三次握手过程如下：

① 客户端发送 SYN （同步）请求

② 服务器收到请求后，返回 SYN + ACK

③ 客户端收到 ACK 后，发送 ACK 确认连接

请求头中包含以下信息：

① 请求的资源类型（HTML、CSS、JS等）

② 浏览器信息（User-Agent）

③ 可接收的内容类型（Accept）

④ 缓存信息（Cache-Control）等等

对于通过 HTTPS 建立的安全连接，还需要另一次 "握手"。这种握手，或者说 TLS 协商，决定使用哪种密码对通信进行加密，验证服务器，并在开始实际数据传输前建立安全连接。这就需要在实际发送内容请求之前，再往返服务器五次。

浏览器从接收到 HTML 文档开始，分以下几个步骤：

（1）解析 HTML，构建 DOM 树

浏览器解析 HTML ，构建 DOM（Document Object Model）树。

（2）解析 CSS，构建 CSSOM 树

CSS 文件和嵌入式样式被解析，生成 CSSOM（CSS Object Model）树。

（3）渲染树构建

DOM 和 CSSOM 合并生成渲染树（Render Tree），它只包含可见元素及其样式信息。

（4）布局计算

确定每个元素在页面中的位置和大小。

（5）分层和绘制

将页面分为多个层，每层的绘制命令被记录。

（6）栅格化和合成

将绘制指令转化为位图并上传到 GPU，GPU 将各层合成，最终渲染到屏幕。

JS 被下载并传递给 JS 引擎（如 V8）

代码在单线程的 Event Loop 中运行

注意：

① 默认情况下，JS 是阻塞解析的，意味着浏览器会暂停 DOM 树的构建，直到脚本执行完毕

② 如果脚本被标记为 async 或 defer，则浏览器可以异步加载和执行脚本

JS 可修改 DOM 和 CSSOM，触发重绘（Repaint）或回流（Reflow）

用户交互事件（如点击、输入）通过事件循环处理