文章目录what-happens-when在浏览器里按下回车到底发生了什么1、 键盘按下那一下2、 URL 解析和 DNS 查询3、 建立连接4、 HTTP 请求和服务器处理5、 渲染到屏幕上6、 这个项目的意义what-happens-when在浏览器里按下回车到底发生了什么GitHub 上有一个仓库Star 数超过 43000做的事只有一件把在浏览器地址栏输入 google.com 然后按回车这个动作从头到尾拆解一遍。拆到什么程度从手指按下一个键开始到屏幕上像素点亮为止中间经过的每一个硬件信号、每一层网络协议、每一步浏览器渲染全部写出来一步都不跳过。1、 键盘按下那一下你按下字母g键盘内部的电路闭合产生一个微弱电流。键盘控制器扫描所有按键状态消除抖动噪声把这次按键转换成一个键码整数。对 USB 键盘来说这个键码存在一个叫endpoint的寄存器里主机控制器每 10 毫秒轮询一次拿到数据后打包成 USB 协议格式通过差分信号线传给电脑。操作系统收到信号走各自的路径Windows 通过 KBDHID.sys 驱动把 HID 事件转成扫描码再交给 Win32K.sys 处理macOS 由 I/O Kit 驱动转成键码通过 WindowServer 分发给应用Linux 的 Xorg 服务器用 evdev 监听按键经过键码映射后发给窗口管理器。按回车的过程类似最终浏览器收到一个用户按下了回车的事件。2、 URL 解析和 DNS 查询浏览器拿到 URL 后先拆分出协议HTTP和资源路径/。接着判断输入的是网址还是搜索词检查主机名有没有非 ASCII 字符需要做 Punycode 编码再查一遍 HSTS 预加载列表决定用 HTTP 还是 HTTPS 发请求。然后是 DNS 解析。浏览器先查自己的缓存没有就调用系统函数 gethostbyname。这个函数先翻本地 hosts 文件找不到再向配置的 DNS 服务器发请求。如果 DNS 服务器在同一子网走 ARP 流程不在同一子网就对默认网关走 ARP。ARP 过程先查缓存没有就查路由表确定出口网卡然后广播 ARP 请求等目标设备回复 MAC 地址。拿到网关 MAC 后DNS 查询才能真正发出去。DNS 服务器本地没有记录的话会向上递归查询直到找到权威记录。3、 建立连接拿到服务器 IP 后浏览器请求一个 TCP 套接字。操作系统在传输层构造 TCP 段加上源端口和目标端口网络层封装 IP 头填入源和目标 IP链路层再加帧头填入网卡和网关的 MAC 地址。TCP 三次握手客户端发 SYN服务端回 SYNACK客户端再发 ACK。数据传输时每发 N 字节数据就把序列号加 N收到确认后对方回 ACK。关闭连接时发 FIN对方 ACK 后也发自己的 FIN最后再 ACK 一次。如果用 HTTPS握手完成后还要做 TLS 协商。客户端发 ClientHello带上支持的 TLS 版本和加密算法列表服务端回 ServerHello选定加密套件并返回 CA 签名的证书客户端验证证书后生成随机字节用服务端公钥加密发过去双方各自推导出对称密钥。之后所有应用数据都用这个对称密钥加密传输。4、 HTTP 请求和服务器处理连接建好后浏览器发一个 HTTP GET 请求。请求头里包含 Host、Connection 等字段服务器收到后做一系列检查匹配虚拟主机、验证请求方法、检查客户端权限如果有 URL 重写模块还要走一遍规则匹配。最后找到对应的文件如果跑的是 PHP就用解释器执行把结果流式返回。服务器返回 HTTP 响应状态码 200 表示成功后面跟着 HTML 内容。如果浏览器带了 ETag 头且内容没变服务器会返回 304浏览器直接用缓存。页面里引用的 CSS、JS、图片等资源浏览器会分别发起独立的请求走一遍类似流程。如果资源在不同域名上还要从 DNS 解析重新来一遍。5、 渲染到屏幕上浏览器拿到 HTML 后开始解析成 DOM 树。CSS 文件也被解析成样式规则对象。DOM 树和样式规则合并生成渲染树。接下来算布局自底向上算每个节点的首选宽度自顶向下分配实际宽度再自底向上算高度最后确定每个节点的坐标。遇到浮动、绝对定位这类复杂情况计算逻辑更繁琐。算完布局浏览器给页面分层每层分配纹理执行绘制命令。这些命令可能走 CPU 光栅化也可能直接用 GPU 的 D2D 或 SkiaGL。所有层送到合成进程和浏览器界面、iframe、扩展面板的层合在一起通过 Direct3D 或 OpenGL 发送给 GPUGPU 异步渲染完把帧交给窗口服务器。页面加载完成后JavaScript 开始执行。定时器触发的动画、用户在搜索框输入时的联想建议都是这个阶段的事。脚本可能修改 DOM 或触发新的网络请求进而引发新一轮的渲染。6、 这个项目的意义一个看起来简单的操作背后牵涉的组件数量超出多数人预期键盘硬件、USB 协议栈、操作系统中断处理、DNS 递归查询、ARP 广播、TCP 状态机、TLS 密钥协商、HTTP 协议、HTML 解析、CSS 计算、GPU 渲染管线。每个环节都有协议规范、边界条件和容错逻辑。这个仓库的价值不在于教你写代码而是把一条完整的链路摆出来让做前端的知道网络层在干什么做后端的知道浏览器在干什么做运维的知道每一跳路由器在干什么。它是那种读完之后会改变你看待日常操作的项目。干什么做后端的知道浏览器在干什么做运维的知道每一跳路由器在干什么。它是那种读完之后会改变你看待日常操作的项目。