docs: update

docs/algorithm/sort-problem.md

@@ -47,3 +47,40 @@ function bubbleSort(arr: number[]) {
   return arr;
 }
 ```
+
+## 快排
+
+```ts
+function quickSort(arr: number[], startIndex = 0, endIndex = arr.length - 1) {
+  if (startIndex >= endIndex) {
+    // 如果开始索引大于等于结束索引，说明子数组长度为0或1，无需排序
+    return arr;
+  }
+
+  const pivotIndex = partition(arr, startIndex, endIndex); // 获取经过分区后基准值的索引
+
+  quickSort(arr, startIndex, pivotIndex - 1); // 递归排序基准值左边的子数组
+  quickSort(arr, pivotIndex + 1, endIndex); // 递归排序基准值右边的子数组
+  return arr;
+}
+
+function partition(
+  arr: number[],
+  startIndex: number,
+  endIndex: number,
+): number {
+  const pivot = arr[startIndex]; // 基准值
+  let mark = startIndex; // mark用来记录遍历过程中小于基准值的区域边界
+
+  for (let i = startIndex + 1; i <= endIndex; i++) {
+    if (arr[i] < pivot) {
+      mark++; // 找到小于基准值的元素，mark扩大区域边界
+      [arr[mark], arr[i]] = [arr[i], arr[mark]]; // 交换元素，将小于基准值的元素移至左边
+    }
+  }
+
+  // 将基准值交换到中间位置
+  [arr[startIndex], arr[mark]] = [arr[mark], arr[startIndex]];
+  return mark; // 返回基准值的最终索引
+}
+```

docs/algorithm/traverse-of-tree.md

@@ -107,7 +107,7 @@ function postorderTraversal(root: TreeNode) {
   stack.push(root);
   // 用栈
   while (stack.length) {
-    // 需要的顺序是左右根,那么放入栈的顺序是根右左,这样分别向前插
+    // 需要的顺序是左右根,那么出栈的顺序是右左根,这样分别向前插
     const top = stack.pop()!;
     res.unshift(top.val);
     top.left && stack.push(top.left);

docs/fe-basic/css/index.md

@@ -73,6 +73,21 @@ display:inline 水平方向的 margin，padding 有效，垂直方向无效。
 - webp 有损压缩，体积小
 - bmp 无损，不压缩，体积大，不适合网页
 
+:::tip how to detect webp support in project
+
+- 使用canvas, `toDataURL('image/webp').indexOf('data:image/webp') == 0` 来检测
+- 使用一张webp图片判断onload 和onerror 事件
+- 在html5中 使用：
+
+  ```html
+  <picture>
+    <source srcset="/path/to/image.webp" type="image/webp" />
+    <img src="/path/to/image.jpg" alt="insert alt text here" />
+  </picture>
+  ```
+
+:::
+
 ## CSS Sprites
 
 雪碧图，过时技术。将一个页面涉及到的所有图片都包含到一张大图，利用 background-repeat，background-position 实现图片的重复利用。
@@ -175,3 +190,7 @@ display:inline 水平方向的 margin，padding 有效，垂直方向无效。
 - sticky
 
   粘连定位。粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定值前为相对定位，之后为固定定位,固定定位相对于他的包含块。
+
+```
+
+```

docs/fe-basic/fe-engineering/Vite.md

@@ -18,12 +18,12 @@
 
 - 开发环境
 
-  - webpack是先解析依赖，打包构建再启动开发服务器 dev server 必须等待所有模块构建完成才启动。当修改了bundle中的一个子模块，整个bundle文件都会重新打包然后输出。项目越大，启动时间越长。
-  - vite是直接启动开发服务器，利用浏览器对esm的支持，当 import 模块时下载被导入的模块，当代码执行到模块加载时再请求对应模块的文件，本质上实现了动态加载。
+  - webpack 是先解析依赖，打包构建再启动开发服务器 devServer 必须等待所有模块构建完成才启动。当修改了bundle中的一个子模块，整个bundle文件都会重新打包然后输出。项目越大，启动时间越长。
+  - vite 是直接启动开发服务器，利用浏览器对 esm 的支持，当 import 模块时下载被导入的模块，当代码执行到模块加载时再请求对应模块的文件，本质上实现了动态加载。
 
 - 热更新
 
-所有打包工具实现热更新的思路基本都是：主要通过webSocket 创建浏览器和服务器的通信监听文件改变。当文件被修改时，服务端发送消息通知客户端修改代码，客户端对不同文件进行操作更新。
+所有打包工具实现热更新的思路基本都是：主要通过 webSocket 创建浏览器和服务端的通信监听文件改变。当文件被修改时，服务端发送消息通知客户端修改代码，客户端对不同文件进行操作更新。
 
 - Vite的热更新：监听文件系统的变更，只针对发生变更的模块进行重新加载。HMR的更新速度不会因为应用体积的增加而变慢。
 - webpack的热更新：当修改了bundle中的一个子模块，整个bundle文件都会重新打包然后输出

docs/fe-basic/fe-engineering/performance-optimization.md

@@ -8,13 +8,33 @@
 
 Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。有对应 chrome extension 使用参考：https://juejin.cn/post/6950855971379871757
 
+- First Paint 第一个像素绘制到屏幕的时间
 - First Contentful Paint 渲染出首个文本/首张图片的时间
 
   测量**加载**性能，最好在 2.5s 内。
 
+  ```js
+  const observer = new PerformanceObserver((list) => {
+    list.getEntries().forEach((entry) => {
+      console.log(entry);
+    });
+  });
+  observer.observe({ type: 'paint', buffered: true });
+  ```
+
 - Time to Interactive 可交互时间。大部分可视区域的事件都可以操作
 - Total Blocking Time ：= TTI - FCP
 - Largest Contentful Paint 视口中可见的最大图像或文本块的渲染时间
+
+  ```ts
+  const observer = new PerformanceObserver((list) => {
+    const entries = list.getEntries();
+    const lastEntry = entries[entries.length - 1];
+    console.log(lastEntry);
+  });
+  observer.observe({ type: 'largest-contentful-paint', buffered: true });
+  ```
+
 - Cumulative Layout Shift 布局偏移分数
 
 [如何使用 Lighthouse 性能检测工具 - 掘金](https://juejin.cn/post/6950855971379871757#heading-6)
@@ -23,8 +43,8 @@ Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量
 
 ## 相关指标
 
-- 首屏时间： 从浏览器输入地址并回车后到首屏内容渲染完毕的时间。
-- 白屏时间：从输入地址回车后到页面出现第一个元素的时间。
+- 首屏时间： 从浏览器输入地址并回车后到首屏内容渲染完毕的时间。可以使用performance.timing 的 domContentLoadedEventEnd - fetchStart
+- 白屏时间：从输入地址回车后到页面出现第一个元素的时间。FP
 - 可操作时间： 点击事件有反应。window.DOMContentLoaded
 - 总下载时间： window.onload
 
@@ -109,6 +129,13 @@ Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量
   - 回流重绘策略 修改类而不直接修改对应 CSS，transform 代替 top
   - 异步更新 异步修改 DOM 时包装为微任务
 
+- 浏览器资源优先级优化
+
+  - prefetch 预先请求并缓存未来可能使用的资源
+  - dns-prefetch 优化域名解析的时间，适用于加载第三方域名资源
+  - preconnect 涵盖了 DNS 查询、TLS 协商以及 TCP 握手等步骤
+  - preload 提前下载的重要资源，比如关键css/影响lcp的资源
+
 - 运行时加载：组件动态加载，图片懒加载
 
 ### 首屏优化
@@ -203,3 +230,4 @@ throttle 更适合需要实时响应的场景：拖拽进行放大缩小,滚动
 - [如何使用 Lighthouse 性能检测工具 - 掘金](https://juejin.cn/post/6950855971379871757#heading-6)
 - [性能优化-思维导图](https://docs.qq.com/mind/DWnljWm52eEVjWWNE)
 - [**写给中高级前端关于性能优化的 9 大策略和 6 大指标 | 网易四年实践 - 掘金**](https://juejin.cn/post/6981673766178783262#heading-6)
+- [【微信公众号：量子前端 2024-05-07 12:01】前端如何体系化性能优化？](https://mp.weixin.qq.com/s/SYM7iGrUeRZ5K6LlC_0WEw)

docs/fe-basic/fe-engineering/webpack.md

@@ -208,6 +208,20 @@ bundle
 - speed-measure-webpack-plugin 分析打包耗时，每个 loader ，plugin 构建耗费的时间
 - webpack-dashboard 了解当前构建现状，进度，每个 chunk 大小等
 
+## Module Federation
+
+模块联邦，核心作用是在当前应用中动态加载来自另一个应用的代码。
+
+分为
+
+- Local Modules 本地模块
+- Remote Modules 远程模块
+- Host 页面中首先被加载的应用，内部可以动态加载运行远程模块。
+- Remote 提供远程模块的应用，内部的本地模块暴露出去供Host 消费。
+- Bidirectional-hosts：双向Host，既是Host又是Remote的应用。
+
+使用模块联邦可以实现微前端，可以做到依赖共享，减少资源重复加载。
+
 ## Reference
 
 - [当面试官问 webpack 的时候他想知道什么 - 掘金](https://juejin.cn/post/6943468761575849992#heading-0)

docs/fe-basic/how-to-understand-router.md

@@ -32,8 +32,6 @@
 
 ## SPA
 
-> //todo: 整理位置
-
 页面渲染为前端渲染，共用一套 html。前端路由切换，匹配不同的组件。
 
 通过一系列的 js 文件进行前端渲染构建页面。

docs/fe-basic/javascript/basic/event-loop.md

@@ -107,6 +107,7 @@ new Promise((resolve) => {
     console.log('promise2');
   });
 console.log('script end');
+// script start ->async2 end->Promise->script end->async2 end1->promise1->promise2->async1 end->setTimeout
 ```
 
 ## NodeJS 的事件循环

docs/react/new.md

@@ -0,0 +1,36 @@
+# React 新动态
+
+## React Compiler
+
+近几年，许多前端框架拥抱基于 Signal 的细粒度更新，用于优化前端框架的性能问题。而React 基于 Fiber 的diff 更新成为了最大的短板，大量 re-render 造成的性能损耗，是不得不面对的挑战。（细粒度更新并非所有场景都有明显优势）
+
+React 提供了 memo/useMemo/useCallback 供开发者优化项目性能，但上手难度不低。
+
+React 19 将会推出 React Compiler，在开发者不调整任何代码的情况下，自动优化项目性能。帮助我们不使用上面几个api的情况下优化re-render。
+
+## React Server Components
+
+在Next.js中得到落地的实现。
+
+## 围绕异步编程的开发体验提升
+
+减少使用useEffect。
+使用新的use Api,可以从Promise/context中读取值，不是一个hook，可以在循环中或者条件语句中使用。但必须在组件或hook中使用。
+
+## form 相关hooks
+
+- useFormStatus [useFormStatus – React](https://react.dev/reference/react-dom/hooks/useFormStatus)
+
+  增强表单提交体验。在数据提交期间显示加载动画。
+
+- useFormState
+
+  简化服务器交互，管理表单提交状态并捕获服务器响应。不需要通常的 useEffect + setMessage。
+
+## useOptimistic
+
+乐观更新，为预期成功的场景设计，预期的反馈使交互感觉更快。
+
+## References
+
+- [被严重低估！React 19 又是一次开发方式的变革，useEffect 将会逐渐退出历史舞台](https://mp.weixin.qq.com/s?__biz=MzI4NjE3MzQzNg==&mid=2649868281&idx=1&sn=034c7a5b4696e70326d351c21ebabb37&chksm=f23a65a3bad3ded1696a5ad8e360c8741a0e0c5fe5845fe036146a14a7f22aaf9ffef7857a73&scene=132&exptype=timeline_recommend_article_extendread_samebiz&show_related_article=1&subscene=0&scene=132#wechat_redirect)