add http

Author: 张东

.vitepress/config.mts

@@ -281,6 +281,7 @@ export default defineConfig({
           items: [
             { text: "概述", link: "/browser/http/introduct" },
             { text: "跨域", link: "/browser/http/crossorigin" },
+            { text: "async defer", link: "/browser/http/async-defer" },
           ],
         },
       ],

browser/http/async-defer.md

@@ -0,0 +1,24 @@
+---
+layout: doc
+outline: deep
+---
+::: raw
+当浏览器加载html遇到`<script></script>`,必须立即执行该脚本，如果是外部脚本`<script src=""></script>`,等待下载完再执行
+
+所以可以把脚本放在页面底部
+
+但是对于长的html，只有下载了完整的html才会注意到该脚本，然后开始下载它，对于低速网络，会造成明显的延迟。
+
+幸运的是，这里有两个特性可以为我们解决这个问题：defer 和 async。(仅用于外部脚本)
+:::
+## defer
+脚本将在后台下载，不阻塞页面。等待dom解析完毕，但在 `DOMContentLoaded` 事件之前执行
+::: tip DOMContentLoaded
+::: raw
+当 HTML 文档已完全解析且所有延迟脚本（`<script defer src="…" />和<script type="module" />`）已下载并执行时，将触发此事件
+
+:::
+具有defer特性的脚本按照其相对顺序执行
+
+## async 
+也不会阻塞页面，async脚本不会等待其他脚本，async脚本可能在 `DOMContentLoaded` 之前或之后执行

browser/http/introduct.md

@@ -40,7 +40,7 @@ HTTP2允许在单个tcp内处理多个请求和响应,这是通过将信息包
 有几种模型：短期连接、持久连接和HTTP 流水线
 
 后面两种是1.1新引入的
-<img src="https://developer.mozilla.org/en-US/docs/Web/HTTP/…on_management_in_HTTP_1.x/http1_x_connections.png" alt="比较三种 HTTP/1.x 连接模型的性能：短暂连接、持久连接和 HTTP 流水线。" width="1012" height="670" loading="lazy">
+<img src="https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x/http1_x_connections.png" alt="比较三种 HTTP/1.x 连接模型的性能：短暂连接、持久连接和 HTTP 流水线。" width="1012" height="670" loading="lazy">
 
 ### 短暂连接（1.0默认模型）
 HTTP/1.0 默认为每一对 HTTP 请求/响应都打开一个单独的 TCP 连接，通过设置connection除了close之外任何值会变成持久化