从 URL 输入到页面渲染
这道题考的是全链路：① DNS 解析（先查本地 hosts → 本地 DNS → 递归查询，可预检 dns-prefetch）→ ② TCP 三次握手（https 还要 TLS 握手）→ ③ 发送 HTTP 请求 → ④ 服务器处理并返回 → ⑤ 浏览器解析：HTML 构建 DOM 树、CSS 构建 CSSOM 树，合成渲染树（不含不可见元素）→ ⑥ 布局（layout，算几何位置）→ ⑦ 绘制（paint，像素化）→ ⑧ 合成（composite）。
回答出彩点：每一步都能关联性能优化——dns-prefetch / preconnect 提前建连、减少重定向、CDN 就近返回、开启 gzip / br 压缩、关键 CSS 内联、图片懒加载、requestAnimationFrame 避免布局抖动。把“流程题”答成“优化题”是区分度的关键。
- 链路口诀：DNS → TCP/TLS 握手 → 请求 → 响应 → DOM/CSSOM → 渲染树 → 布局 → 绘制 → 合成
- script 默认会阻塞解析；defer 等解析完、async 下完即执行
- 每一步都对应一个优化点：预连接、缓存、压缩、懒加载、分层合成
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>全链路优化示例</title> <!-- 优化 1：DNS 预解析与预建连 --> <link rel="dns-prefetch" href="//cdn.example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin> <!-- 优化 2：关键资源预加载 --> <link rel="preload" as="image" href="hero.jpg"> <!-- 优化 3：defer 让脚本不阻塞解析 --> <script src="app.js" defer></script> <style> /* 优化 4：图片预占位防 CLS */ .hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } </style> </head> <body> <img class="hero" src="hero.jpg" alt="封面" fetchpriority="high"> <!-- 优化 5：视口外懒加载 --> <img src="lazy.jpg" loading="lazy" alt="次要图" width="400" height="300"> </body> </html>
本节要点全链路：DNS → 握手 → 请求响应 → DOM/CSSOM → 布局绘制合成；每个环节配一条优化手段是满分答案。
