- HTTP/2 核心概念
1.1 流（Stream）
• 定义：HTTP/2 连接中的逻辑通道，用于传输数据，每个流有唯一标识符（Stream ID）。
• 特点：
◦ 支持多路复用（多个流并行传输）。
◦ 独立管理优先级、流量控制和状态。
• 示例：
◦ 流 ID=1：传输 HTML 请求和响应。
◦ 流 ID=2：传输 CSS 文件。
1.2 帧（Frame）
• 定义：HTTP/2 的最小传输单元，所有数据（头部、正文等）均以帧形式传输。
• 结构：
◦ Length（帧长度）、Type（类型）、Flags（标志位）、Stream ID、Payload（负载）。
• 关键帧类型：
◦ HEADERS：传输 HTTP 头部。
◦ DATA：传输消息体（如 HTML、CSS 内容）。
◦ SETTINGS：连接初始化配置。
1.3 物理传输与逻辑复用
• 物理层面：不同流的帧在同一个 TCP 连接上串行传输。
• 逻辑层面：接收端通过 Stream ID 重组帧，实现并行处理。
• 优势：减少延迟，避免传统 HTTP/1.1 的队头阻塞。
- 浏览器渲染流程
2.1 核心步骤
-
请求 HTML：浏览器发起 HTTP 请求获取 HTML 文件。
-
解析 HTML：
◦ 边下载边解析（流式解析），构建 DOM 树。
- 加载外部资源：
◦ CSS：通过 标签触发加载，阻塞渲染（需构建 CSSOM 树）。
◦ JS：默认阻塞解析（可通过 async/defer 优化）。
◦ 图片/媒体：非阻塞加载（懒加载优化）。
-
构建渲染树：合并 DOM 和 CSSOM，确定可见元素及样式。
-
布局（Layout）：计算元素几何位置。
-
绘制（Paint）：逐层合成并显示内容。
2.2 JavaScript 的影响
• 同步脚本：暂停 HTML 解析和渲染。
• 异步脚本：
◦ async：下载完成后立即执行（不保证顺序）。
◦ defer：下载完成后在 HTML 解析完成后执行（保证顺序）。
- 资源加载与优化策略
3.1 关键资源加载顺序
-
HTML：必须优先加载，构建页面骨架。
-
CSS：内嵌或外链，需尽早加载（避免 FOUC）。
-
JavaScript：按需加载（defer 或动态导入）。
-
媒体资源：懒加载（loading=“lazy”）。
3.2 性能优化技巧
• 减少阻塞：
◦ 将 CSS 放在 ，JavaScript 放在页面底部或使用 defer。
• 利用 HTTP/2 多路复用：合并多个小文件，减少请求次数。
• 预加载关键资源：
• 缓存策略：
◦ 设置 Cache-Control 头，利用浏览器缓存。
- 常见问题与解决方案
4.1 队头阻塞（Head-of-Line Blocking）
• HTTP/2：通过多路复用解决应用层阻塞。
• TCP 层阻塞：需优化网络稳定性（HTTP/3 迁移到 QUIC 协议）。
4.2 渲染阻塞优化
• CSS：内联关键 CSS，异步加载非关键 CSS。
• JavaScript：使用 async/defer 或 Web Workers。
- 实际案例分析
5.1 示例 HTML 加载流程
• 流程：
-
下载 HTML → 解析 → 加载 style.css（阻塞渲染）。
-
下载 analytics.js（不阻塞解析）。
-
图片 image.jpg 在滚动到可视区域时加载。
-
总结
• HTTP/2：通过流和帧实现高效多路复用，优化网络传输。
• 浏览器渲染：依赖 HTML、CSS、JS 的协同加载与解析。
• 优化核心：减少阻塞、合理利用并行、优先加载关键资源。