一、整体流程速览用户输入 URL 并按下回车浏览器解析 URL判断是搜索词还是网址浏览器检查缓存决定是否直接复用缓存未命中 → DNS 解析将域名转为 IP建立 TCP 连接HTTPS 还需 TLS 握手构造 HTTP 请求并发送给服务器服务器处理请求生成响应返回 HTTP 响应给浏览器浏览器根据响应头处理缓存、压缩、重定向解析 HTML构建 DOM 树解析 CSS构建 CSSOM 树DOM CSSOM 合并为渲染树布局计算确定几何位置与尺寸绘制将内容绘制到图层合成线程合成画面显示到屏幕JavaScript 在合适时机执行动态更新页面二、输入 URL地址栏里发生了什么2.1 URL / URI / URN 的区别概念全称含义URLUniform Resource Locator统一资源定位符描述位置URIUniform Resource Identifier统一资源标识符URL 是其子集URNUniform Resource Name统一资源名称只命名不定位完整 URL 结构texthttps://www.example.com:443/path/to/page?nametestpage1#section2部分含义https协议www.example.com主机名域名443端口号HTTPS 默认 443HTTP 默认 80/path/to/page路径nametestpage1查询参数#section2片段标识符页面内定位不发给服务器2.2 地址栏输入处理浏览器判断输入是「网址」还是「搜索关键词」符合 URL 格式 → 尝试访问包含空格或不符合 URL 规则 → 交给搜索引擎localhost或192.168.1.1→ 识别为主机地址只输入example.com无协议头 → 自动补全为http://或https://2.3 HSTS 与 HTTPS 升级如果输入的是http://浏览器可能因以下原因自动升级为 HTTPS该域名曾被记录为 HSTS 站点浏览器启用了 HTTPS Only 模式站点返回过强制安全策略升级时浏览器内部改 URL可能返回 307 Internal Redirect。三、浏览器多进程架构与导航请求3.1 Chrome 的多进程架构进程职责浏览器主进程窗口、地址栏、书签、网络请求协调、文件访问渲染进程解析 HTML/CSS/JS渲染页面每标签页独立GPU 进程图形渲染和合成输出到屏幕网络进程所有网络请求HTTP、HTTPS、DNS、WebSocket插件进程隔离运行第三方插件存储进程本地存储、IndexedDB、Cache Storage音频进程音频播放目的稳定性和安全性。一个页面崩溃不影响其他页面渲染进程在沙箱中运行。3.2 导航请求发起浏览器主进程通过 IPC 把 URL 交给网络进程网络进程负责检查浏览器本地缓存处理代理设置判断是否需要 DNS 解析判断是否需要建立新连接或复用四、浏览器缓存第一道加速关卡4.1 缓存类型类型特点HTTP 缓存根据响应头字段决定是否复用内存缓存读写快但会话结束丢失磁盘缓存读写慢可跨会话保留Service Worker 缓存优先级高于 HTTP 缓存用于 PWA推送缓存HTTP/2 服务器推送场景4.2 强缓存 vs 协商缓存强缓存缓存未过期时浏览器直接用本地缓存不发请求。字段说明Cache-Control: max-age3600有效期 3600 秒Cache-Control: public可被任何对象缓存Cache-Control: private只被浏览器私有缓存Cache-Control: no-store禁止缓存Cache-Control: no-cache可缓存但每次使用前需验证协商缓存强缓存过期后浏览器携带缓存标识向服务器验证。响应头请求头说明ETagIf-None-Match内容哈希值精确到内容Last-ModifiedIf-Modified-Since最后修改时间精确到秒服务器返回304则继续用本地缓存返回200则用新响应。ETag 优先级通常高于 Last-Modified。4.3 缓存命中典型流程检查 Service Worker 缓存策略生成缓存键查 HTTP 强缓存强缓存命中 → 直接返回强缓存未命中/过期 → 带协商缓存标识向服务器验证服务器 304 → 用本地缓存200 → 用新响应并更新缓存五、DNS 解析域名转 IP5.1 域名层级结构textwww.example.com. │ │ │ └── 根域通常省略 │ │ └────── 顶级域名 TLDcom │ └───────────── 二级域名example └───────────────── 三级域名/主机名www5.2 DNS 查询完整过程浏览器向操作系统发起解析先检查 hosts 文件未命中 → 向本地 DNS 服务器发起查询本地 DNS 先查自身缓存未命中 → 向根域名服务器查询返回 .com 服务器地址向 .com 顶级域名服务器查询返回 example.com 权威服务器地址向权威域名服务器查询返回 www.example.com 的 IP本地 DNS 缓存结果并返回给操作系统再返回浏览器关键区分客户端做递归查询把活交给本地 DNS本地 DNS 做迭代查询一级一级往下问。5.3 DNS 记录类型记录含义A域名 → IPv4 地址AAAA域名 → IPv6 地址CNAME域名别名指向另一个域名MX邮件服务器TXT域名验证、SPF、DKIMNS权威 DNS 服务器5.4 CDN 与 DNS 调度权威 DNS 根据请求来源 IP 判断用户所在地区返回最近的 CDN 节点 IP降低延迟、缓解源站压力。5.5 DNS 优化减少域名数量DNS Prefetchlink reldns-prefetch href//example.comCDN 和就近调度各级缓存加速重复查询六、TCP 连接建立三次握手6.1 TCP 报文段关键字段字段作用源/目的端口标识应用进程序列号 seq数据字节编号确认号 ack期望收到的下一个字节序号数据偏移TCP 首部长度控制位SYN、ACK、FIN、RST、PSH、URG窗口大小流量控制校验和校验首部和数据6.2 三次握手流程步骤报文序列号状态第一次SYNseqx客户端 → SYN-SENT第二次SYNACKseqy, ackx1服务端 → SYN-RCVD第三次ACKseqx1, acky1双方 → ESTABLISHED三个阶段证明什么第一次客户端能发第二次服务器能收能发第三次客户端能收为什么是三次不是两次两次握手服务器无法确认客户端是否收到 SYNACK也无法确认客户端会继续参与连接旧 SYN 延迟到达还可能导致服务器错误建立连接。为什么不是四次第三次握手已能确认客户端接收正常四次会多一次不必要往返。6.3 四次挥手步骤报文说明第一次客户端 FIN请求关闭客户端→服务器方向第二次服务器 ACK确认收到关闭请求第三次服务器 FIN服务器→客户端方向也可关闭第四次客户端 ACK客户端进入 TIME_WAIT等 2MSL为什么 ACK 和 FIN 分开服务器收到 FIN 时可能还有数据要发先回 ACK数据发完再发 FIN。为什么等 2MSL保证最后一个 ACK 能到达服务器丢失时可重发让旧连接报文在网络中自然消失避免干扰新连接。6.4 TCP 可靠传输与拥塞控制可靠传输机制确认应答超时重传滑动窗口流量控制拥塞控制拥塞控制四阶段阶段特点慢启动窗口指数增长拥塞避免窗口线性增长快重传3 个重复 ACK 立即重传不等超时快恢复窗口减半继续不回到慢启动七、HTTPS 与 TLS 握手7.1 为什么需要 HTTPSHTTP 明文传输可能被窃听、篡改、伪装。HTTPS 在 HTTP 和 TCP 之间加入 TLS 层提供加密传输防窃听完整性校验防篡改身份认证证书确认服务器身份7.2 TLS 1.2 握手ECDHEClientHello客户端发送支持的 TLS 版本、加密套件、随机数ServerHello服务器选定版本、套件返回随机数Certificate服务器发送数字证书ServerKeyExchange发送密钥交换参数ServerHelloDone阶段结束ClientKeyExchange客户端发送密钥交换参数双方计算会话密钥ChangeCipherSpec Finished双方通知后续加密并校验握手完整性TLS 1.2 通常需要 2-RTT。7.3 TLS 1.3 的改进握手往返从 2-RTT 减少到1-RTT移除过时算法默认使用前向安全算法支持0-RTT 会话恢复前向安全性即使服务器私钥泄露历史会话密钥也无法推导7.4 证书链与身份认证验证步骤检查证书是否由受信任 CA 签发验证证书是否在有效期内验证域名是否匹配递归验证中间证书与根证书信任链任何一步失败浏览器会显示安全提示。八、HTTP 请求与响应8.1 HTTP 报文结构请求报文textGET /path/to/page?nametestpage1 HTTP/1.1 Host: www.example.com Accept: text/html Connection: keep-alive响应报文textHTTP/1.1 200 OK Content-Type: text/html; charsetutf-8 Cache-Control: max-age36008.2 常见请求方法方法语义GET获取资源POST提交数据PUT整体替换PATCH部分更新DELETE删除资源HEAD只获取响应头OPTIONS查询支持的方法跨域预检8.3 常见状态码类别含义示例1xx信息性101 Switching Protocols2xx成功200、201、2043xx重定向301、302、3044xx客户端错误400、401、403、4045xx服务器错误500、502、5038.4 HTTP 版本演进版本关键特性HTTP/1.0每请求独立 TCP 连接HTTP/1.1Keep-Alive、管道化有队头阻塞HTTP/2二进制分帧、多路复用、头部压缩、服务器推送HTTP/3基于 QUICUDP内置可靠传输降低握手延迟九、服务器处理请求9.1 负载均衡与反向代理请求首先到达负载均衡器Nginx、F5、云 LB按轮询、最少连接、一致性哈希等策略转发到后端。反向代理承担 TLS 终结、静态资源缓存、压缩、限流、安全防护。9.2 Web 服务器接收请求静态资源 → 直接读磁盘返回动态请求 → 通过 FastCGI 或反向代理交给应用服务器9.3 后端应用处理链路路由匹配根据 URL 和方法找到控制器中间件鉴权、日志、参数校验、限流业务处理调用服务层数据访问数据库、缓存、下游服务、消息队列结果组装序列化为 JSON、HTML9.4 服务器返回响应状态码 响应头 响应体。可能包含 Content-Type、Cache-Control、Set-Cookie、Content-Encoding、Location。压缩响应经 gzip 或 br 压缩后再返回。十、浏览器渲染流程10.1 构建 DOM 树HTML 边接收边解析字节流 → 字符 → Token → 节点对象 → DOM 树10.2 构建 CSSOM 树遇到 style 标签或外部 CSS 时解析构建 CSSOM。CSS 会阻塞渲染CSSOM 未完成无法确定最终样式但通常不阻塞 DOM 解析。10.3 合成渲染树DOM CSSOM →Render Tree渲染树。只包含可见节点display: none的元素不进入head、style、script不进入10.4 布局Layout / Reflow计算每个可见节点的几何信息位置、大小。从根节点开始按盒模型和文档流规则确定坐标。10.5 绘制Paint / Repaint根据渲染树和样式生成绘制指令把文本、颜色、边框、阴影、背景画到图层。10.6 合成Composite现代浏览器把页面拆分为多个图层合成线程叠加图层生成最终画面提交给 GPU。只有 transform 或 opacity 变化时可能跳过布局和绘制直接进入合成性能更好——这是动画优化推荐用 transform 和 opacity 的原因。十一、JavaScript 执行机制11.1 script 标签会阻塞解析吗默认情况下遇到script会停止解析先下载并执行脚本。属性行为无阻塞解析下载后立即执行defer异步下载HTML 解析完成后按顺序执行async异步下载下载完成后立即执行顺序不保证11.2 事件循环与任务队列JavaScript 是单线程的通过事件循环处理异步任务执行同步代码调用栈清空微任务队列Promise、MutationObserver执行一个宏任务setTimeout、setInterval、I/O回到步骤 211.3 回流与重绘操作触发回流Reflow几何属性变化宽高、位置、字体大小重绘Repaint外观属性变化颜色、背景、阴影合成transform、opacity 变化优化原则尽量用 transform 和 opacity 做动画避免触发回流。十二、总结与答题思路回答这道题时建议按下面的层次组织先给全景图URL 解析 → 缓存 → DNS → TCP → TLS → HTTP 请求 → 服务器处理 → HTTP 响应 → 浏览器渲染 → JS 执行重点展开DNS 递归/迭代查询、TCP 三次握手、TLS 握手、HTTP 缓存策略、浏览器渲染流水线体现深度解释「为什么」如为什么三次握手、为什么 CSS 阻塞渲染、为什么 transform 性能好结合工程CDN、DNS Prefetch、强缓存与协商缓存、defer 与 async、回流重绘优化主动引导如果某个方向更擅长可以主动展开
