
# 学习笔记 - 我的技术成长之路

## 为什么要写学习笔记

在技术领域，知识更新非常快，学习笔记不仅能帮助我巩固所学，还能让我在未来回顾时快速找回当时的思考。

### 笔记的价值

1. **记忆强化**：书写过程本身就是一种记忆强化
2. **知识梳理**：整理笔记时需要思考和归纳
3. **快速回顾**：需要时可以快速查阅
4. **分享交流**：帮助他人，也获得反馈

## 学习笔记分类

我将学习笔记分为以下几个类别：

### 前端技术
- JavaScript/TypeScript
- React/Vue/Next.js
- CSS/Tailwind/动画
- 浏览器原理

### 后端技术
- Node.js/Python/Go
- 数据库/缓存
- API设计/微服务
- 性能优化

### 算法与数据结构
- 经典算法实现
- 复杂度分析
- LeetCode解题记录
- 面试准备

### 系统设计
- 架构设计原则
- 分布式系统
- 高可用方案
- 设计模式

## 笔记整理方法

### 1. 结构化记录

```
├── 核心概念
├── 代码示例
├── 原理图解
├── 实践心得
└── 参考资料
```

### 2. 使用Markdown

Markdown 是最适合写技术笔记的格式：
- 支持代码高亮
- 易于版本控制
- 跨平台兼容

### 3. 定期回顾

每周花时间回顾本周的笔记，每月做一次总结。

## 开始你的学习之旅

```javascript
// 学习的路上，每一天都在进步
const learning = {
  day: 0,
  knowledge: 0,
  
  study(topic) {
    this.day++;
    this.knowledge += Math.random() * 10;
    console.log(`Day ${this.day}: 学习了 ${topic}`);
  },
  
  review() {
    this.knowledge *= 1.1; // 回顾让知识更牢固
    console.log('复习完成，知识巩固！');
  }
};

learning.study('JavaScript闭包');
learning.study('React Hooks');
learning.review();
```

## 结语

学习是一个持续的过程，希望这些笔记能记录我的成长轨迹，也希望能帮助到正在学习路上的你。

> 「Stay hungry, stay foolish.」 - Steve Jobs

记录我的技术学习历程，分享学习心得和笔记整理方法。

学习笔记 - 我的技术成长之路


# 虚拟列表滚动优化

1. 一般情况下虚拟列表滚动都是设置固定高度，滚动时通过计算当前可见区域的索引范围，只渲染可见区域的项，避免渲染所有项，提高性能。
但是在有些情况下会有列表的item 是动态高度的情况，比如列表项根据内容长度自动调整高度。
2. 设置缓冲区，在用户滚动过快的情况下，偶尔会出现白屏闪烁的显现



## 动态高度需要注意的细节
注意点：
1. 如何获取列表项的真实高度
2. 和列表项的高度相关的计算应该如何计算
3. 列表的渲染是否会发生变化

我刚开始的第一个方案是将列表的高度放在数组中，但是存在问题，如果列表项的高度不在设置的范围内，会导致渲染错误。
后来思考，将列表先渲染到屏幕外，对其高度进行缓存，然后再将其渲染到可见区域，但这样也不好，预先渲染存在性能问题，会导致渲染成本翻倍。

最终采用，预估高度先渲染的的方案， 先创建一个预估高度的列表项。先按照预估值渲染，有了真实高度之后，再将其更新到缓存列表中
需要注意索引，

## 白屏闪烁
产生的原因： 用户滚动过快，没有给新列表项的渲染足够的时间，于是在原来的技术上增加一个缓存区，这样整个渲染区域是由可视区域+缓存区组成。


## 长列表常见解决方案

除了虚拟列表，长列表的优化方案
长列表的痛点： 渲染耗时，性能底下，页面卡顿

早起有基于时间分片的方案： 使用 requestAnimationFrame,requestIdleCallback这些浏览器提供的API, 由浏览器来决定执行的时机 将渲染任务分片，避免渲染耗时过长，导致页面卡顿。
大量数据被分为多次渲染，每次只渲染一个片段，每个片段处理完定量的数据之后，将主线程交还浏览器，从而解决页面卡顿的问题，但是时间分片只能解决卡顿问题，
分多个时间段来处理，渲染依然是耗时的，并可有大量的 list DOM 存与页面中，性能依然底下。 
（先使用）

## 还有哪些优化空间
前面虚拟列表仍然有优化空间，前面的方案使用监听scroll 事件来处理可见区域的数据更新，，但是有个问题，当滚动发生以后，scroll 事件会频繁触发，很多时候造成重复计算的问题，可能存在一定的性能浪费
其实这里可以使用 intersectionObserver 来替换监听scroll，相比scroll,intersectionObserver可以设置多个阈值来检测元素进入视口的不同程度，只有必要时才会触发渲染，而且监听回调也是异步的，不会阻塞主线程，从而提高性能。

还有一个问题是不定高的列表项中包含图片，高度由内容撑开，由于图拍呢发送网络请求，此时无法保证，在获取高度的时候，图片是否已经加载完成。从而导致计算不精确，这里可以使用 resizeObserver 来监听每个列表项的高度变化，当列表项的高度变化时，再更新缓存列表中对应项的高度。

缺点： intersectionObserver，resizeObserver 存在浏览器兼容问题


虚拟列表滚动优化


# 微前端应用

## 微前端目前的流行库

| 框架 | single-spa | qiankun | wujie | micro-app |
|----|----|----|----|---|
| 简介 | 开源社区，微前端鼻祖 | 蚂蚁金服，基于single-spa | 腾讯，基于webcomponents和iframe | 京东，基于webcomponents |
| 应用加载 | 核心是一种运行时协议，定义了主应用如何配置微应用，从何感知微应用的加载和卸载时机 | 基于但是区别于spa加载应用的方式，他通过import-html-entry方式来加载微应用 | 基于webcomponents和iframe沙箱来实现微前端组件式加载 | 借鉴了webcomponent的思想，通过customElement 结合自定义shadowdom ，将微前端封装成一个组件，来加载微应用 |
| DOM 隔离 | 无 | 基于shandow-dom | iframe 通过proxy 的方式将DOM 劫持到shadow-dom 中 | 基于shadow-dom实现 |
| CSS 隔离 | 无 | 支持shadow dom 和scoped css | 基于 iframe 劫持和shadow-dom 实现css 隔离 | 默认scoped css 也支持shadow-dom,但是官方提示对React 支持不好，慎用 |
| 状态管理通信| 无｜ 提供了actions 全局状态管理与基于props的注入通信 | props注入基于iframe同域下的window去中心化的eventBus | window.microApp上挂载了dispatch,getData,setData等丰富的api用于通信 |



## 微前端改造遇到的技术问题

1. 对于微前端的理解
2. 资源加载机制
3. JS 沙箱隔离
4. CSS 沙箱隔离
5. 应用通信
6. 预加载
7. 其他场景问题

微前端应用


# JavaScript闭包深入理解

## 什么是闭包

**闭包（Closure）** 是指函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行。

## 闭包的形成条件

1. 函数嵌套
2. 内部函数引用外部函数的变量
3. 内部函数被外部引用

```javascript
function outer() {
  const outerVar = '外部变量';
  
  function inner() {
    console.log(outerVar); // inner函数可以访问outerVar
  }
  
  return inner;
}

const innerFunc = outer();
innerFunc(); // 输出: 外部变量
```

## 闭包的应用场景

### 1. 数据私有化

```javascript
function createCounter() {
  let count = 0;
  
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
```

### 2. 函数柯里化

```javascript
function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2);
const triple = multiply(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15
```

### 3. 模块化

```javascript
const module = (function() {
  const privateVar = '私有变量';
  
  function privateMethod() {
    return privateVar;
  }
  
  return {
    publicMethod() {
      return privateMethod();
    }
  };
})();

console.log(module.publicMethod()); // 私有变量
console.log(module.privateVar); // undefined
```

## 闭包与内存管理

闭包会导致外部函数的作用域不会被垃圾回收，因为内部函数仍然引用着它。

```javascript
function createHeavyObject() {
  const heavyData = new Array(1000000).fill('data');
  
  return function() {
    return heavyData.length;
  };
}

const getLength = createHeavyObject();
// heavyData 仍然被引用，不会被回收
```

**注意**：合理使用闭包，避免不必要的内存泄漏。

## 总结

闭包是JavaScript中非常重要的概念，掌握它对于理解作用域、模块化和函数式编程都非常有帮助。

深入理解JavaScript闭包的概念、原理和应用场景。

JavaScript闭包深入理解

# 二分查找算法详解

## 什么是二分查找

**二分查找（Binary Search）** 是一种高效的搜索算法，适用于有序数组。

## 核心思想

每次将搜索范围缩小一半，直到找到目标元素或搜索范围为空。

## 时间复杂度

- **最优情况**：O(1) - 目标元素在中间
- **最坏情况**：O(log n) - 需要不断缩小范围

## 实现方式

### 方式一：递归实现

```javascript
function binarySearchRecursive(arr, target, left, right) {
 if (left > right) return -1;
 
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] === target) {
 return mid;
 } else if (arr[mid] < target) {
 return binarySearchRecursive(arr, target, mid + 1, right);
 } else {
 return binarySearchRecursive(arr, target, left, mid - 1);
 }
}

const arr = [1, 3, 5, 7, 9, 11, 13];
console.log(binarySearchRecursive(arr, 7, 0, arr.length - 1)); // 3
```

### 方式二：迭代实现

```javascript
function binarySearchIterative(arr, target) {
 let left = 0;
 let right = arr.length - 1;
 
 while (left <= right) {
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] === target) {
 return mid;
 } else if (arr[mid] < target) {
 left = mid + 1;
 } else {
 right = mid - 1;
 }
 }
 
 return -1;
}

const arr = [1, 3, 5, 7, 9, 11, 13];
console.log(binarySearchIterative(arr, 9)); // 4
```

## 常见变形

### 查找第一个等于目标的元素

```javascript
function findFirstEqual(arr, target) {
 let left = 0;
 let right = arr.length - 1;
 let result = -1;
 
 while (left <= right) {
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] === target) {
 result = mid;
 right = mid - 1; // 继续向左查找
 } else if (arr[mid] < target) {
 left = mid + 1;
 } else {
 right = mid - 1;
 }
 }
 
 return result;
}

const arr = [1, 2, 2, 2, 3, 4];
console.log(findFirstEqual(arr, 2)); // 1
```

### 查找最后一个小于等于目标的元素

```javascript
function findLastLessOrEqual(arr, target) {
 let left = 0;
 let right = arr.length - 1;
 let result = -1;
 
 while (left <= right) {
 const mid = Math.floor((left + right) / 2);
 
 if (arr[mid] <= target) {
 result = mid;
 left = mid + 1; // 继续向右查找
 } else {
 right = mid - 1;
 }
 }
 
 return result;
}

const arr = [1, 3, 5, 7, 9];
console.log(findLastLessOrEqual(arr, 6)); // 2
```

## 应用场景

1. **有序数组查找**：数据库索引、排序后的列表
2. **二分答案**：在可能的答案范围内二分查找
3. **边界查找**：寻找插入位置、上下界

## LeetCode推荐题目

- [704. Binary Search](https://leetcode.com/problems/binary-search/)
- [35. Search Insert Position](https://leetcode.com/problems/search-insert-position/)
- [34. Find First and Last Position of Element in Sorted Array](https://leetcode.com/problems/find-first-and-last-position-of-element-in-sorted-array/)
- [153. Find Minimum in Rotated Sorted Array](https://leetcode.com/problems/find-minimum-in-rotated-sorted-array/)

## 总结

二分查找是非常高效的搜索算法，但要求数组必须有序。掌握二分查找及其各种变形，对于解决算法问题非常有帮助。

深入理解二分查找算法的原理、实现和应用场景。

二分查找算法详解


# 前端面试笔记整理

这些笔记整理自 `resourse/` 中的原始面试记录。内容只对原文进行分类、合并和语句修正，没有补充原始笔记之外的结论。

## 目录

| 分类 | 内容 |
| --- | --- |
| [HTML](HTML/README.md) | HTML 语义化、标签、DOM 事件、SEO、页面可见性 |
| [CSS](CSS/README.md) | 单位、BFC、布局、定位、层叠、动画、盒模型 |
| [JavaScript](JavaScript/README.md) | 类型、作用域、原型、异步、手写题、浏览器线程 |
| [TypeScript](TypeScript/README.md) | 类型系统、类型操作、类型安全、配置文件 |
| [Vue](Vue/README.md) | Vue 2/3 响应式、Computed、Watch、Diff |
| [React](React/README.md) | JSX、虚拟 DOM、Fiber、渲染、事件、Hooks |
| [HTTP 与网络](HTTP与网络/README.md) | HTTP、缓存、跨域、网络模型、URL 请求过程、安全 |
| [性能优化](性能优化/README.md) | 首屏加载、构建、网络、渲染和运行时优化 |
| [Node](Node/README.md) | Event Loop、任务与微任务 |
| [Webpack](Webpack/README.md) | 配置、Source Map、编译过程、Loader、Plugin |
| [Nginx](Nginx/README.md) | 负载均衡策略 |
| [Web3](Web3/README.md) | 钱包连接、EIP-1193、EIP-6963、生态 |

原始笔记仍保留在 `resourse/`，便于回查上下文和图片。


整理 HTML、CSS、JavaScript、框架与网络等前端知识，便于系统复习和日常查阅。

前端学习笔记整理

深入理解事件循环的原理、实现和应用场景。

事件循环

# Promise 详解

## Promise 规范

_规范_： Promise 是一套专门处理异步场景的规范，它能有效的避免回调地狱的产生，使用异步代码更加清晰，简洁，统一。

这套规范最早诞生于前端社区， 规范名称为 **[Promise A+](https://promisesaplus.com/)**

Promise A+ 规定

1. 所有的异步场景，都可以看做一个异步任务，每个异步任务，在JS中应该表现为一个*对象*
2. 每个任务对象都应该有两个阶段和三个状态
 - 阶段：未决状态（unsettled）、已决状态（settled）
 - 状态：挂起状态（pending）、成功状态（fulfilled）、失败状态（rejected）
3. 状态流转
 - 挂起->成功 称为resolve;可能有一个相关的数据
 - 挂起->失败 称为reject; 可能有一个失败的原因
4. 可以针对任务进行后续处理，针对完成的后续处理称之为 onFulfilled ，针对失败的后续处理称之为 onRejected

## Promise API

ES6 提供了一套API, 实现了 Promise A+ 规范

### catch方法

`.catch(onRejected)` === `.then(null,onRejected)`

`.then(onFulfilled,onRejected)` === `.then(onFulfilled).catch(onRejected)`

### 链式调用

1. then方法 必定会返回一个新的Promise对象，也可以理解后续处理也是一个任务
2. 新任务的状态取决于后续处理的结果
 - 没有相关的后续处理， 新任务的状态和前任务的状态一致，数据为前任务的数据
 - 如果有后续处理，但是后续处理还没有执行，则新任务挂在状态
 - 后续处理执行完成后，新任务的状态和数据会根据后续处理的结果而改变
 - 后续处理失败，新任务的状态为失败状态，数据为后续处理的失败原因
 - 后续执行返回一个新的Promise对象，新任务的状态和数据会根据后续处理的结果而改变

### 静态方法

 

| 方法 | 描述 |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Promise.resolve(data) | 将一个成功状态的Promise对象返回 |
| Promise.reject(reason) | 将一个失败状态的Promise对象返回 |
| Promise.all([]) | 返回一个任务数组， 全部成功则成功,数据为数组 任何一个失败则失败,数据为失败的任务数据 |
| Promise.any([]) | 任一成功 → 该成功值 全部失败报错提示 `AggregateError: All promises were rejected` |
| Promise.allSettled([]) | 全部完成（不论成功/失败） 返回数据格式 `[{"status": "rejected","reason": 1},{"status": "fulfilled","value": 2}]` ,没有失败情况 |
| Promise.race([]) | 返回最先处理好的任务，状态为最先 |

### 消除回调

有了Promise 异步任务有了统一的处理方式
有了统一的处理方式，ES官方就可以对其进一步优化
ES7 提供了 async/await 语法糖，进一步简化了异步代码的编写
`async` 函数的返回值是一个 Promise 对象，`await` 关键字 后面的表达式，必须是一个 Promise 对象，否则会报错

## 练习题

1. 练习1

```javascript
const promise = new Promise((resolve, reject) => {
 console.log(1);
 resolve();
 console.log(2);
});
promise.then(() => {
 console.log(3);
});
console.log(4);
```

> 1 2 3 4

```javascript
const promise = new Promise((resolve, reject) => {
 console.log(1);
 setTimeout(() => {
 console.log(2);
 resolve();
 console.log(3);
 }, 0);
});

promise.then(() => {
 console.log(4);
});
console.log(5);
```

> 1 5 2 3 4

2. 练习2

```javascript
Promise.resolve()
 .then(() => {
 console.log(0);
 return Promise.resolve(4);
 })
 .then((res) => console.log(res));

Promise.resolve()
 .then(() => console.log(1))
 .then(() => console.log(2))
 .then(() => console.log(3))

 .then(() => console.log(5))
 .then(() => console.log(6));
```

> 0, 1, 2, 3, 4, 5, 6

```javascript
async function m() {
 const n = await 1;
 console.log(n);
}
m();
console.log(2);
```

> 2, 1

```javascript
async function m() {
 console.log(0);
 const n = await 1;
 console.log(n);
}
(async () => {
 await m();
 console.log(2);
})();
console.log(3);
```

> 0, 3, 1, 2

```javascript
async function m1() {
 return 1;
}
async function m2() {
 const n = await m1();
 console.log(n);
 return 2;
}
async function m3() {
 const n = m2();
 console.log(n);
 return 3;
}
m3().then((n) => console.log(n));
m3();
console.log(4);
```

> promise:pending, promise:pending, 4, 1, 3, 1

```javascript
var a;
var b = new Promise((resolve) => {
 console.log("promise1");
 setTimeout(() => {
 resolve();
 }, 1000);
})
 .then(() => {
 console.log("promise2");
 })
 .then(() => {
 console.log("promise3");
 })
 .then(() => {
 console.log("promise4");
 });

a = new Promise(async (resolve) => {
 console.log(a);
 await b;
 console.log(a);
 console.log("after1");
 await a;
 resolve(true);
 console.log("after2");
});
console.log("end");
```

> promise1, undefined, end, promise2, promise3, promise4, promise:pending

```javascript
async function m1() {
 return 1;
}
async function m2() {
 const n = await m1();
 console.log(n);
 return 2;
}
async function m3() {
 const n = await m2();
 console.log(n);
 return 3;
}
m3().then((n) => console.log(n));
m3();
console.log(4);
```

> 4,1, 1, 2, 2, 3

```javascript
async function async1() {
 console.log("async1 start");
 await async2();
 console.log("async1 end");
}
async function async2() {
 console.log("async2");
}

console.log("script start");
setTimeout(() => {
 console.log("setTimeout");
}, 0);
async1();
new Promise((resolve) => {
 console.log("promise1");
 resolve();
}).then(() => {
 console.log("promise2");
});
console.log("script end");
```

> script start , async1 start , async2 , promise1 script end, async1 end, promise2 setTimeout

## 手写Promise

```javascript
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

const runMicroTask = (task) => {
 // node 环境
 if (process.nextTick) {
 return process.nextTick(task);
 }
 // 浏览器环境
 if (window.queueMicrotask) {
 return window.queueMicrotask(task);
 }
 // 其他环境
 return setTimeout(task, 0);
};

const isLikePromise = (promise) => {
 return (
 promise && typeof promise === "object" && typeof promise.then === "function"
 );
};

const isPromise = (promise) => {
 return promise instanceof MyPromise;
};

class MyPromise {
 _state = PENDING;
 _value = undefined;
 #tasks = [];
 constructor(executor) {
 try {
 executor(this._resolve.bind(this), this._reject.bind(this));
 } catch (error) {
 this._reject(error);
 }
 }

 #changeState(state, value) {
 if (this._state !== PENDING) return;
 this._state = state;
 this._value = value;
 this.#runTasks();
 }
 _resolve(value) {
 this.#changeState(FULFILLED, value);
 }
 _reject(reason) {
 this.#changeState(REJECTED, reason);
 }

 #runTasks() {
 if (this._state === PENDING) return;

 while (this.#tasks[0]) {
 const task = this.#tasks.shift();
 this.#runOneTask(task);
 }
 }
 #runOneTask({ onFulfilled, onRejected, resolve, reject }) {
 runMicroTask(() => {
 let executor;
 if (this._state === FULFILLED) {
 executor = onFulfilled;
 } else if (this._state === REJECTED) {
 executor = onRejected;
 }

 if (typeof executor !== "function") {
 if (this._state === FULFILLED) {
 resolve(this._value);
 } else {
 reject(this._value);
 }
 return;
 }

 try {
 const result = executor(this._value);
 if (isLikePromise(result)) {
 result.then(resolve, reject);
 } else {
 if (this._state === FULFILLED) {
 resolve(result);
 } else {
 reject(result);
 }
 }
 } catch (err) {
 reject(err);
 }
 });
 }
 then(onFulfilled, onRejected) {
 return new MyPromise((resolve, reject) => {
 this.#tasks.push({
 onFulfilled,
 onRejected,
 resolve,
 reject,
 });
 this.#runTasks();
 });
 }
 cache(onRejected) {
 return this.then(null, onRejected);
 }
 finally(onFinally) {
 return this.then(
 (data) => {
 onFinally();
 return data;
 },
 (err) => {
 onFinally();
 throw err;
 },
 );
 }
}
```

### 手写Promise.resolve

```javascript
Promise.resolve = (reason) => {
 if (isPromise(data)) {
 return data;
 }
 return new MyPromise((resolve, reject) => {
 if (isLikePromise(data)) {
 data.then(resolve, reject);
 } else {
 resolve(data);
 }
 });
};
```

### 手写Promise.reject

```javascript
Promise.reject = (reason) => {
 return new MyPromise((resolve, reject) => {
 reject(reason);
 });
};
```

### 手写Promise.all

```javascript
MyPromise.all = (promises) => {
 return new MyPromise((resolve, reject) => {
 const results = [];
 let count = 0;
 for (const promise of promises) {
 MyPromise.resolve(promise).then((data) => {
 results[count] = data;
 count++;
 if (count === promises.length) {
 resolve(results);
 }
 });
 }
 });
};
```

### 手写Promise.allSettled

```javascript
MyPromise.allSettled = (promises) => {
 return new MyPromise((resolve, reject) => {
 const results = [];
 let count = 0;
 for (const promise of promises) {
 MyPromise.resolve(promise).then(
 (data) => {
 results[count] = {
 status: "fulfilled",
 value: data,
 };
 count++;
 if (count === promises.length) {
 resolve(results);
 }
 },
 (err) => {
 results[count] = {
 status: "rejected",
 reason: err,
 };
 count++;
 if (count === promises.length) {
 resolve(results);
 }
 },
 );
 }
 });
};
```

### 手写Promise.race

```javascript
MyPromise.race = (promises) => {
 return new MyPromise((resolve, reject) => {
 for (const promise of promises) {
 MyPromise.resolve(promise).then(resolve, reject);
 }
 });
};
```

深入理解Promise的原理、实现和应用场景。

学习笔记