浏览器工作原理
文章目录
- 浏览器工作原理
-
- 一、现代浏览器的多进程架构
- [二、核心工作流程（从输入 URL 到页面展示）](#二、核心工作流程（从输入 URL 到页面展示）)
- 三、关键补充：重绘与回流
浏览器的核心工作是请求资源、解析资源、渲染页面，最终将 Web 内容呈现给用户。工作流程可拆解为 7 个核心步骤，同时依赖多进程架构保障性能
一、现代浏览器的多进程架构
现代浏览器采用多进程设计，不同进程各司其职，避免单个页面崩溃影响整个浏览器：
进程类型
- 浏览器进程
作用：控制浏览器的主界面（地址栏、标签页、前进 / 后退按钮），管理网络请求和文件访问 - 渲染进程
作用：责页面解析、渲染、执行 JS，每个标签页默认一个独立进程（沙箱隔离） - GPU 进程
作用：处理图形渲染（3D 动画、CSS 变换），提升页面流畅度 - 插件进程
作用：管理浏览器插件（如 Flash），避免插件崩溃影响主程序 - 网络进程
作用：专门处理 HTTP/HTTPS 请求、DNS 解析、缓存管理
二、核心工作流程（从输入 URL 到页面展示）
- 输入 URL 并发起请求
- 当你在地址栏输入 URL（如 https://www.example.com），浏览器首先判断是否为搜索关键词，若是则使用默认搜索引擎查询；若为 URL，则进入下一步
- DNS 解析：将域名（www.example.com）转换为 IP 地址（如 192.168.1.1），优先查询本地 DNS 缓存，若未命中则向 DNS 服务器请求
- 建立 TCP 连接：通过 三次握手 建立客户端与服务器的连接，、
- 发送 HTTP 请求：浏览器向服务器发送请求报文，包含请求方法（GET/POST）、请求头（Cookie、User-Agent）、请求体（POST 数据）等。
- 服务器处理请求并返回响应
服务器接收请求后，根据 URL 路径处理资源（如读取静态文件、查询数据库生成动态页面），然后返回 HTTP 响应报文，包含：
- 状态码：如 200 OK（成功）、404 Not Found（资源不存在）、500 Internal Server Error（服务器错误）。
- 响应头：Content-Type（资源类型，如 text/html、application/json）
- 响应体：HTML/CSS/JS 文件、图片等资源内容。
- 网络进程接收响应并处理
- 网络进程接收到响应后，首先判断 资源是否可缓存：若 Cache-Control 允许缓存，则将资源存入本地缓存，下次请求直接使用。
- 若响应是 HTML 文件，则将其转发给 渲染进程；若为其他资源（如 CSS/JS/ 图片），则先下载，等待渲染进程请求时再提供。
- 构建 DOM 树
渲染进程的 HTML 解析器 逐行解析 HTML 代码，将标签转换为 DOM 节点，最终构建成 DOM 树
- 解析过程中遇到阻塞资源（如
<script>标签），会暂停 HTML 解析，优先下载并执行 JS（因为 JS 可能修改 DOM 结构）。 - 可通过 async/defer 属性优化：async 异步下载 JS，下载完成后立即执行；defer 异步下载，HTML 解析完成后执行。
- 解析 CSS（构建 CSSOM 树）
- 解析 HTML 时遇到
<link rel="stylesheet"> 或 <style>标签，会启动 CSS 解析器，解析 CSS 规则，构建 CSS 对象模型（CSSOM 树） - CSSOM 树存储了所有元素的样式信息，且 CSS 解析不会阻塞 HTML 解析，但会阻塞页面渲染
- 构建渲染树
渲染进程将 DOM 树 和 CSSOM 树 合并，生成 渲染树。渲染树只包含需要显示的节点（如<div>、<p>），不包含隐藏节点（如 display: none 的元素、<head>标签）。
- 每个节点都带有样式信息，为后续布局和绘制做准备。
- 布局（Layout）与绘制（Paint）
- 布局（回流 / 重排）：根据渲染树计算每个节点的 几何信息，包括位置、宽度、高度，生成 布局树。若后续 DOM 或样式发生变化（如修改 width、display），会触发回流，性能消耗较大。
- 绘制：遍历布局树，将每个节点的 视觉属性（颜色、背景、阴影）绘制到 图层 上。不同元素可能分配到不同图层（如视频、z-index 较高的元素），图层可以独立绘制和合成，提升性能。
- 合成（Composite）：将所有图层合并为一个页面，通过 GPU 渲染到屏幕上，最终呈现出用户看到的网页。
三、关键补充：重绘与回流
- 回流（重排）：元素的几何属性变化（如尺寸、位置、DOM 增删）导致布局重新计算，性能消耗大。
- 重绘：元素的视觉属性变化（如颜色、背景），无需重新计算布局，性能消耗较小。
- 优化建议：
- 避免频繁修改 style，使用 class 批量修改样式。
- 使用 documentFragment 批量操作 DOM，减少回流次数。
- 对复杂动画使用 transform 和 opacity，这两个属性只会触发合成，不会触发回流 / 重绘。