http

Author: 张东

browser/http/introduct.md

@@ -30,12 +30,25 @@ HTTP2允许在单个tcp内处理多个请求和响应,这是通过将信息包
 帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。
 
 多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，可以通过帧中的标识知道属于哪个请求
+
+::: tip
+多路复用虽然解决了http层的队头阻塞，但是没有解决tcp层的队头阻塞问题，
+
+也就是如果出现丢包的问题，后续所有的数据包会放在tcp缓冲区上，但是http无法看到tcp缓冲区，即使接收的数据包已经可以组成一条完整的流，也必须等到丢失的包重新传输并接收
+
+http3解决了这个问题，它使用了一种名为QUIC的协议，基于UTP而不是TCP
+:::
 <img src="https://mdn.github.io/shared-assets/images/diagrams/http/messages/http-2-connection.png" alt="使用单个 TCP 连接在 HTTP/2 中多路复用请求和响应。" loading="lazy">
 请求不一定连续，例如流9不需要流7结束，来自多个流的数据通常在连接上交错
 
 也可以为每个流或者资源设置优先级，低优先级的带宽比高优先级少
 
 由于每个帧都有一个与之关联的流 ID，因此客户端和服务器无需按顺序处理 HTTP 请求和响应。因此，HOL 阻塞问题在 HTTP 层得到解决，但现在转移到了 TCP 层。
+
+## https
+使用 TLS 协议来加密客户端和服务器之间所有的通信,TLS 要求服务器提供一个有效的数字证书来确认身份以建立安全连接
+
+如果客户端和服务器都能提供自己的数字证书，则它们可以互相认证
 ## HTTP/1.x中的连接管理
 有几种模型：短期连接、持久连接和HTTP 流水线
 

configure/bagu.md

@@ -23,6 +23,9 @@ console.log("5"); // 同步任务
 
 // 输出顺序：1 → 5 → 3 → 4 → 2
 ```
-宏任务：`setTimeout`、`DOM 事件`、`I/O`
+宏任务：`setTimeout`、`DOM 事件`、`I/O`、`requestAnimationFrame`
 
-微任务：`Promise回调`、`MutationObserver`
+微任务：`Promise回调`、`MutationObserver`
+
+## tree-shaking
+基于静态分析，只适用于esm，因为esm是静态的，在编译时就可以确定导入导出，据此去除未使用的代码

frame/vue/reactivity.md

@@ -182,4 +182,11 @@ proxy第一个参数是被代理对象，第二个参数是一组traps，通过
 
 当直接修改dom时，因为通过addeventlisten注册事件，会更新数据
 
-而对于组件，实际上是一个语法糖，相当于传入一个名为modelValue 的prop，和一个名为 update:modelValue 自定义事件，事件的回调函数接受一个参数，执行时会更新modelvalue
+而对于组件，实际上是一个语法糖，相当于传入一个名为modelValue 的prop，和一个名为 update:modelValue 自定义事件，事件的回调函数接受一个参数，执行时会更新modelvalue
+
+## 编译优化
+* 静态提升，后续更新直接复用，减少了对比的花销
+* 标记虚拟dom节点上的动态属性，在更新时只对比标记的部分
+* 将内联事件处理函数缓存，避免每次渲染时重新创建
+* 引入block的概念，通过createElementBlock创建，所谓block是一个相对稳定的结构，也就是没有用到结构性指令，例如v-if，v-for,block内追踪所有后代节点，不只是子节点，编译结果会进行打平
+相当于遍历数组而不是一个树