update docs

package.json

@@ -19,7 +19,7 @@
     "eslint": "^8.56.0",
     "mermaid": "^10.7.0",
     "typescript": "^5.3.3",
-    "vitepress": "^1.0.0-rc.39",
+    "vitepress": "^1.0.0-rc.40",
     "vitepress-plugin-mermaid": "^2.0.16"
   }
 }

src/docs/network/http2.md

@@ -4,7 +4,7 @@ title: HTTP/2
 
 # HTTP/2
 
-HTTP/2 出来的目的是为了改善 HTTP 的性能。协议升级有一个很重要的地方，就是要兼容老版本的协议，否则新协议推广起来就相当困难，所幸 HTTP/2 做到了兼容 HTTP/1.1。
+HTTP/2 兼容 HTTP1.1 并且相对于 HTTP/1.1 改善了 HTTP 的性能，于 2015 年 5 月以 [RFC 7540](https://datatracker.ietf.org/doc/html/rfc7540) 正式发表。
 
 ## HTTP/1.1 的性能问题
 
@@ -16,8 +16,28 @@ HTTP/2 出来的目的是为了改善 HTTP 的性能。协议升级有一个很
 
 ## 头部压缩
 
+HTTP 协议的报文是由「Header + Body」构成的，对于 Body 部分，HTTP/1.1 协议可以使用头字段 「Content-Encoding」指定 Body 的压缩方式，比如用 gzip 压缩，这样可以节约带宽，但报文中的另外一部分 Header，是没有针对它的优化手段。
+
+HTTP/2 开发了 HPACK 算法，HPACK 算法主要包含三个组成部分：
+
+- 静态字典
+- 动态字典
+- Huffman 编码（压缩算法）
+
+客户端和服务器两端都会建立和维护「字典」，用长度较小的索引号表示重复的字符串，再用 Huffman 编码压缩数据，可达到 50%~90% 的高压缩率。
+
 ## 二进制帧
 
+HTTP/2 将 HTTP/1.1 的文本格式改成二进制格式传输数据，极大提高了 HTTP 传输效率，而且二进制数据使用位运算能高效解析。
+
+HTTP/2 把响应报文划分成了两类帧（Frame），HEADERS（首部）和 DATA（消息负载），也就是说一条 HTTP 响应，划分成了两类帧来传输，并且采用二进制来编码。
+
+帧头（Frame Header）很小，只有 9 个字节，帧开头的前 3 个字节表示帧数据（Frame Payload）的长度。
+
 ## 并发传输
 
+HTTP/2 通过多个 Stream 复用一条 TCP 连接，达到并发的效果，解决了 HTTP/1.1 队头阻塞的问题，提高了 HTTP 传输的吞吐量。
+
 ## 服务器主动推送资源
+
+客户端发起的请求，必须使用的是奇数号 Stream，服务器主动的推送，使用的是偶数号 Stream。服务器在推送资源时，会通过 PUSH_PROMISE 帧传输 HTTP 头部，并通过帧中的 Promised Stream ID 字段告知客户端，接下来会在哪个偶数号 Stream 中发送包体。

src/docs/performance/practice.md

@@ -4,35 +4,20 @@ title: 性能优化实践
 
 # 性能优化实践
 
-## 优化打包资源
-
-- 代码压缩
-- 使用 WebP 或者 svg 格式的图片
-- 开启 gzip
-- 代码分割，按需加载
-
-## CDN 加速
-
-- 静态资源放 CDN
-
-## 浏览器缓存
-
-- HTTP 缓存
-
-## 使用 HTTP/2
-
-- 多路复用
-- 头部压缩
-
-## 服务端渲染
-
-- 首屏渲染
-
-## 代码优化
-
-- 减少重绘重排
-- 减少 DOM 操作
-- 减少 HTTP 请求
-- 减少内存泄漏
-- 减少闭包
-- 延迟加载图片
+## 加载优化
+
+1. 减少 HTTP 请求
+2. 使用服务端渲染
+3. 静态资源使用 CDN
+4. CSS 放在 head 中，JS 放在 body 最后
+5. 字体图标代替图片图标
+6. 使用 HTTP 缓存
+7. 图片优化：延迟加载、降低图片质量、使用 CSS3 代替图片效果
+8. 通过打包实现按需加载文件
+
+## 运行时优化
+
+1. 减少重绘重排
+2. 使用事件委托
+3. 降低 CSS 选择器的复杂性
+4. 使用 flex 布局