难点

Author: 张东

.vitepress/config.mts

@@ -259,6 +259,7 @@ export default defineConfig({
           items: [
             { text: "检查git commit内容", link: "/configure/project" },
             { text: "难点", link: "/configure/difficult" },
+            { text: "要点", link: "/configure/bagu" },
           ],
         },
       ],

browser/http/cache.md

@@ -43,6 +43,24 @@ etag也有强弱校验之分，弱校验前面会加上W/，区别是弱校验
 
 如果强缓存判断过期了，就会进入协商缓存，此时会发送http请求，请求头上会加上If-Modified-Since，If-None-Match,他们的值就是第一次返回的响应标头中的Last-Modified，Etag。如果返回304代表缓存没过期，否则返回200，服务器返回最新资源。
 
+## 启发式缓存
+HTTP 旨在尽可能多地缓存，因此即使没有给出 Cache-Control，如果满足某些条件，响应也会被存储和重用，也就是启发式缓存
+## 补充
+项目通过jekins上部署之后，刷新页面还是原来的内容，这应该也跟缓存有关
 
+注意到浏览器的刷新有三种，正常重新加载，硬性重新加载，清除缓存并硬性重新加载
+
+正常重新加载也就是只是重新加载页面而已，缓存有效还是照用
+
+硬性重新加载会在请求头上加一个cache-control：no-cache,cache-control一般是放在服务器的响应头上，但如果是在请求头上，no-cache允许客户端请求最新的响应即使保存的缓存是新鲜的
+
+并且请求头里也没有协商缓存相关的字段，所以强缓存和协商缓存都没有走。其效果类似于在开发者工具 Network 面板勾选了 Disable cache 选项
+
+清除缓存并硬性重新加载则是额外将我们保存的缓存删除
+
+## localStorage 和 sessionStorage
+* localStorage数据会一直保存，而sessionStorage关闭页签或者窗口会就会删除
+* localStorage同源的所有页签和窗口共享数据，sessionStorage仅在同一页签内共享数据
+* localStorage一般用来保存登录token，用户信息等，sessionStorage则适用于用户暂存的表单等
 ## 参考
 [前端缓存](https://juejin.cn/post/7340676808436547603)

configure/bagu.md

@@ -0,0 +1,28 @@
+---
+outline: deep
+layout: doc
+---
+## 事件循环
+首先js是单线程语言，使用事件循环的原因是为了避免代码阻塞
+
+由调用栈，任务队列，web Api组成
+
+调用栈用来存储同步任务，按顺序执行函数，任务队列分为 宏任务队列（MacroTask Queue） 和 微任务队列（MicroTask Queue），webapi是浏览器提供的异步 API（如 setTimeout、fetch），处理完成后将回调推入队列。
+
+第一步是同步任务直接进入调用栈执行，遇到异步任务交给 Web APIs 处理。第二步当调用栈为空时，事件循环优先清空微任务队列中的所有任务，第三步是从宏任务队列中取出一个任务（如 setTimeout、DOM 事件）执行，然后回到步骤 2。
+```js
+console.log("1"); // 同步任务
+
+setTimeout(() => console.log("2"), 0); // 宏任务
+
+Promise.resolve()
+  .then(() => console.log("3")) // 微任务
+  .then(() => console.log("4")); // 微任务
+
+console.log("5"); // 同步任务
+
+// 输出顺序：1 → 5 → 3 → 4 → 2
+```
+宏任务：`setTimeout`、`DOM 事件`、`I/O`
+
+微任务：`Promise回调`、`MutationObserver`

configure/difficult.md

@@ -2,16 +2,7 @@
 outline: deep
 layout: doc
 ---
-## 兼容性问题
-我们的项目要从外网迁移到内网,在内网的浏览器打开白屏,看控制台有报错.针对这个问题我的直觉就是兼容性问题,因为浏览器版本低可能不支持某些api,我们的打包工具是vite,
 
-发现需要再安装一个vite降级插件,然后按照文档配置,最后部署到内网,但是还是不行.我开始是在网上搜索发现基本找不到,因为内网的版本实在太低了,是谷歌62版本.
-
-找到一篇文章是还要使用babel进行针对性降级,但是我有点持怀疑态度,因为这个插件就是专门做降级的,就算版本再低通过这个插件也能做到才对.
-
-所以我不得不研究一下插件文档,我立马注意到一个target配置项,我当时用的是默认值,语法跟packagejson里的browerlist一样,所以我需要知道如果用的是默认值谷歌最低支持什么版本,
-
-我发现插件默认配置支持谷歌最低版本109,这个版本当然高于62了,所以我尝试修改browerlist语法让它>0.01%,发现62版本在它的支持范围内.最后重新部署页面能正常显示.
 ## 内存泄漏
 线上的商城打开某个商品会出现页面卡死，页面没有报错，所以可能是出现了内存泄露，我打开devtool 里的performance monitor,有两项数据异常，一个是cpu占用，一个是js堆,
 
@@ -58,7 +49,7 @@ layout: doc
 
 因为我是从0开始开发的，所以需要走搭建框架，调试，开发，发布到插件市场整个流程，每个部分我都需要研究学习文档并且还需要学习node的部分api。当然报错是必不可少的，所以解决报错也花了很多时间。
 
-完成这个功能我需要获取文件里导出的内容，实现这个功能的技术路线也十分曲折，最终确定使用babel的ast来获取导出内容，并针对这个功能写了一个npm包，并且ast可以增强我们插件的能力
+完成这个功能我需要获取文件里导出的内容，实现这个功能的技术路线也十分曲折，最终确定使用babel的ast来获取导出内容，并且ast可以增强我们插件的能力，即便如此使用ast解析除导出内容也不是一样容易的是，所以针对这个功能还写了一个npm包
 
 ui方面有两种实现分别是使用treeview或者webview，最终选择使用treeView