从输入 URL 到页面显示，浏览器到底经历了什么？

知识点详解：从一次导航，走到第一屏和第一次点击

先说明这次导航有没有真正请求新资源

假设用户首次打开一个 HTTPS 商品页面。浏览器需要确定目标地址，拿到 HTML；如果没有可用缓存或连接，通常还要查询域名并建立相应连接。

但面试里不能把这条首次访问路径当成每次访问的固定步骤。DNS 可能命中缓存，连接可以复用，资源也可能直接来自缓存。页面还可能由 Service Worker 返回内容，或者发生重定向，再去另一个地址。

协议也会改变连接部分。HTTP/1.1、HTTP/2 通常运行在 TCP 上，HTTP/3 使用 QUIC。这里先讲整体路径，TCP、TLS 和缓存的细节应分别展开，不需要在这道题里重新背完所有报文。

HTML 到了一部分，浏览器已经开始干活

浏览器不是等所有资源下载完，才把它们一次性交给渲染器。HTML 数据陆续到达，解析器就可以逐步构建 DOM。资源发现与下载也会和解析交错进行，预加载扫描器还能提前发现一部分资源。

不过，不同资源对这条主线的影响不同。普通经典脚本若没有 async 或 defer，执行时通常会阻塞后续 HTML 解析；样式表一般不直接停止 HTML 解析，但会影响渲染，也可能让依赖样式的脚本等待。

defer 脚本通常等解析完成后按文档顺序执行；async 脚本准备好就执行，不保证相同顺序。这些话讨论的是相应的经典外部脚本，模块脚本有自己的规则，不能混成一张万能时序表。

从 DOM 到像素，中间还有几次转换

DOM 说明页面有什么，CSS 规则说明怎样显示。浏览器先计算样式，再形成用于布局和绘制的信息。

布局 决定元素的位置与尺寸。例如图片后来才拿到尺寸，可能挤动下面的文字；提前声明图片尺寸就能减少这种位移。

绘制 处理文字、颜色、边框等视觉内容，相关结果还会被栅格化成像素；合成 则把相应图层组合起来。这里是一条教学主线，实际浏览器可能增量更新和并行处理，不是每次都完整重建一遍。

display: none 的元素不参与相应布局；visibility: hidden 仍占布局空间。所以“没有看到”不等于“浏览器没有为它计算位置”。

页面出现了，为什么仍然点不动？

假设第一屏已经画出来，但一个大脚本还在主线程上执行长任务。用户的点击处理需要排队，页面就会给人一种“已经加载好了，却卡着”的感觉。

此时继续压缩图片，未必能改善点击延迟。咱们需要用 Network 看请求的等待和下载，用 Performance 看脚本、样式、布局及长任务，再判断该减少首屏资源、拆分工作，还是调整加载顺序。

验证也要区分首次访问与缓存访问，使用适当的网络和 CPU 条件。只在自己的高速电脑上刷新一次，很容易漏掉真实用户遇到的瓶颈。

本题机制参考：MDN：浏览器如何工作。

面试官继续追问

DOMContentLoaded 等于图片全部加载完了吗？

不是。它主要标志 HTML 解析完成，并满足相关延后脚本的执行条件，不等待所有图片。load 是另一个事件，但两者都不是用户体验的全部。

CSS 一定阻塞 DOM 构建吗？

一般不直接阻塞 HTML 解析。不过它可能阻塞渲染，并通过等待样式的脚本间接影响解析进度，需要把关系说完整。

浏览器完全是单线程的吗？

不是。JavaScript 主线程上的很多任务串行执行，但网络、部分渲染工作和 Worker 等并不都挤在同一线程。不要把主线程限制扩大成整个浏览器只有一条线程。

面试速记卡

• 导航：先看缓存、连接复用和协议，不机械重走首次访问流程。
• 资源加载：HTML 解析、资源发现与下载可能交错。
• 渲染：样式算外观，布局算几何，绘制与合成呈现内容。
• 交互：第一屏已出现，主线程仍可能被长任务占用。
• 诊断：网络和主线程分别测，首次与重复访问分别看。