从输入 URL 到页面显示

① 输入 URL：浏览器判断是「搜索词」还是「网址」
② DNS 解析：域名 → IP（有缓存就跳过这步）
③ 建立 TCP 连接（三次握手）
④ TLS 握手（HTTPS，协商出对称密钥）
⑤ 发送 HTTP 请求（带 cookie、缓存相关头）
⑥ 服务器响应 → 检查缓存 → 解析 HTML
⑦ 渲染进程解析 HTML/CSS/JS → 布局绘制（下一章详讲）
⑧ 页面显示，其余资源继续加载

// 运行环境：Node.js 14+（仅用内置 https，无需装包）
// 步骤：把下面内容存为 brw-l2.js，执行  node brw-l2.js
// 它会真实请求 https://example.com，用 socket 事件精确打印 DNS/TCP/TLS/首字节/下载 各阶段耗时（毫秒）

const { performance } = require('node:perf_hooks')
const https = require('node:https')

// 发起一次 HTTPS 请求，用 socket 的 lookup/connect/secureConnect 事件把「链路」精确分段计时
function measure(url) {
  return new Promise((resolve) => {
    const timings = {}
    timings.start = performance.now()                          // ① 开始

    const req = https.request(url, (res) => {
      timings.ttfb = performance.now()                          // ⑤ 收到首字节（TTFB）
      res.resume()
      res.on('end', () => { timings.end = performance.now(); resolve({ timings, status: res.statusCode }) })
    })

    // socket 事件能拿到 fetch 拿不到的三个细分阶段：
    req.on('socket', (socket) => {
      socket.on('lookup', () => { timings.dns = performance.now() })        // ② DNS 解析完成
      socket.on('connect', () => { timings.tcp = performance.now() })       // ③ TCP 三次握手完成
      socket.on('secureConnect', () => { timings.tls = performance.now() }) // ④ TLS 握手完成
    })
    req.on('error', (e) => resolve({ error: e.message }))
    req.end()
  })
}

;(async () => {
  const { timings, status, error } = await measure('https://example.com/')
  if (error) { console.error('请求失败:', error); process.exit(1) }
  const ms = (a, b) => (b - a).toFixed(1)
  console.log(`DNS 解析      : ${ms(timings.start, timings.dns)} ms`)
  console.log(`TCP 三次握手  : ${ms(timings.dns, timings.tcp)} ms`)
  console.log(`TLS 握手      : ${ms(timings.tcp, timings.tls)} ms`)
  console.log(`首字节(TTFB)  : ${ms(timings.tls, timings.ttfb)} ms（状态 ${status}）`)
  console.log(`下载完成      : ${ms(timings.ttfb, timings.end)} ms`)
  console.log(`总耗时        : ${ms(timings.start, timings.end)} ms`)
})()

DNS 预解析（dns-prefetch）     → 提前把域名解析好，省去用户等待
HTTP/2 + CDN + 缓存           → 减少网络往返与传输耗时
关键 CSS/JS 内联或 defer       → 减少阻塞解析
压缩 + Tree Shaking           → 减少传输体积