Chrome、Firefox和Safari内部实现不同，但都必须完成一条相似流水线：找到服务器，取得资源，解析代码，计算几何位置，绘制像素，再把结果安全地交给屏幕。第一步发生在浏览器进程。
地址栏输入会先被判断为网址还是搜索词，随后检查协议、域名和安全策略。浏览器查询缓存或DNS，把域名转换成IP地址；若没有可复用连接，便建立TCP或QUIC连接，HTTPS还要完成TLS握手并验证证书。
HTTP/2和HTTP/3让多个资源可以在一条连接上并发传输，减少旧式多连接限制。缓存则让新鲜副本直接从本地读取。
使用defer可让脚本并行下载、等DOM构建结束后按顺序执行，async则在下载完成时尽快执行，顺序不固定。模块脚本默认具有延后执行特性。
脚本资源若由运行中的JavaScript临时插入，预加载扫描器通常无法提前发现，这会造成串行等待。CSS同时被解析为CSSOM。
脚本还可能读取几何信息，所以某些脚本必须等待前面的CSS加载完成。把关键CSS尽早提供、把非关键脚本延后，是提升首屏速度的基本原则。
有了DOM和计算样式，布局阶段决定每个盒子的宽高与坐标。视口变化、字体加载、元素插入或尺寸修改都可能触发重新布局。
现代浏览器会把页面拆成多个合成层。视频、画布、变换动画或某些定位元素可能拥有独立层，变化时只需移动或重新合成该层，不必重画整个页面。
合成线程把大层切成小瓦片，多个栅格线程并行把绘制指令变成位图纹理，再交给GPU进程组合成最终帧。独立合成能让滚动和动画在主线程繁忙时仍较流畅，但层数过多会占用显存并增加管理开销，因此不能滥用will-change。
JavaScript引擎又有自己的流水线。源码先被解析，生成中间结构和字节码，热点函数经过即时编译变成优化机器码；若运行时假设被打破，还会退回较通用版本。
垃圾回收器负责释放不再使用的对象。长任务若占住主线程，样式计算、布局和事件响应都会排队，即使网络极快，页面仍会卡顿。
即便网页利用引擎漏洞，攻击者还需突破进程隔离才能触及系统。代价是更多内存与进程间通信，浏览器必须在安全、速度和资源占用之间权衡。
Chromium使用Blink与V8，Firefox使用Gecko与SpiderMonkey，Safari使用WebKit与JavaScriptCore。它们遵循共同网页标准，却在样式计算、进程策略、图形管线和新特性落地速度上有所差异。
理解整条流水线后，性能优化就不再是盲目删代码，而是缩短关键路径、提高并行度、减少主线程工作、控制重绘范围并保留安全隔离。从网址到像素的短短一瞬，其实是一场网络、编译、排版和图形系统精密协作。
热门跟贴