在地址栏输入网址并按下回车，页面往往几百毫秒后出现，看起来只是服务器把文件送到屏幕。实际上，现代浏览器同时扮演网络客户端、代码运行时、排版引擎、图形系统和安全容器。
Chrome、Firefox和Safari内部实现不同，但都必须完成一条相似流水线：找到服务器，取得资源，解析代码，计算几何位置，绘制像素，再把结果安全地交给屏幕。第一步发生在浏览器进程。
地址栏输入会先被判断为网址还是搜索词，随后检查协议、域名和安全策略。浏览器查询缓存或DNS，把域名转换成IP地址；若没有可复用连接，便建立TCP或QUIC连接，HTTPS还要完成TLS握手并验证证书。
请求发出后，服务器返回状态码、响应头和正文。遇到跳转，浏览器重新走目标地址；发现可疑类型或跨域风险，网络层可能直接拦截。
HTTP/2和HTTP/3让多个资源可以在一条连接上并发传输，减少旧式多连接限制。缓存则让新鲜副本直接从本地读取。
浏览器还会提前做事：鼠标悬停或输入域名时可能预解析DNS、预连接；HTML预加载扫描器即使主解析器被脚本挡住，也会继续寻找图片、样式表和脚本并发下载。服务器还能用103 Early Hints提前发出预连接与预加载提示。
收到HTML后，渲染进程开始把字符流切成词法单元，再按标签关系构建DOM树。普通同步脚本可能暂停解析，因为脚本能够修改尚未完成的文档。
使用defer可让脚本并行下载、等DOM构建结束后按顺序执行，async则在下载完成时尽快执行，顺序不固定。模块脚本默认具有延后执行特性。
脚本资源若由运行中的JavaScript临时插入，预加载扫描器通常无法提前发现，这会造成串行等待。CSS同时被解析为CSSOM。
浏览器把作者样式、用户设置和内置默认规则按层叠、继承与优先级应用到每个节点，得到计算样式。头部关键样式表通常会阻塞首次渲染，因为浏览器若过早绘制，用户会先看到无样式页面再突然跳变。
脚本还可能读取几何信息，所以某些脚本必须等待前面的CSS加载完成。把关键CSS尽早提供、把非关键脚本延后，是提升首屏速度的基本原则。
有了DOM和计算样式，布局阶段决定每个盒子的宽高与坐标。视口变化、字体加载、元素插入或尺寸修改都可能触发重新布局。
随后绘制阶段生成背景、文字、边框和阴影等绘制指令，并按堆叠上下文和z-index排列顺序。这里还没有直接把整页变成一张大图，而是准备一份告诉图形系统怎样画的清单。
现代浏览器会把页面拆成多个合成层。视频、画布、变换动画或某些定位元素可能拥有独立层，变化时只需移动或重新合成该层，不必重画整个页面。
合成线程把大层切成小瓦片，多个栅格线程并行把绘制指令变成位图纹理，再交给GPU进程组合成最终帧。独立合成能让滚动和动画在主线程繁忙时仍较流畅，但层数过多会占用显存并增加管理开销，因此不能滥用will-change。
JavaScript引擎又有自己的流水线。源码先被解析，生成中间结构和字节码，热点函数经过即时编译变成优化机器码；若运行时假设被打破，还会退回较通用版本。
垃圾回收器负责释放不再使用的对象。长任务若占住主线程，样式计算、布局和事件响应都会排队，即使网络极快，页面仍会卡顿。
拆分任务、减少无效DOM操作和避免频繁读写布局属性，往往比单纯压缩一张图片更关键。多进程架构是性能之外的安全基础。
浏览器进程管理标签和权限，网络服务负责请求，渲染进程运行网页代码，GPU进程处理图形。站点隔离尽量让不同来源进入不同进程，沙箱限制渲染器直接访问文件和设备。
即便网页利用引擎漏洞，攻击者还需突破进程隔离才能触及系统。代价是更多内存与进程间通信，浏览器必须在安全、速度和资源占用之间权衡。
Chromium使用Blink与V8，Firefox使用Gecko与SpiderMonkey，Safari使用WebKit与JavaScriptCore。它们遵循共同网页标准，却在样式计算、进程策略、图形管线和新特性落地速度上有所差异。
开发者不能只在一款浏览器测试，也不能把内部实现细节当成永久标准。页面变慢往往不是某一个环节单独失败，而是阻塞链累积：DNS迟缓、主文档等待、关键CSS过大、同步脚本暂停解析、布局反复、主线程长任务和图片解码互相叠加。
理解整条流水线后，性能优化就不再是盲目删代码，而是缩短关键路径、提高并行度、减少主线程工作、控制重绘范围并保留安全隔离。从网址到像素的短短一瞬，其实是一场网络、编译、排版和图形系统精密协作。
热门跟贴