diff --git a/docs/learning-note/stenography/weekly-fe-perusal/mobx-observer.js b/docs/learning-note/stenography/weekly-fe-perusal/mobx-observer.js
new file mode 100644
index 0000000..4417ff5
--- /dev/null
+++ b/docs/learning-note/stenography/weekly-fe-perusal/mobx-observer.js
@@ -0,0 +1,95 @@
+---
+sidebar_position: 3
+---
+
+// For test only
+
+
+const reactionStacks = [];
+
+const targetsMap = new WeakMap();
+
+function track(target, key) {
+ const currentReaction = reactionStacks[reactionStacks.length - 1];
+
+ if (!currentReaction) return;
+
+ let targetMap = targetsMap.get(target);
+ if (!targetMap) {
+ targetMap = new Map();
+ targetsMap.set(key, targetMap);
+ }
+
+ let depsSet = targetMap.get(key);
+ if (!depsSet) {
+ depsSet = new Set();
+ targetMap.set(key, depsSet);
+ }
+
+ depsSet.add(currentReaction);
+}
+
+function trigger(target, key) {
+ const targetMap = targetsMap.get(target);
+ if (!targetMap) return;
+
+ const depsSet = targetMap.get(key);
+ if (!depsSet) return;
+
+ const depsToRun = [...depsSet];
+ depsToRun.forEach((deps) => {
+ deps.run();
+ });
+
+}
+
+function observable(obj) {
+ return new Proxy(obj, {
+ get(target, key, receiver) {
+ track(target, key);
+ return Reflect.get(target, key, receiver);
+ },
+
+ set(target, key, newValue, receiver) {
+ trigger(target, key);
+ return Reflect(target, key, newValue, receiver);
+ }
+ })
+}
+
+class Reaction {
+ constructor(fn) {
+ this.fn = fn
+ }
+
+ run() {
+ reactionStacks.push(this);
+
+ try {
+ this.fn();
+ } finally {
+ reactionStacks.pop();
+ }
+ }
+
+ track(cb) {
+ cb ();
+ }
+}
+
+function observe(fn) {
+ const reaction = new Reaction(() => reaction.track(fn));
+ reaction.run();
+}
+
+const state = observable({
+ name: 'hello world',
+ count: 1
+});
+
+observe(() => {
+ console.log('count value is ', state.count);
+});
+
+last modified at August 28, 2025 17:10
+
\ No newline at end of file
diff --git a/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md b/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md
index 2819e2a..d2e8d45 100644
--- a/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md
+++ b/docs/learning-note/stenography/weekly-fe-perusal/note-p3.md
@@ -1,5 +1,5 @@
---
-sidebar_position: 3
+sidebar_position: 4
---
# Perusal Series
@@ -186,7 +186,57 @@ LOD(Level of Detail)，数据详细级别。LOD 表达式，在一个查询中
## 29.精读《JS 中的内存管理》
+内存生命周期：
+1. 分配内存
+2. 使用内存（读/写）
+3. 释放内存（自动/手动）
+JS 的内存回收：
+- 标记清除：通过标记不再使用的对象，来回收内存（现代浏览器普遍采用）
+ - 从根节点开始，遍历所有可达对象，标记为“活跃”
+ - 垃圾回收器定期清理未标记的对象
+- 引用计数：通过计数引用对象的数量，来判断何时回收内存
+ - 限制：循环引用
-last modified at August 13, 2025 17:35
+## 30.精读《Javascript 事件循环与异步》
+
+1. 同步代码进入 call stack，遵循FIFO原则
+2. 异步代码进入 Event Loop 的 Task Queue
+3. 当 call stack 为空时（这个时机由宿主环境决定），Event Loop 会将 Task Queue 中的任务依次放入 call stack 执行
+
+Macrotask 和 Microtask
+- Macrotask：包括整体代码块、setTimeout、setInterval、I/O 操作等
+- Microtask：包括 Promise.then、MutationObserver、Process.nextTick（Node.js）等
+- 执行顺序：先执行所有 Microtask，再执行一个 Macrotask
+
+> **异步队列是周而复始执行，可以看作二维数组，横排是一个队列的一个个函数，纵排是一个个队列。 Microtask 把回调添加到当前队列，Macrotask 添加一个新的队列。**
+
+## 35.精读《dob - 框架实现》
+
+> MVVM 中，依赖追踪是核心
+
+依赖追踪分为两部分：**依赖收集**和**触发回调**
+
+实现参考 [mobx](./mobx-observer.js)
+
+## 36.精读《When You “Git” in Trouble- a Version Control Story》
+
+```shell
+git fsck --full # 检查repo完整性，会显示未被引用的对象
+git fsck --lost-found # 查找丢失的对象
+git fsck --unreachable # 查找不可达的对象
+
+git hash-object xxx.js # 计算文件的哈希值
+git cat-file -p # 查看对象内容
+git cat-file -t # 查看对象类型
+
+# blob 对象，存储文件内容
+# tree 对象，存储目录结构
+# commit 对象，存储提交信息，包括作者、时间、当前tree对象，前一个commit对象
+
+git reflog # 查看引用日志，找到丢失的分支或提交
+```
+
+
+last modified at August 28, 2025 17:10
\ No newline at end of file