从输入 URL 到页面展示发生了什么？
完整流程
1. URL 解析
2. DNS 查询
3. TCP 连接（三次握手）
4. TLS 握手（HTTPS）
5. 发送 HTTP 请求
6. 服务器处理请求并返回响应
7. 浏览器接收响应
8. 浏览器渲染
9. 加载执行 JS/CSS
10. 触发 load 事件1. URL 解析
https://www.example.com:443/path?query=1#hash
│ │ │ │ │ │
协议 域名 端口 路径 查询 锚点2. DNS 查询
浏览器 DNS 缓存 → 操作系统 DNS 缓存 → 路由器 DNS → ISP DNS → 根域名服务器3. TCP 三次握手
Client → SYN → Server
Client ← SYN+ACK ← Server
Client → ACK → Server
（连接建立）4. 浏览器渲染流程
HTML → DOM 树
→ 渲染树（Render Tree）
CSS → CSSOM 树
渲染树 → 布局（Layout/Reflow）→ 绘制（Paint）→ 合成（Composite）详细步骤：
- 解析 HTML → 构建 DOM 树
- 解析 CSS → 构建 CSSOM 树
- 合并 DOM 和 CSSOM → 渲染树（不包含
display: none的元素） - 布局（Layout/Reflow） → 计算元素位置和大小
- 绘制（Paint） → 将渲染树转为屏幕上的像素
- 合成（Composite） → 将各图层合成最终画面
5. JS 执行
<!-- 阻塞 HTML 解析 -->
<script src="app.js"></script>
<!-- 不阻塞（异步下载，DOMContentLoaded 后执行 -->
<script defer src="app.js"></script>
<!-- 不阻塞（异步下载，下载完立即执行）-->
<script async src="analytics.js"></script>6. 事件触发
DOM 解析完成 → DOMContentLoaded
图片等资源加载完成 → load性能优化点
- DNS 预解析：
<link rel="dns-prefetch" href="//cdn.example.com"> - 预连接：
<link rel="preconnect" href="//cdn.example.com"> - 减少请求：合并文件、雪碧图
- 压缩：Gzip/Brotli
- 缓存：强缓存 + 协商缓存
- CDN：就近访问
- 懒加载：图片/组件按需加载