从输入 URL 到页面可见：导航、网络、解析与首次绘制

主题边界

这道题真正考的是：浏览器导航、网络连接、HTML 解析、子资源发现和渲染流水线怎样串成一条主链。
如果只按步骤流水账回答，通常会缺掉缓存、解析阻塞、首屏指标或 CSR/SSR 差异。

机制与流程

浏览器先解析 URL，检查缓存、Service Worker、HSTS 和已有连接，再进入 DNS、TCP/QUIC、TLS 与 HTTP 请求。
HTML 响应到达后，parser 与 preload scanner 并行工作：前者构建 DOM，后者提前发现样式、脚本和图片等资源。
CSS 会阻塞首屏渲染，普通 script 会阻塞 HTML 解析；准备好足够的 DOM/CSS 信息后，浏览器才会进入首次布局和首次绘制。

关键差异

“拿到 HTML”不等于“页面可见”；解析、样式计算、脚本执行和资源下载都可能推迟首屏。
CSR 与 SSR 的差异在于首屏 HTML 是否已有内容，以及后续 hydration 成本如何分布。

边界条件

不是所有脚本都等价阻塞，关键在脚本类型、执行时机和依赖关系。
DNS、TCP、TLS、HTTP、解析、绘制是不同阶段，不能全部统称为“加载很慢”。

工程落点

首屏优化必须跨层做：连接建立、资源提示、缓存策略、关键 CSS、脚本拆分和主线程执行体积都要一起看。
排查白屏或慢启动时，网络瀑布图和主线程 Performance trace 必须同时分析。

相关主题