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

## 为什么要写学习笔记

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

### 笔记的价值

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/)

## 总结

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

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

二分查找算法详解


# 网络协议

理解网络分层和应用协议。

## 网络分层模型

### TCP/IP四层模型

| 层         | 协议                   | 功能             |
| ---------- | ---------------------- | ---------------- |
| 应用层     | HTTP, HTTPS            | 提供应用服务     |
| 传输层     | TCP, UDP               | 提供数据传输     |
| 网络层     | IP, ICMP,路由器        | 提供路由选择     |
| 物理链路层 | Ethernet, Wi-Fi,交换机 | 提供数据链路服务 |

### TCP/IP五层模型

| 层         | 协议                   | 功能             |
| ---------- | ---------------------- | ---------------- |
| 应用层     | HTTP, HTTPS            | 提供应用服务     |
| 传输层     | TCP, UDP               | 提供数据传输     |
| 网络层     | IP, ICMP,路由器        | 提供路由选择     |
| 数据链路层 | Ethernet, Wi-Fi,交换机 | 提供数据链路服务 |
| 物理层     | 以太网, Wi-Fi          | 提供物理传输     |

### OSI七层模型（参考）

| 层         | 协议                                           | 功能             |
| ---------- | ---------------------------------------------- | ---------------- |
| 应用层     | 应用程序, 会话, 表示, 解密, 加密, 压缩, 解压缩 | 提供应用服务     |
| 表示层     | 数据, 文本, 图像, 音频, 视频                   | 提供数据表示     |
| 会话层     | 会话管理, 协议转换, 数据压缩                   | 提供会话管理     |
| 传输层     | TCP, UDP                                       | 提供数据传输     |
| 网络层     | IP, ICMP,路由器                                | 提供路由选择     |
| 数据链路层 | Ethernet, Wi-Fi,交换机                         | 提供数据链路服务 |
| 物理层     | 以太网, Wi-Fi                                  | 提供物理传输     |

## 应用协议

### HTTP

### URL

统一资源定位符，用于定位网络服务

http://a.com:80/news/detail?id=1234567890#h1

http: schema
a.com: domain
80: port
news/detail: path
id=1234567890: query
#h1: hash

包含一些细节：

> - 当协议是http时，默认端口号是80
> - 当协议是https时，默认端口号是443
> - schema,domain,path 是必填项

### HTTP

#### 传递消息的模式

请求-响应模式

#### 传递消息的格式

HTTP的消息格式是纯文本，文本分为三个部分

> - 请求行
> - 请求头
> - 空行
> - 请求体

```
GET /news/detail?id=1234567890 HTTP/1.1
Host: a.com:80
Content-Type: application/x-www-form-urlencoded


```

##### 请求行

> - 请求方法
> - 请求方法的取值有GET, POST, PUT, DELETE, OPTIONS, TRACE, CONNECT

> - 请求路径
> - 请求路径的取值是资源的路径，例如/news/detail?id=1234567890

> - HTTP版本
> - HTTP版本的取值有HTTP/1.0, HTTP/1.1, HTTP/2.0

##### 请求头

> - Host(request header)
> - Content-Type
>   请求体的媒体类型，例如`application/x-www-form-urlencoded`, `application/json`，`multipart/form-data; boundary=aaa`等


网络和协议


# Markdown 图片使用演示

本文展示在博客文章中插入图片的几种方式。

## 方式一：本地图片

将图片放在 `public/images/` 目录下，然后使用相对路径引用：

```markdown
![我的图片](/images/example.png)
```

**示例：**

![示例图片占位符](https://via.placeholder.com/800x400/667eea/ffffff?text=Local+Image+Example)

## 方式二：外部图片 URL

直接使用完整的图片 URL：

```markdown
![图片描述](https://example.com/image.jpg)
```

**示例：**

![Unsplash 图片](https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80)

## 图片对齐和大小控制

你可以通过 HTML 语法来控制图片的对齐和大小：

### 居中对齐

<center>

![居中图片](https://via.placeholder.com/600x300/764ba2/ffffff?text=Centered+Image)

</center>

### 带标题的图片

> **提示：** 使用 `<center>` 标签可以让图片居中显示。

## 代码中的图片引用

在代码块中引用图片路径时不会被解析为图片：

```markdown
这里不是图片: /images/logo.png
这里才是图片: ![logo](/images/logo.png)
```

## 最佳实践

1. **使用本地图片** - 将博客相关的图片放在 `public/images/` 目录
2. **优化图片大小** - 上传前压缩图片，建议单张不超过 500KB
3. **使用 CDN** - 外部图片建议使用可靠的 CDN 服务
4. **添加 alt 文本** - 记得为图片添加描述性 alt 文本，利于 SEO 和无障碍访问

## 图片文件夹结构

建议的文件夹结构：

```
public/
├── images/
│   ├── posts/
│   │   ├── demo-image-1.png
│   │   └── demo-image-2.jpg
│   └── avatar.png
```

在文章中引用：

- `/images/posts/demo-image-1.png`
- `/images/avatar.png`

这样就可以在文章中方便地使用图片了！


演示在博客文章中如何使用图片

Markdown 图片使用演示


# 代码高亮演示

本文展示博客支持的代码高亮效果，包含多种编程语言示例。

## JavaScript

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to the blog, ${name}`;
}

const users = ["Alice", "Bob", "Charlie"];
users.forEach((user) => greet(user));
```

## Python

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 计算前10个斐波那契数
for i in range(10):
    print(fibonacci(i))
```

## TypeScript

```typescript
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}
```

## Go

```go
package main

import "fmt"

func main() {
    message := "Hello, World!"
    fmt.Println(message)

    // 计算平方
    for i := 1; i <= 5; i++ {
        fmt.Printf("%d² = %d\n", i, i*i)
    }
}
```

## Rust

```rust
fn main() {
    let numbers = vec![1, 2, 3, 4, 5];

    let sum: i32 = numbers.iter().sum();
    println!("Sum: {}", sum);

    // 过滤偶数
    let even_numbers: Vec<_> = numbers
        .into_iter()
        .filter(|&x| x % 2 == 0)
        .collect();

    println!("Even numbers: {:?}", even_numbers);
}
```

## HTML

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>示例页面</title>
  </head>
  <body>
    <div class="container">
      <h1>欢迎来到我的博客</h1>
      <p>这是一个段落。</p>
    </div>
  </body>
</html>
```

## CSS

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}
```

## SQL

```sql
SELECT
    users.name,
    COUNT(orders.id) as order_count
FROM users
LEFT JOIN orders ON users.id = orders.user_id
WHERE users.created_at >= '2024-01-01'
GROUP BY users.id, users.name
HAVING COUNT(orders.id) > 5
ORDER BY order_count DESC
LIMIT 10;
```

## 效果说明

代码高亮功能支持以下特性：

- 关键字高亮
- 字符串高亮
- 注释高亮
- 数字高亮
- 函数名高亮
- 类型高亮

希望这个演示能帮助你了解博客的代码展示效果！

## 图片

![111](/images/posts/demo/vercel.svg)


这是一个代码高亮效果的演示文章，展示不同编程语言的语法高亮。

代码高亮演示

汇总 HTML、CSS、JavaScript、框架、网络和工程化等前端面试知识与问答。

前端面试笔记


# 面试题

## 页面首屏加载时间优化手段

### 构建优化（减少构建体积，分包）

  - 路由懒加载

  - Tree Shaking

  - 代码分割

### 网络优化

  - CND

  - http2

  - preload/prefetch/preconnect

### 渲染优化

  - 关键渲染路径

  - 图片懒加载+webP类型的图片

  - 骨架屏减少用户等待焦虑

### 运行时优化

  - 虚拟滚动

  - 防抖截流

  - web worker

## React和Vue是如何描述UI的，有什么区别

### React使用jsx

  - React团队提供一个类似的XML的ES语法糖，再经过Babel编译后变成

    - V17之前
React.createElement("h1",null,"hell")
V17之后
const jsxRuntime = require("react/js-runtime")
jsxRuntime.jsx("h1",{children:"hello"})

      - 无论哪个版本在代码执行以后，返回的都是一个对象

        - {
type:"h1",
key:null,
ref:null,
props:{
   children:"hello"
}
_owner:null,
_store:{}
}

  - React团队觉得UI本质上和逻辑存在耦合部分，作为前端工程师，JS 使用时最多的，如果同时使用JS 来描述UI,就可以让UI 和逻辑更加紧密

### Vue使用 模版

  - 模版语法的历史要从后端说起，不同的后端有不同的模版引擎，在HTML中添加了逻辑语法，之后再动态的填充数据进去，如果看了VUE的模版语法其实是和后端的各种模版引擎非常相似的

    - 模版语法的出发点，既然前端框架使用HTML 来描述UI ,那么就扩展js语法，使他既可以描述UI,又可以填充逻辑

## 现在前端框架不仅仅是React ,Vue，还有一些新框架有什么区别呢

### 元素级框架

  - 细分主题 1

### 组件级框架

  - Vue

### 应用级框架

  - React

## 虚拟DOM

### 虚拟DOM 追早是由React 团队提出的，它是一种编程概念，在JS 中是以对象来描述的虚拟DOM 层次，

### 为什么需要虚拟DOM

  - 相较于DOM 的体积优势和速递优势

    - JS 层的计算速度比DOM 层面的计算要快

      - DOM  对象在被浏览器渲染之前需要很多事情要做

      - DOM对象上有很多属性

      - 虚拟DOM 发挥优势是在更新的时候，虚拟DOM 能够做到针对DOM 节点最小程度的修改

  - 多平台的抽象能力 

    - 浏览器使用ReactDOM

    - Native宿主环境使用React-Native包

    - Canvas,svg 或者VML(IE8)宿主环境使用ReactArt

    - ReactTest 包用于渲染出JS 对象，方便测试

  - React 中，通过JSX来描述UI,JSX仅仅是一个语法糖，会被Babel 编译为CreateElement 方法的调用，该方法会返回一个JS对象，该对象就是虚拟DOM,官方更倾向于成为React元素

## 是否了解过Fiber架构，相较于之前的Stack架构有什么优势

### V15之前的架构（Stack 架构）

  - Reconciler(协调器)： VDOM 的实现，负责根据自变量变化计算出UI的变化

    - 在Reconciler中，mount 的组件会调用mountComponent,update 的组件会调用updateComponent，这两个都是递归调用，一旦开始无法中断

      - CPU 瓶颈

        - VDOM 在比较差异时采用递归方式，js 计算消耗大量时间，从而导致画面卡顿，还有一些需要实时更新的内容产生卡顿

      - I/O  瓶颈

        - 各种自变量变化时，更新任务没有优先级，因此例如输入内容让用户感觉卡顿 

  - Renderer(渲染器)： 负责将UI的变化渲染到宿主环境中

## React 的渲染流程

### 整体氛围两个阶段

  - Render阶段

    - 调度器（Scheduler）

      - 主要工作是调度任务，，让所有的任务有优先级的概念，紧急任务可以优先执行，调度器在浏览器只有类似的API (requestIdleCallback) 但是有兼容性问题，React团队自己实现来一个这个机制，后面会把这个Scheduler 包单独发布，，其他有任务调度需求也可以时间调度器

    - 协调器（Reconciler）

      - 协调器是Render 的第二阶段工作，该阶段采用深度优先的遍历方式，并创建出一个个的FiberNode，

        - 并将其串联起来，在遍历时采用递和归两个阶段

          - 递阶段 执行beginWork,该方法会根据传入的FiberNode 创建下一层FiberNode

          - 归阶段： 执行completeWork， 收集副作用

  - Commit阶段

    - 渲染器（Renderer）

      - 主要负责将各种副作用（flags）commit 到宿主环境的UI 中，这个阶段分为三个子阶段

        - BeforMutation 阶段

        - mutation阶段

        - Layout阶段

## Fiber 是什么

### 是一种结构 称为Fiber

  - V16之后引入，各个FIber 通过链表方式串联起来的

### 是一种数据结构

  - 本质是一个JS 对象，在React元素基础上的升级版本，每一个FIberNode对象都会包含一个React元素类型，周围链接的FiberNode以及DOM 相关信息

### 动态的工作单元

  - 在每个FiberNode中，保存来本次更新中React元素变化的数据，还有就是需要执行的工作以及副作用信息（增加，删除，更新）

## Fiber 双缓冲区

### 原理和显卡工作原理一样

  - 显卡分为前缓冲区和后缓冲区，前缓冲区会显示图像，之后合成新图像会被写入后缓冲区，一旦后缓冲区写入完毕，前后缓冲区进行互换，将这种数据保存在缓冲区，再进行互换称为双缓冲区

    - React中存在两颗Fiber Tree, 一颗是真实UI对应的FIberTree，类比显卡的前缓冲区
另一颗内存中构建的FiberTree

    - React源码中有很多使用双fiber的场景

    - 细分主题 3

## 谈谈Computed 机制，缓存来什么，为什么computed不支持异步

### 响应式系统

  - Track: 进行收集依赖，建立数据和函数的映射关系

  - Trigger: 触发更新，重新执行数据所映射的所有函数

### 缓存的是上一次Getter算出来的值

### 为什么不支持异步

  - 主要原因，设计上的理念和使用场景上的考虑

  - 细分主题 2

## Watch 使用场景

### 用于监听数据变化，可以监听一个或者多个数据，当数据变化时执行一些用户的操作

### 副作用，监听器中的回到函数可以执行副作用操作，如发送网络请求，搜动DOM操作

### 支持异步

## VUE3的diff和Vue2的有什么区别

### Diff概念

  - diff算法用户比较两个虚拟DOM的算法，目标是寻找之间的差异，并根据差异高效的更新真实DOM，从而保证页面在数据变化后，进行最小程度的DOM操作

### Diff 流程

  - 从跟节点对比，查看是否相同

  - VUE2

    - 对比细节

      - 层层对比

        - 旧头新头对比

          - index++

        - 旧尾新尾对比

          - index--

        - 旧头新尾对比

          - 将旧头移动到尾部，新尾--

        - 旧尾新头对比

          - 将尾部元素移动到头部，新头++

        - 暴力比较（查找新头对应的节点）

          - 找到之后，将元素移动到旧头之前，新头++

          - 没有找到，就创建新的DOM 插入到旧头之前 新头++

        - 最后，旧节点有剩余，全部删除旧Dom
新节点列表有剩余，都新增节点

  - VUE3

    - 快速查找，使用最长递增子序列（贪心算法+二分查找）

      - 头头对比

      - 尾尾对比

      - 非复杂情况处理

        - 经历了头头对比尾尾对比之后，新旧列表任意一方结束，测试还会出现两种秦光

          - 旧节点列表有剩余

            - 旧节点全部删除

          - 新节点有剩余

            - 创建DOM,放在新节点头之前

          - 新旧节点都有剩余的情况

            - 初始化一个 keyToNewIndexMap

              - 便利还未处理的新节点，将下标维护进容器中  key-index

            - 初始化一个newIndexToOldIndexMap

              - 新建一个和未处理新节点个数一样长度的数组，每一项都填充0

              - 是为了有面计算，新节点是否在旧节点中

              - 如果计算之后，还有0的，则表示旧节点中没有当前节点

            - 更新newIndexTOOldIndexMap

              - 超找旧节点中是否有新节点的内容，有的将0改为1

              - 细分主题 2

      - 复杂情况处理

## React 和VUE中key 有什么做分别有什么区别

### React

  - 细分主题 1

## Vue3的响应式和Vue2的是否有改变，有哪些具体改变

### 1. 数据拦截的变化

  - VUE2 使用Object.definPropety 进行拦截

    - 针对对象的特定属性的读写操作进行拦截

  - VUE3 使用Proxy+ Object.definpropety

    - Proxy针对对象针对拦截，属性的读取，赋值，属性的删除增加

### 2. 创建响应式数据的变化

  - 通过data来创建响应式

  - VU3 通过Ref Reactive

### 3. 依赖收集的变化

  - VU2 Watcher+Dep

    - 每个响应式属性都有一个Dep 实例，用于依赖收集，内部包含一个数组存储这个属性的Watcher

    - 属性改变后，dep 会通知watcher 做更新操作

  - VUE3： WeakMap+Map+set

    - weakMap 键对应的事响应式对象，，值是一个Map,,这个Map 的键是对象的属性，值是Set,set中存储了这个属性的effect函数


整理前端首屏优化、浏览器原理、JavaScript、网络和工程化等常见面试题。

前端面试题整理


# TypeScript

## 类型理解

### 类型的分类

  - JS 已有的类型

    - 原始类型

      - number

      - string

      - boolean

      - null / undefined

      - bigint

    - 复合类型

      - object

        - 数组

        - 普通对象

        - 函数

        - 内置对象

          - Date

          - Regexp

          - Error object

          - 集合

          - promise

          - proxy

  - TS 新增的类型

    - any

    - void

    - unknown

    - never

    - 类型别名 （Type Aliases）

    - 元组（Tuples）

    - 联合类型（Union types）

      - 使用操作符号｜
const x : string|number = 1

    - 交叉类型（IntersectionTypes）

    - 字面量类型

      - const b = "Hello'
let d: "hello"

    - 对象字面量类型

    - 接口（Interface）

    - 泛型（Generices）

    - 枚举（Enums）

    - Unique symbol

    - 模版字符串类型

    - 索引签名（index signatures）

    - 映射类型 （mapped Types）

    - 条件类型

### 类型的操作关键字

  - typeof

  - instanceof

  - 类型断言

    - <Type> 和an Type

  - readonly

  - keyof

  - in

  - 方括号[]

  - 条件运算符

    - extends z ? y:x

  - is

  - infer

  - ?

  - &

  - |

### 类型安全

  - 概念： 借助类型避免程序做出无效的事情

    - 无效是可以指运行时异常，也可以是更严重的程序崩溃，也可以是是无异常，但是做事情没有意义

### 编译器

  - 编译器解析步骤

    - 1. 把程序解析成AST

    - 2. 把AST 编译成字节码

    - 3. 运行时计算字节码

  - TS 不直接编译成字节吗， 而是编译成javascript

### 类型检查

  - 类型检查时为了保证类型安全

  - 类型检查器

    - 概念： 检查代码是否符合类型安全要求的特殊程序

  - TS 编译过程

    - 1. Typescript 源码  -> Typescript AST

    - 2. 类型检查器检查AST

    - 3. Typescript AST -> Javascript 源码

    - 4. JS 源码 -> JS AST

    - 5. JS AST -> 字节码

    - 6. 运行时计算字节码

  - 类型只会在类型检查中使用

    - 程序中的类型对程序生成的输出没有任何影响

    - 这个特性确保我们可以随便的改进程序中的类型，而无需担心会破坏应用的逻辑功能

## 函数与泛型

## 类型编程

## 类和接口

## 装饰器

## 工程化

## 注意点

### 全局变量问题

  - TS 在默认情况下做出如下假设

    - 默认当前环境时DOM环境中

    - 如果代码中没有模块化，默认代码是全局执行的，所以变量都是全局变量

## tsconfig.json

### compilerOptions

  - 生成Emit

    - outDir

      - 指定输出目录，如果没配置，默认和对应ts文件同目录

    - noEmit

      - 不输入文件，即编译后不会生成任何js文件

    - declaration

      - 生成类型声明文件.d.ts

    - emitDeclarationOnly

      - 只生成.d.ts文件，不生成.js 文件

    - removeComments

      - 在编译后的。js文件中删除注释

### 其他

  - include

    - 指定需要编译的文件或者目录

    - 默认： **/*

  - exclude

    - 指定编译器需要排出的文件，文件夹

    - 默认会排出
node_modules

  - files

  - extends

  - references


从类型分类、类型操作到类型安全和编译流程，记录 TypeScript 学习要点。

TypeScript 类型系统详解


# Web3

## 钱包连接方式

DApp 连接钱包的方式包括：浏览器钱包插件、在钱包 App 内访问 DApp，以及通过 WalletConnect 协议建立连接。原笔记将 WalletConnect 描述为通过服务端中转实现连接，并提到了 EIP-1328。

浏览器插件钱包会向运行环境注入接口，DApp 再通过约定接口调用钱包。原笔记重点记录了 EIP-1193 和 EIP-6963 两种规范。

## EIP-1193

EIP-1193 约定了浏览器中 JavaScript 与钱包交互的方式，定义 `window.ethereum` 对象的方法和事件。其限制是全局只有一个 `window.ethereum`，安装多个钱包时可能出现钱包争抢对象的问题，DApp 也需要适配不同钱包。

## EIP-6963

EIP-6963 是对 EIP-1193 发现机制的改进。它不再只依赖单一的 `window.ethereum`，而是通过 `window` 事件与钱包交互，使多个钱包能够同时被 DApp 发现，避免争抢同一个全局对象。

## 生态

原笔记将 Web3 生态分为链、应用和服务。

- 链：Ethereum、Polygon、Optimism、Arbitrum、Solana、Avalanche、Sui。
- 应用：DEX、去中心化借贷、NFT 项目和市场、治理、GameFi、预言机、跨链桥。
- DEX 示例：Uniswap、SushiSwap、Curve、PancakeSwap。
- 借贷示例：Aave、Compound、MakerDAO。
- NFT 项目和市场：BAYC、Azuki、胖企鹅、OpenSea、Blur。
- 治理示例：Snapshot。
- 服务：中心化交易所、安全审计、区块链浏览器、钱包和新闻发布。
- 钱包示例：MetaMask、Phantom、Martian、imToken、Safe、Ledger。


记录 DApp 钱包连接方式，以及 EIP-1193、EIP-6963 和常见 Web3 生态概念。

Web3 钱包连接与生态


# Nginx 负载均衡

## 轮询

轮询是默认策略，请求按时间顺序分配给不同的后端服务器，宕机节点会被自动剔除。

## weight

`weight` 为各服务器设置轮询权重，访问比例与权重成正比，适合后端服务器性能不一致的情况。

## ip_hash

`ip_hash` 根据客户端 IP 的 Hash 结果定位服务器，使同一客户端后续请求继续到达同一服务器。

## fair

`fair` 按后端服务器响应时间分配请求，响应时间短的优先。原笔记将其作为一种负载均衡策略记录。

## url_hash

`url_hash` 根据请求 URL 的 Hash 结果分配服务器，使同一 URL 定向到同一后端。后端服务器承担缓存时，这种方式更有效。


整理 Nginx 轮询、权重、ip_hash 和 fair 等常见负载均衡策略。

Nginx 负载均衡


# 基本介绍
1. 串联多个大模型对话任务，实现多伦对话
2. 将大模型与其他外部工具无缝连接
3. 给大模型增加记忆能力
4. 



为什么选择langchain

1. 全家桶式的体验，一套代码搞定多种需求
浪chain提供了覆盖 LLM 应用哥哥关键纬度的模块，快速构建智能体

| 模块| 说明|
| ---| ---|
| Models| 支持 OpenAI Anthropic Llama 等多种模型，封装调用细节和响应结构|
| Prompts| 提供模版引擎和变量差值机制，让提示词更容易复用|
| indexes| 索引与检索接口，构建企业级知识库能力 |
| Memory | 支持对话中记忆上下文，（长期+短期） 提升交互的连贯性|
| Chains | 串联多个步骤形成逻辑工作流，是 LangChain 的灵魂 |
| Agents | 构建 能自己调用工具的大模型智能体，实现真正的自主行为 |

2. 社区活跃，生态丰富
 插件丰富： 社区适配众多模型与工具
 教程齐全： 官方文档与第三方教程
 对接成熟： 无缝支持 FAISS，Webhook 等外部工具


## 支持的语言


LangChain 支持主流的语言模型
1. 文本补全模型
2. 对话模型


## 文本补全模型

以一段纯文本输入，输出结果是一段连续的生成文字，通常用于单轮任务，如： 段落续写，内容润色，等

## 对话模型
支持多轮对话，通常用于需要上下文的场景，如： 聊天机器人，智能助手，等
输入格式： 带有身份标签的list,模型根据对话历史，生成更加自然的连续回复


LangChain生态由多个模块组成，每个模块各司其职

1. @langchain/core
  Langchain 的内核，提供基础的抽象能力，如 Runnable（可运行的代码）， Prompt （提示词模版），OutputParser（输出解析器），等
2. @langchain/community
  社区扩展包，收录了大量的第三方集成，如：各类向量数据库，模型api, 文档加载器、等
3. langchain
  是在核心能力基础的高阶封装，内置了常见的链式组件（Chains）,智能体模块（Agents），工具调度（Tool）,等大多数Langchain 应用的默认入口包
### 模型接口
1. Models
2. Prompts
3. indexes
4. Memory
5. Chains
6. Agents


记录 LangChain 串联大模型、复用 Prompt、连接外部工具和构建记忆能力的模型接口。

LangChain 模型接口


# 前端性能优化

## 构建体积

- 路由懒加载：将不同路由拆成独立 chunk，需要时再加载。
- Tree Shaking：在 ES Module 基础上移除未使用代码；引入 Lodash 等库时只引入实际使用的模块。
- 代码分割：将第三方库等内容拆成独立 chunk，利用浏览器缓存。
- 多目标打包：针对不同浏览器生成不同兼容版本，减少不必要的兼容代码。
- 压缩和混淆：缩小最终资源体积。

## 网络传输

- CDN：缩短静态资源访问距离，公共库还可能利用跨站缓存。
- 压缩：服务器压缩资源，只要解压成本小于节省的传输时间就有收益。
- 缓存：除 HTML 外的资源可配合文件 Hash 使用强缓存或协商缓存。
- HTTP/2：利用多路复用和头部压缩提高连接利用率。
- 资源提示：`preload` 预加载当前页面关键资源，`prefetch` 在空闲时获取后续页面可能使用的资源，`preconnect` 提前连接第三方域名。
- 静态资源域：在不支持 HTTP/2 的场景下，把资源分散到多个域以增加并行 TCP 连接。

## 渲染与体验

- 优化关键渲染路径。
- 图片懒加载，并使用 WebP 等体积更小的格式。
- 使用骨架屏降低用户等待时的焦虑。
- 将多张小图合并为雪碧图。
- 使用 `defer`、`async` 调整脚本加载和执行时机。

## 运行时

- 长列表使用虚拟滚动。
- 高频事件使用防抖或节流。
- 计算密集型任务可使用 Web Worker，避免阻塞主线程。

原始笔记中的“页面首屏加载时间优化”和“网络性能优化”内容高度重复，本文件按构建、网络、渲染和运行时四类合并。


整理前端构建、网络传输、缓存、渲染和运行时性能优化方法。

前端性能优化笔记


# 树摇优化(tree shaking)


除了使用 ES 模块之外，Rollup 还可以通过静态分析导入的代码，并排出实际没有使用的代码，

> 树摇优化的核心核心思想在变异阶段通过静态分析确定代码的使用情况，而不是在运行时

所以树摇优化一般建立在 ES 模块语法基础之上的， ESM 的导出导入都是静态的

CommonJS 模块的导出导入是动态的，无法在编译阶段静态分析代码使用情况，一般情况下，树摇优化工具无法在 CommonJS 模块中精确的树咬，因为无法静态分析模块之间的导入/导出关系

然而一些构建工具（Webpack） 会尝试通过静态分析和启发式方法对 CommonJS 模块进行近似的树摇优化，他们会尽可能的识别出，可以在编译阶段确定未使用的代码，并进行删除，但是这种处理方法不如 ES6 模块的优化效果好，

### 树摇优化的原理
1. 


介绍基于 ES Module 静态分析移除未使用代码的 Tree Shaking 原理与限制。

Tree Shaking（树摇优化）

## 常见插件

### @rollup/plugin-node-resolve

rollup 是不认识 node_modules 目录下的模块的，需要使用这个插件来识别。

### @rollup/plugin-commonjs
rollup 是不认识 commonjs 模块的，需要使用这个插件来识别。

### @rollup/plugin-babel
 使用babel 将 es6 语法转换为 es5 语法

```js
{
  plugins: [
    babel({babelHelpers:"bundled"})
  ]
}
```

还需要增加babel 的预设
安装 babel-core 和 env
```shell
pnpm add @babel/core @babel/preset-env -D
```
然后在babel 配置文件中增加预设

```js

{
  "presets": [
    "@babel/preset-env"
  ]
}
```
babel 只是做一些语法的转换，将let const 转为var
但是还需要对一些内置对象实例方法api 进行转换, 需要一些polyfill 来支持.所以需要接下里的babel/runtime来处理

`@babel/runtime` 是一个核心，一种实现方式，但是在实现polyfill 时，可能会产生很多重复代码，所以需要 `@babel/plugin-transform-runtime` 防止全局污染。抽离共工的helper function， 防止冗余，当然在处理polyfill 时，我们还需要借助 babel-js 的辅助，基于babel,我们可以使用 `@babel/runtime-corejs3` 

###  

```js
// rollup.config.js
{
  plugins: [
    babel({
      babelHelpers:"runtime",
      include:"src/**",
      exclude:"node_modules/**",
      extensions:['.js',"ts"]
      })
  ]
}
```

```js

{
  "presets": [
    "@babel/preset-env",
    {
      targets:"> 0.25%, not dead",
      useBuiltIns: "usage",
      corejs: 3
    }
  ],
  plugins: [
    "@babel/plugin-transform-runtime",
    {
      corejs: 3
    }
  ]
}


### 支持 typescript

```shell
pnpm add typescript tslib @rollup/plugin-typescript -D

```

```js
// ts.config.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "lib": ["dom","dom.iterable","esnext"],
    "skipLibCheck": true,
    "nodeResolutionMode": "bundler",
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "isolatedModules": true
  },
  include: ["src/**/*"]
 }
```

  // include: ["src/**/*", "rollup.config.ts"]
如果rollup 使用ts文件的话，运行时需要在命令中增加配置

```shell
rollup -c --config rollup.config.ts --configPlugin typescript
```



react 常见项目配置安装
```shell
#  react 依赖
pnpm add react react-dom

# rollup
pnpm add rollup -D

# rollup 常规插件
pnpm add -D @rollup/plugin-node-resolve @rollup/plugin-commonjs 

# typescript 相关
pnpm add typescript tslib @rollup/plugin-typescript -D

#  types 
pnpm add -D @types/react @types/react-dom

# rollup/plugin-babel
pnpm add @rollup/plugin-babel @babel/core @babel/preset-env -D

#babel/runtime 语法兼容
pnpm add @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs3 -D

#  react 的babel 预设
pnpm add @babel/preset-react -D

# html 模版
pnpm add rollup-plugin-generate-html-template -D

# 替换字符串
pnpm add @rollup/plugin-replace -D

# 开发服务/live server
pnpm add rollup-plugin-serve rollup-plugin-livereload -D

# clear 插件
pnpm add rollup-plugin-clear -D

# scss 插件
pnpm add sass rollup-plugin-scss -D

# postcss 插件
pnpm add postcss rollup-plugin-postcss -D

# 图片处理
pnpm add @rollup/plugin-image -D

# node types
pnpm add @types/node -D

# 别名
pnpm add @rollup/plugin-alias -D


```

记录 Rollup 常见插件的作用及其在模块解析、CommonJS 和 Babel 转换中的使用。

Rollup 常见插件与配置


# Webpack

## 基础配置

Webpack 参数可以放在命令行，也可以写入默认的 `webpack.config.js`，并通过 `--config` 指定其他配置文件。配置文件使用 CommonJS 导出对象；原笔记指出，命令行与配置文件冲突时以命令行为准。

常见配置包括：

- `mode`：`development` 或 `production`。
- `entry`：指定入口文件和 chunk 名称。
- `output`：通过 `path`、`filename` 等配置输出；文件名可使用 chunk 名和 Hash。
- `target`：指定 `web` 或 `node` 等构建目标。
- `module.noParse`：通过正则指定不解析的模块。
- `devtool`：配置 Source Map，例如 `eval`、`source-map`。
- `resolve.modules`：指定模块查找目录。
- `resolve.extensions`：指定默认扩展名。
- `resolve.alias`：配置别名。
- `externals`：排除不需要打包的外部依赖。

## Source Map

工程化代码通常会经过合并、压缩和转换，实际运行代码不便直接调试。Source Map 记录转换后代码与源代码之间的映射关系。打包文件末尾通过 `sourceMappingURL` 指向 `.map` 文件，浏览器可据此显示源代码中的错误位置。

原笔记建议在开发环境把 Source Map 作为调试手段，生产环境谨慎公开，因为 Map 文件可能体积较大，也可能暴露源代码。

## 编译过程

Webpack 先合并 CLI 参数、配置文件和默认配置，生成最终配置。随后为入口创建 chunk。Chunk 表示从某个入口找到的所有依赖集合，具有名称和唯一 ID。

构建依赖时，Webpack 读取模块内容、匹配 Loader、生成 AST、记录依赖、替换依赖引用并保存转换后的模块代码。每个 chunk 最终生成资产列表，并根据内容生成 chunk Hash；多个 chunk 资产合并后生成总体构建结果。

## Loader

Loader 本质上是函数，接收源码内容并返回转换后的源码。Loader 在 `module.rules` 中通过 `test` 匹配文件，通过 `use` 指定 Loader 和 `options`。原笔记还记录了查询参数传参，以及通过导出函数的 `raw` 属性表示是否接收原始数据。

## Plugin

Loader 主要负责代码转换，而生成额外文件、监听编译启动等需要嵌入编译流程的功能由 Plugin 完成。Plugin 通常定义一个带 `apply(compiler)` 方法的类，在初始化创建 `compiler` 后执行，并通过 `compiler.hooks` 注册对应编译阶段的逻辑。配置时把 Plugin 实例放入 `plugins` 数组。


整理 Webpack 配置、Source Map、编译流程、Loader、Plugin 和模块打包知识。

Webpack 构建工具笔记


常见导致白屏过长的原因是： 界面需要渲染的内容过多，渲染时间过长导致的白屏问题

### 解决思路
由于页面复杂，首先考虑的优化手段是方向明确，效果明确的，不会对页面业务造成过多影响的优化手段，考虑如下
 - 骨架屏
 - SSR DOM 直出
 - 分屏渲染

**骨架屏虽然有利于FCP的数据展现，但是治标不治本**，用户的需求是能在首屏马上看到内容，而不是用一个骨架屏的假象替换，只能给用户心理安慰，当前页面在做事情，请稍后。但是有些用户会讨厌骨架屏的出现，因为出现意味着速度变慢

**SSR DOM 直出直观的减少页面二次请求和渲染** ， 但是如果本身页面就是有很多内容需要渲染的话，也并不是最合适的手段，而且SSR 也不是说上就可以上的，还需要考虑成本问题，计算成本抛给前端，还是全部压力在后端，还是需要均衡。后端需要的算力不一样，所以需要的服务器不一样，成本也就不一样

**分屏加载，主要利用API intersectionObserver 观察dom 元素是否在视口内的方式实现懒加载** ，当然这种一般都是用在页面有比较明显的分界线，比如列表、卡片等，图片懒加载等

---

我们的要求就是一开始就需要渲染出所有的内容，比如本事当前视口的DOM 内容就非常的复杂，只不过相当多的内容处于隐藏状态，只有触发某一个时间的时候，才会显示相应的内容。这种情况分屏显示并不要处理

- requestIdleCallback 空闲时间渲染

`requestIdleCallback` 可以在浏览器空闲时间去执行一些低优先级的任务，从而避免阻塞主线程，提高用户的相应速递

- requestAnimationFrame 分帧渲染

`requestAnimationFrame` 可以在浏览器下一重绘前执行一些任务，他可以用于创建流畅的动画效果

## 解决细节

1. [web-vitals](https://web.dev/articles/vitals?hl=zh-cn)
2. `requestAnimationFrame` 
  主要是用来做动画，他非常适合优化页面的DOM渲染，他可以将一系列操作分帧到不同时间点执行，从而避免阻塞主线程，提升页面的响应速度和流畅度
  浏览器渲染机制：
  - 浏览器每秒会尝试刷新屏幕60次（60fps），每次刷新（忽略解读Parse阶段）都会经历一下步骤
    - 样式计算（style calculation）
    - 布局（layout）
    - 绘制（paint）
    - 合成（composite）
  - requestAnimationFrame 会在浏览器执行这些步骤之前调用回调函数，这样确保dom 操作和样式计算都是在同一个周期内完成，避免对此重排重绘



深入探讨白屏优化的策略和最佳实践

白屏优化


# 前端性能优化思路

## 编译性能

  主要是打包耗时的问题
  - 编译缓存
  - 多线程打包
  - 排除模块
  - 开发环境去hash
  - 升级/更新插件（swc,babel, rollup）
  - 微前端(巨石应用)
## 运行性能
  ## 网络传输体积大
  - 打包优化
    - Tree Shaking
    - 分块打包
    - 公共库使用cdn
  - 异步加载 （defer, async, preload, prefetch）
  ## 网络传输时间长
  - 分包缓存
  - CDN
  - 异步加载
  ## 代码执行效率低
   - Performance选项卡分析
   - 时间复杂度和空间复杂度分析
   - 内存泄漏
  ## 任务集中
    - 任务分片
    - 优先级调度

深入探讨前端性能优化的各种技巧和最佳实践，从加载优化到运行时优化

前端性能优化实战指南


## 方案1：Flexbox（最推荐，现代项目首选）

```css
.parent {
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中（可选） */
  height: 300px;            /* 父元素必须有高度 */
}
```

## 方案2：Grid（更简洁，但兼容性略差）

```css
.parent {
  display: grid;
  place-items: center; /* 垂直+水平同时居中 */
  height: 300px;
}
```

原理：place-items 是 align-items 和 justify-items 的简写，center 让子项在网格单元内垂直和水平居中。

## 方案3：绝对定位 + transform（万能方案，兼容性好）

```css
.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

## 方案4：绝对定位 + margin: auto（老方案，面试常问）

原理：top: 0; bottom: 0; 让子元素在垂直方向上被拉伸，margin: auto 自动分配剩余空间。
```css
.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}
```

适用场景：必须指定子元素宽高，适合固定尺寸的元素。

## 方案5：table-cell

## 


整理 Flexbox、Grid、定位等常见元素垂直及水平居中方案。

如何实现元素垂直居中？


# meta viewport 是做什么用的，怎么写？

用法

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
```

| 属性            | 值示例                  | 作用                                             |
| ------------- | -------------------- | ---------------------------------------------- |
| width         | device-width 或 600px | 设置视口的宽度。device-width 表示完美适配当前设备的屏幕宽度（最重要）。     |
| initial-scale | 1.0                  | 页面首次加载时的初始缩放比例。1.0 表示不缩放（1:1 显示）。              |
| minimum-scale | 1.0                  | 允许用户的最小缩放比例。                                   |
| maximum-scale | 1.0                  | 允许用户的最大缩放比例。                                   |
| user-scalable | yes 或 no             | 是否允许用户手动缩放（no 表示禁止）                            |
| viewport-fit  | cover 或 contain      | 设置视口的适应模式。cover 表示视口会完全覆盖页面，contain 表示视口会包含页面。 |

---

“meta viewport 是移动端适配的‘基石’，它的核心作用是告诉浏览器，当前页面的宽度应该以设备的物理宽度为基准，而不是以桌面端的 980px 默认宽度为基准。”

“在没有这个标签的时候，移动端浏览器会默认在一个虚拟的‘布局视口’（通常 980px）下渲染页面，然后把页面缩小塞进手机屏幕里，所以文字会变得特别小。

加上这个标签后，浏览器会采用‘理想视口’，让 CSS 像素与设备宽度匹配，这样 1px 在手机上显示的大小就正常了，我们才能顺利地写 rem、vw 等响应式布局。”


## 追问 viewport 和 CSS 像素、DPR 的关系


## 追问其他关键的 <meta> 标签
1. 字符编码（必备）
<meta charset="UTF-8">
确保页面不出现乱码，必须放在 <head> 的最顶部（在 <title> 之前）。

2. SEO 优化（针对 C 端项目）
<meta name="description" content="页面描述"> 和 <meta name="keywords" content="关键词">
虽然百度权重降低，但在社交媒体分享时，配合 OG 协议（Open Graph）可以控制分享出去的标题、描述和缩略图，这对运营非常重要。”

## 移动端 1px 边框问题

###  方案一：rem + 动态根字体
  1. 动态根字体：根据根字体大小
  2. rem 单位：根据根字体大小，计算元素的 rem 值
缺点
  问题： 边框问题：在移动端，1px 边框在手机上显示的大小是 1px，而不是 2px
  影响其他UI元素的显示效果

###  方案二：vw/vh 纯 CSS 方案（无 JS，更优雅）
直接写基于750px 设计稿的像素值，postcss 会自动将 px 转 vw。（375px->50vw;）

默认使用vw 单位, 将750 默认为设计稿宽度，计算元素的 vw 值
```css
..box {
  width: 375px;    /* 构建后自动转成 50vw */
  height: 200px;   /* 构建后自动转成 26.67vw */
  border: 1px solid #ccc; /* 构建后自动转成 0.133vw，自动适配 DPR */
}
```

在项目中配置 postcss-px-to-viewport，写 CSS 时直接写 px，构建工具自动转成 vw：
```js
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750,   // 设计稿宽度
      unitPrecision: 5,     // 转换精度
      viewportUnit: 'vw',
      minPixelValue: 1,     // 小于 1px 不转换
    }
  }
}
```

### 方案三：基于 DPR 的缩放方案（适用于活动页/大屏展示）

原理：用 JS 获取 window.devicePixelRatio，动态缩放整个页面容器。

```js
 const designWidth = 750;
  const deviceWidth = document.documentElement.clientWidth;
  const scale = deviceWidth / designWidth;
  
  const app = document.getElementById('app');
  app.style.transform = `scale(${scale})`;
  app.style.transformOrigin = 'top left';
```


缺点： 整页缩放，滚动有问题

## canvas 中的dpr问题

1. 获取canvas 的 css 逻辑像素 以及dpr
2. 设置canvas 中的 canvas 容器尺寸为 css 逻辑像素 * dpr
3. 设置canvas 的scale 为 dpr(方便绘制的时候设置)


介绍 meta viewport 的常用属性及其对移动端页面视口和缩放的影响。

meta viewport 是做什么用的，怎么写？


### 父容器属性（6 个，必掌握）

| 属性 | 描述 | 值 |
| --- | --- | --- |
| display | 开启 Flex 布局 | flex; |
| flex-direction| 水平方向布局 | row, row-reverse, column, column-reverse |
| align-items | 交叉轴对齐 | center, flex-start, flex-end, stretch |
| align-content | 侧轴对齐 (控制多行子元素在交叉轴上的整体对齐方式（只有 flex-wrap: wrap 且有多行时才生效）。) | center, flex-start, flex-end, space-between, space-around, space-evenly |
| justify-content | 主轴对齐 | center, flex-start, flex-end, space-between, space-around, space-evenly |
| flex-wrap | 换行 | nowrap, wrap |


### 子元素属性

| 属性 | 描述 | 值 |
| --- | --- | --- |
| flex-grow | 子元素放大比例(占剩余空间的 N 倍数) | 0, 1, 2, ... |
| flex-shrink | 子元素缩小比例(占已占空间的 N 倍数) | 0, 1, 2, ... |
| flex-basis | 子元素初始大小 | auto(根据 width/height 决定), 100px, 200px, ... |
| flex | 子元素总属性(flex-grow、flex-shrink、flex-basis 的简写) | 0 1 auto, 1 1 200px, 2 0 100px, ... |
| align-self | 单独设置子元素的交叉轴对齐方式 | center, flex-start, flex-end, stretch |
| order | 子元素排序(改变元素的布局顺序) | 0, 1, 2, ... |


通过示例梳理 Flex 容器与子元素的常用属性及布局方式。

Flex 怎么用：常用属性详解


# 断点续传

## 断点下载

客户端可以先发送 HEAD 请求，通过响应头中的 `Accept-Ranges: bytes` 和 `Content-Length` 判断服务器是否支持按字节范围下载。支持时，客户端使用 `Range` 请求头分段请求，例如先请求 `bytes=0-512`，再请求 `bytes=513-1024`，分别保存临时文件后组装成完整文件。

原笔记指出，浏览器页面无法直接完成这类桌面应用式的本地文件拼装。

## 断点上传

用户选择文件后，前端把文件切分为多个分片，计算完整文件及各分片的 MD5。原笔记到此为止，没有记录服务端校验、合并或重试流程，因此本整理不补充这些步骤。


记录基于 Range 的分段下载，以及前端文件分片上传的基本思路。

断点续传：下载与上传


# 网络安全

## CSRF

CSRF（Cross-Site Request Forgery，跨站请求伪造）利用用户已有的身份信息伪造请求。原笔记列出的防护方式包括减少依赖 Cookie 身份、使用 JWT，以及设置 Cookie 的 `SameSite` 属性。

## XSS

XSS（Cross-Site Scripting，跨站脚本攻击）利用网站漏洞向服务提交脚本，使脚本在其他用户访问页面时执行。原笔记列出的防护方式包括过滤危险标签和属性，以及对危险内容进行 HTML 编码。

## 中间人攻击

原笔记在 SSL、TLS 与 HTTPS 的关系下列出了“中间人攻击”，但没有进一步记录攻击过程或防御细节，因此本整理不作扩写。


介绍 CSRF、XSS 和中间人攻击等常见 Web 安全问题及笔记中的防护思路。

Web 网络安全基础


# 合成事件原理以及实现

合成事件是 React 中用于处理事件的机制，它在组件之间共享事件对象，避免了事件对象的频繁创建和销毁，提高了性能。

## 为什么需要合成事件

合成事件的主要原因是性能优化。在 React 中，每个事件对象都是一个独立的实例，每次触发事件时都需要创建一个新的对象。这会导致内存泄漏和性能问题。

通过合成事件，React 能够在组件之间共享事件对象，避免了频繁创建和销毁，提高了性能。

React 通过事件委托的方式，将事件处理函数绑定到根元素上，而不是每个组件上。当事件触发时，React 会根据事件类型和目标元素，将事件处理函数调用到对应的组件上。在 fiber 可以查询到对应的绑定的事件处理函数，从而实现事件的分发。

## 事件委托流程

1. 真实 DOM 触发事件
2. 根元素通过事件委托，拿到这个事件对象
3. 根据 fiber 节点收集事件处理函数
4. 模拟捕获和冒泡流程

## 合成事件实现

### 1. SyntheticEvent 类

合成事件对象需要包装原生事件，并提供统一的 API：

```javascript
class SyntheticEvent {
  constructor(e) {
    // 保存原生事件对象
    this.nativeEvent = e;
  }

  // 合成事件对象需要提供一个和原生事件类型同名的方法阻止冒泡
  stopPropagation() {
    this._stopPropagation = true;

    if (this.nativeEvent.stopPropagation) {
      this.nativeEvent.stopPropagation();
    }
  }

  test() {}
}
```

**关键点**：
- `nativeEvent` 保存原生事件对象，方便后续访问
- `stopPropagation` 方法标记 `_stopPropagation` 为 `true`，用于控制事件流
- 同时调用原生事件的 `stopPropagation`，确保原生事件也被阻止

### 2. 事件类型名称转换

```javascript
const getTypeName = (type) => "bind" + type[0].toUpperCase() + type.slice(1);
```

这个函数将事件类型转换为自定义名称，例如：
- `click` → `bindClick`
- `change` → `bindChange`

### 3. 触发事件流

```javascript
const triggerEventFlow = (paths, type, se) => {
  for (let index = paths.length - 1; index >= 0; index--) {
    const pathNode = paths[index];
    if (!pathNode) {
      return;
    }
    const callback = pathNode[type];
    if (callback) {
      callback.call(null, se);
    }
    if (se._stopPropagation) {
      return;
    }
  }
};
```

**流程解析**：
- 从后往前遍历路径数组（模拟冒泡）
- 找到对应类型的事件处理函数并执行
- 如果检测到 `_stopPropagation` 标记，立即停止事件流

### 4. 收集事件路径

```javascript
const collectPaths = (type, beginFiber) => {
  const paths = [];

  while (beginFiber.tag !== 3) {
    const { memoizedProps, tag } = beginFiber;
    if (tag === 5) {
      // DOM 元素
      const eventHandle = memoizedProps[type];
      paths.push({
        [type]: eventHandle,
      });
    }
    beginFiber = beginFiber.return;
  }
  return paths;
};
```

**关键点**：
- `tag === 5` 表示 DOM 元素节点
- `tag === 3` 表示根节点（HostRoot）
- 从目标 fiber 向上遍历，收集所有绑定的事件处理函数
- `memoizedProps` 中存储了组件的 props，包括事件处理函数

### 5. 事件分发

```javascript
const dispatchEvent = (e, type) => {
  // 实例化合成事件对象
  const se = new SyntheticEvent(e);
  const ele = e.target;

  // 找到目标元素的 fiber 节点
  let fiber;
  for (const prop in ele) {
    if (prop.toLocaleLowerCase().includes("fiber")) {
      fiber = ele[prop];
    }
  }

  // 收集事件路径
  const paths = collectPaths(type, fiber);

  // 模拟捕获
  triggerEventFlow(paths, type + "Capture", se);

  // 模拟冒泡
  if (!se._stopPropagation) {
    triggerEventFlow(paths.reverse(), se);
  }
};
```

**流程解析**：
1. 创建合成事件对象 `se`
2. 从 `e.target` 找到对应的 fiber 节点（DOM 元素上会有 `__reactFiber$xxx` 属性）
3. 收集从目标到根的事件处理函数路径
4. 先执行捕获阶段（`type + "Capture"`）
5. 如果没有阻止冒泡，再执行冒泡阶段（`paths.reverse()`）

### 6. 添加事件监听

```javascript
// 用于根元素绑定事件，自定义事件以 bindClick 为例
export const addEvent = (container, type) => {
  container.addEventListener(type, (e) => {
    // 事件收集
    dispatchEvent(e, getTypeName(type));
  });
};
```

**使用示例**：

```javascript
// 在根元素上绑定点击事件委托
addEvent(document.getElementById('root'), 'click');
```

## 完整流程图

```
用户点击按钮
    ↓
原生事件触发 (click)
    ↓
根元素事件委托捕获
    ↓
dispatchEvent 处理
    ↓
创建 SyntheticEvent
    ↓
找到目标 fiber 节点
    ↓
collectPaths 收集事件路径
    ↓
triggerEventFlow (捕获阶段)
    ↓
triggerEventFlow (冒泡阶段)
    ↓
执行用户定义的事件处理函数
```

## Fiber Tag 类型说明

| Tag | 类型 | 说明 |
|-----|------|------|
| 3 | HostRoot | 根节点 |
| 5 | HostComponent | DOM 元素 |
| 1 | FunctionComponent | 函数组件 |
| 2 | ClassComponent | 类组件 |

## 总结

React 合成事件的核心思想是：

1. **事件委托**：将所有事件绑定到根元素，减少内存占用
2. **事件收集**：通过 fiber 树向上遍历，收集所有事件处理函数
3. **模拟事件流**：按照捕获 → 冒泡的顺序执行事件处理函数
4. **合成事件对象**：包装原生事件，提供统一的 API

这种设计使得 React 能够高效地管理事件，同时保持与原生事件行为的兼容性。

---

> **参考**：React 源码中的事件系统实现，理解 fiber 树结构和事件委托机制是掌握 React 事件处理的关键。

了解 React 合成事件的原理以及实现机制

React 合成事件原理以及实现


# Hook 的原理以及实现

## hook 内部介绍
不同状态下对应的hook 函数调用也是不同的

- HookDispatcherOnMount 负责 初始化阶段
mount 阶段： 函数组件进行初始化，调用的是 mountXXX对应的函数

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:mountCallback,
  useEffect:mountEffect,
  useMemo:mountMemo,
  useReducer:mountReducer,
  useRef:mountRef,
  useState:mountState,
};
```

- HooksDispatcherOnUpdate 负责更新阶段
update 阶段： 函数组件进行更新，调用的是 updateXXX对应的函数

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:mountCallback,
  useEffect:mountEffect,
  useMemo:mountMemo,
  useReducer:mountReducer,
  useRef:mountRef,
  useState:mountState,
};
```

- ContextOnlyDispatcher 负责上下文只读操作
  - 其他情况（报错）： 调用的是 throwXXX

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:throwCallback,
  useEffect:throwEffect,
  useMemo:throwMemo,
  useReducer:throwReducer,
  useRef:throwRef,
  useState:throwState,
};
```

当FC 进入render 流程的时候会判断出是渲染还是更新

```javascript
  if(current !== null && current.memoizedState !== null) {
    // 更新阶段
    ReactCurrentDIspatcher.current = HooksDispatcherOnUpdate;
  } else {
    // 初始化阶段
    ReactCurrentDIspatcher.current = HookDispatcherOnMount;
  }
```

hook 的数据结构

````javascript
const hook = {
  memoizedState: null,
  baseState: null,
  baseQueue: null,
  queue: null,
  next: null,
}
```


> 注意 memoizedState 字段 ， 在fiberNode 上也有这个阶段，与Hook 对象上存储的东西不一样
>
> - FiberNode.memoizedState 保存的时候Hook 链表中第一个链表
> - Hook 对象上存储的是某个hook 的状态








了解 React Hook 的原理以及实现机制

React Hook 原理以及实现


# 浏览器网络

## 网络模型

五层网络模型包括：

1. 应用层：面向网页、邮件、文件等场景，常见协议有 HTTP、FTP、SMTP、DNS、POP3。
2. 传输层：通过 TCP 或 UDP 选择可靠连接或无连接传输方式。
3. 网络层：通过 IP 和路由解决目标定位与路径选择。
4. 数据链路层：使用 MAC 地址和交换机在子网中传输数据。
5. 物理层：通过双绞线、光纤等介质在二进制数据和物理信号之间转换。

四层模型将数据链路层和物理层合并为物理链路层。七层模型依次为应用层、表示层、会话层、传输层、网络层、数据链路层和物理层。

## Cookie

Cookie 由键、值、Domain、Path、Secure 和过期时间等信息组成。服务器可以通过 `Set-Cookie` 响应头下发，浏览器端 JavaScript 也可以添加。没有设置 `Expires` 或 `Max-Age` 时，Cookie 通常在会话结束后过期。

发送请求时，浏览器会检查 Cookie 是否过期，并核对 Domain、Path 和 Secure 条件。符合条件的键值对会拼接到请求头的 `Cookie` 字段中。

## 同源策略与 CORS

同源要求协议、主机和端口相同。浏览器对 CSS、JavaScript 等资源加载相对宽松，对 AJAX 跨源访问限制更严格。原笔记列出的解决方式有代理、JSONP 和 CORS。

CORS 的简单请求通常使用 GET、POST 或 HEAD，并只包含安全请求头。浏览器会自动添加 `Origin`，服务器通过 `Access-Control-Allow-Origin` 表明是否允许。

不满足简单请求条件时，浏览器先发送 OPTIONS 预检，请求头包含 `Origin`、`Access-Control-Request-Method` 和 `Access-Control-Request-Headers`。服务器用对应的 `Access-Control-Allow-*` 响应头确认允许的方法和请求头，并可通过 `Access-Control-Max-Age` 缓存预检结果；通过后才发送真实请求。

## 输入 URL 后的过程

1. 浏览器补全协议和端口，并对 URL 进行编码。
2. 浏览器检查本地缓存，判断强缓存或协商缓存是否可用。
3. 通过 DNS 解析服务器 IP。
4. 建立 TCP 连接；HTTPS 还需要 SSL/TLS 握手。
5. 浏览器判断应携带的 Cookie，补全请求头并发送请求。
6. 服务器处理请求并返回 HTTP 响应。
7. 浏览器根据协议版本和 `Connection` 判断是否保留 TCP 连接，不保留时进行四次挥手。
8. 浏览器根据状态码、`Content-Type` 和其他响应头处理响应，并更新缓存或 Cookie。
9. 对 HTML 从上到下解析，遇到外部 JavaScript、CSS 等资源时继续请求。
10. 构建 DOM 树和 CSSOM 树，合成渲染树，计算布局并交给 GPU 绘制。
11. DOM 构建完成后触发 `DOMContentLoaded`，全部资源加载完成后触发 `load`。

原笔记将 URL 编码写成“转为 Base64”，该表述与前后内容不一致，因此整理时只保留为 URL 编码，没有延伸结论。

## DNS 解析

原笔记记录的查询顺序是：浏览器缓存、系统缓存、Hosts 文件、本地 DNS 服务器；未命中时继续向根域名服务器、顶级域名服务器和权威域名服务器查询。


整理网络分层、Cookie、同源策略、CORS、URL 请求流程和 DNS 等知识。

浏览器网络基础


# HTTP 基础

## GET 与 POST

GET 通常用于读取资源，具有幂等语义；POST 通常用于提交数据并产生写操作。GET 参数一般放在 URL 中，POST 数据一般放在请求体中。浏览器和服务器会限制 URL 长度，而这一限制不是 HTTP 协议本身规定的。

GET 参数直接出现在 URL 中，不适合传递敏感信息；POST 也不等于安全，真正的传输安全仍依赖 HTTPS。GET 响应更容易被缓存、保存为书签，使用 POST 打开的页面在刷新时通常会提示重新提交。

## 常见请求方法

- `GET`：获取资源，业务数据通常放在请求行。
- `POST`：提交资源，业务数据通常放在请求体。
- `PUT`：修改服务器数据，业务数据通常放在请求体。
- `DELETE`：删除服务器数据。
- `OPTIONS`：可用于跨域预检。
- `TRACE`：用于测试和诊断。

原笔记列出了 `CONNECT`，但没有记录其具体含义，本整理不作扩写。

## HTTP 缓存

强缓存命中后，浏览器直接使用本地缓存，不向服务器发送请求。HTTP/1.1 常用 `Cache-Control: max-age`；HTTP/1.0 常用 `Expires`，它依赖本地时间，修改系统时间可能影响判断。

协商缓存会向服务器确认资源是否变化。HTTP/1.1 常通过 `ETag` 和 `If-None-Match`；HTTP/1.0 常通过 `Last-Modified` 和 `If-Modified-Since`。资源未变化时服务器可返回 `304`，变化时返回新内容。时间方式还存在一秒内多次修改难以区分的问题。

## HTTP/1 与 HTTP/2

原笔记记录的 HTTP/2 变化包括：使用二进制分帧、多路复用、头部压缩和服务器推送。HTTP/1 中浏览器通常通过多个 TCP 连接并行请求；HTTP/2 可在一个 TCP 连接上并行传输多个流，减少连接开销，并通过头部压缩降低重复头信息的体积。

## HTTP 与 HTTPS

HTTP 以明文传输，HTTPS 在 HTTP 与 TCP 之间增加 SSL/TLS 加密。SSL 是 Secure Sockets Layer，TLS 是 Transport Layer Security，TLS 是 SSL 的升级版本；HTTPS 是建立在 SSL/TLS 安全通道上的 HTTP。

原笔记记录：HTTPS 可以通过证书验证服务器身份，并使用加密信道传输数据；在 SSL/TLS 握手期间还会协商是否使用 HTTP/2。

## TCP 三次握手与四次挥手

三次握手用于建立可靠的 TCP 连接：客户端发起连接，服务器确认并回应，客户端再次确认。四次挥手用于双方分别关闭发送方向，因此通常需要四次报文交互。

## 浏览器存储

原笔记比较了 Cookie、LocalStorage、SessionStorage 和 IndexedDB：Cookie 会随请求发送给服务器，容量较小；LocalStorage 持久保存在本地；SessionStorage 以页面会话为范围；IndexedDB 用于保存更大量的结构化数据。


梳理 HTTP 请求方法、协议版本、HTTPS 握手、缓存与安全相关基础。

HTTP 基础


# HTTP 与网络

- [HTTP 基础](HTTP基础.md)：请求方法、版本、HTTPS、握手与缓存。
- [浏览器网络](浏览器网络.md)：网络模型、Cookie、同源策略、CORS、URL 请求过程与 DNS。
- [网络安全](网络安全.md)：CSRF、XSS 与中间人攻击相关记录。
- [断点续传](断点续传.md)：分段下载和分片上传。


汇总 HTTP、浏览器网络、网络安全和断点续传等网络基础笔记。

HTTP 与网络学习笔记


# Node.js Event Loop

## Event Loop 阶段

原笔记将 Node.js Event Loop 分为六个阶段：

1. Timers：执行 `setTimeout` 和 `setInterval` 回调。
2. I/O callbacks：处理上一轮循环中少量未执行的 I/O 回调。
3. Idle、prepare：仅供 Node.js 内部使用。
4. Poll：轮询并处理文件、网络等 I/O 事件；如果定时器即将到期或存在 `setImmediate` 任务，会离开该阶段。
5. Check：执行 `setImmediate` 回调。
6. Close callbacks：执行 socket 等对象的 `close` 事件回调。

Event Loop 就是持续循环处理这些阶段和任务。

## process.nextTick 与微任务

原笔记记录：Node.js 11 之前，`process.nextTick` 回调在每个阶段末尾集中执行；Node.js 11 之后，会在阶段内的任务间隙执行，以接近浏览器的行为。

浏览器中的任务包括脚本和 `setTimeout`，微任务包括 `Promise.then`、`queueMicrotask` 和 `MutationObserver`。原笔记也把 `Proxy` 列入了微任务，但没有给出说明，因此本整理不沿用这一条。

关于 `Promise.resolve().then(fn)` 的执行，原笔记只说明需要结合 Promise 的具体实现和 `process.nextTick` 理解，没有继续展开结论。


梳理 Node.js Event Loop 的阶段划分，以及 process.nextTick 与微任务执行时机。

Node.js Event Loop


# React

## JSX 与 UI 描述

React 使用 JSX 描述 UI。JSX 是类似 XML 的 JavaScript 语法扩展，经过 Babel 编译后，在 React 17 之前通常转换为 `React.createElement` 调用，React 17 之后可转换为 `react/jsx-runtime` 中的 `jsx` 调用。代码执行后得到的对象就是 React 元素。

React 的设计观点是 UI 与逻辑存在耦合，使用 JavaScript 同时表达 UI 和逻辑，可以让二者保持紧密关联。原笔记将 React 归为应用级框架。

## 虚拟 DOM

虚拟 DOM 是一种编程概念，在 JavaScript 中用对象描述 UI 层级。React 中 JSX 会生成 React 元素，原笔记也将其称为虚拟 DOM。

虚拟 DOM 的价值包括：在 JavaScript 层计算差异并尽量减少真实 DOM 修改，以及为不同宿主环境提供抽象。浏览器可使用 React DOM，原生环境可使用 React Native，Canvas、SVG 或 VML 宿主环境可使用 React ART，测试环境则可以渲染为 JavaScript 对象。

## 从 Stack 到 Fiber

React 15 之前的 Stack 架构包含协调器和渲染器。协调器通过递归执行挂载和更新，一旦开始便无法中断。大量差异计算可能长期占用 JavaScript 线程，导致页面卡顿；更新任务也没有优先级，输入等紧急任务可能被延迟。

React 16 引入 Fiber。Fiber 同时表示一种架构、一种数据结构和一个动态工作单元。每个 FiberNode 本质上是 JavaScript 对象，保存 React 元素类型、相邻 FiberNode、DOM 信息、本次更新数据、待执行工作和增删改等副作用信息。FiberNode 通过链表关联，使任务能够被拆分和调度。

## 双缓冲

React 同时维护两棵 Fiber 树：一棵对应当前真实 UI，另一棵在内存中构建下一次更新。新树构建完成后，二者交换角色，这一机制与显卡的前后缓冲区类似。

## 渲染流程

React 更新分为 Render 和 Commit 两个阶段。

Render 阶段可以中断，包含调度器和协调器：调度器为任务分配优先级，使紧急任务可以优先执行；协调器使用深度优先遍历创建并串联 FiberNode。向下的“递”阶段执行 `beginWork` 创建子 FiberNode，向上的“归”阶段执行 `completeWork` 并收集副作用。

Commit 阶段不可中断，由渲染器将副作用应用到宿主环境，分为三个子阶段：

- Before Mutation：执行 DOM 变更前的操作，类组件中包含 `getSnapshotBeforeUpdate`。
- Mutation：执行 DOM 插入、移动、更新和删除，同时处理卸载、ref 和 effect 清理。
- Layout：类组件中执行 `componentDidMount/componentDidUpdate`，函数组件中执行 `useLayoutEffect` 回调。

## Diff 与 key

协调过程中，单节点场景主要比较 `key` 和元素类型；两者相同可以复用，只匹配其一时可能删除旧节点并创建新 Fiber。多节点场景先按顺序遍历：`key` 和类型相同则复用，`key` 相同但类型不同则创建新 Fiber 并记录删除，二者都不同则结束第一轮。剩余节点再根据新旧列表情况执行删除、新增或通过 Map 查找可复用节点并移动。

原笔记中“React 和 Vue 的 key 区别”只有占位标题，没有有效内容，本整理不扩写。

## 事件系统

React 有自己的事件系统。`SyntheticEvent` 对浏览器原生事件进行封装，提供相近的 API 并兼容主流浏览器。React 还基于事件委托和 Fiber 树模拟捕获、冒泡过程，为不同事件设置优先级，并统一使用 `onXxx` 驼峰形式绑定事件。

## Hooks

原笔记记录了三种 Hooks dispatcher：`HooksDispatcherOnMount` 负责初始化并把信息挂到 FiberNode；`HooksDispatcherOnUpdate` 负责更新；`ContextOnlyDispatcher` 用于阻止开发者在函数组件外调用 Hook。

同一函数组件的 Hooks 通过链表保存。Hook 节点包含 `memoizedState`、`baseState`、`baseQueue`、`queue` 和 `next`。`useState`、`useReducer` 保存状态，`useRef` 保存 `{ current }`，`useEffect`、`useMemo`、`useCallback` 保存回调和依赖；`useContext` 不需要通过 `memoizedState` 保存数据。

原笔记列出的触发更新入口包括 `createRoot`、`setState`、`forceUpdate`、`useState` dispatcher 和 `useReducer` dispatcher。更新数据带有优先级，高优先级更新可以中断低优先级更新。

## 组件能力

原笔记列出了生命周期、父子组件通信、Redux、高阶组件和 Hooks 相对 Class 组件的优势等主题。Redux 被描述为集中管理状态，由 action 描述变化，reducer 根据旧状态和 action 生成新状态，store 负责保存状态并通知订阅者。高阶组件是接收组件并返回增强组件的函数，用于复用横切逻辑。


整理 React JSX、虚拟 DOM、Fiber、渲染流程、事件系统和 Hooks 等核心原理。

React 核心原理笔记


# Vue

## Vue 2 响应式

Vue 2 主要通过 `Object.defineProperty` 拦截对象属性的读取和赋值。创建 Vue 实例时，会对 `data` 中的属性进行响应式处理；读取属性时通过 `Dep` 收集当前 `Watcher`，修改属性后由 `Dep` 通知相关 `Watcher` 更新。

原笔记将依赖关系概括为：每个响应式属性对应一个 `Dep`，其中保存订阅该属性的 `Watcher`；属性变化后，`Dep` 通知 `Watcher` 执行更新。

## Vue 3 响应式

Vue 3 使用 `Proxy` 拦截对象级别的读取、赋值、增加和删除操作，并使用 `Reflect` 完成默认行为。创建响应式数据的方式由 Vue 2 的 `data` 为主，扩展为 Vue 3 的 `ref` 和 `reactive`。

Vue 3 的依赖关系使用 `WeakMap + Map + Set`：`WeakMap` 的键是响应式对象，值是 `Map`；`Map` 的键是对象属性，值是 `Set`；`Set` 中保存依赖该属性的 effect 函数。

原笔记给出的 Vue 3 改动动机包括：更好的 TypeScript 支持、支持 `Tree Shaking`、使用 Composition API 提高逻辑复用能力，并通过多个应用实例避免 Vue 2 全局构造函数带来的配置污染。

## Computed 与 Watch

响应式系统通过 `track` 收集依赖、建立数据与函数的映射关系，再通过 `trigger` 在数据变化后执行关联函数。

`computed` 缓存的是上一次 getter 计算得到的值。原笔记将其不支持异步归因于设计理念和使用场景，但没有继续展开原因，因此本整理不作额外推断。

`watch` 用于监听一个或多个数据的变化，并在变化时执行用户操作。监听回调可以发送网络请求或操作 DOM 等副作用，也支持异步逻辑。

## nextTick

原笔记记录：Vue 的更新不是立刻同步到 DOM，而是先放入异步更新队列；`nextTick` 用于在 DOM 更新完成后执行回调。其实现会根据环境选择 Promise、MutationObserver、setImmediate 或 setTimeout 等异步方式。

## Vue 2 与 Vue 3 的 Diff

Diff 用于比较新旧虚拟 DOM，找出差异并尽量以最少的 DOM 操作更新页面。

Vue 2 的双端比较依次尝试：旧头与新头、旧尾与新尾、旧头与新尾、旧尾与新头；这些情况都不匹配时，再查找新头在旧节点中的位置。最后删除剩余旧节点，或创建剩余新节点。

Vue 3 先进行头头比较和尾尾比较。简单场景下，一方遍历结束后直接新增或删除剩余节点；新旧两方都有剩余时，会建立 `keyToNewIndexMap` 和 `newIndexToOldIndexMap`，判断节点的新增、复用和移动，并使用最长递增子序列减少移动操作。

## 模板与 UI 描述

Vue 使用模板描述 UI。其思路与后端模板引擎相似，在 HTML 中扩展逻辑语法，再动态填充数据。原笔记将 Vue 归为组件级框架，并与使用 JSX 描述 UI 的 React 进行了对比。


梳理 Vue 2/3 响应式、Computed、Watch、Diff、生命周期和组件通信等原理。

Vue 2 与 Vue 3 原理笔记


# TypeScript

## 类型分类

TypeScript 包含 JavaScript 已有的原始类型（`number`、`string`、`boolean`、`null`、`undefined`、`bigint`）和复合类型（对象、数组、函数、内置对象等），还增加了 `any`、`void`、`unknown`、`never`、元组、联合类型、交叉类型、字面量类型、接口、泛型、枚举、`unique symbol`、模板字符串类型、索引签名、映射类型和条件类型。

## 类型操作与类型安全

常见类型操作关键字和语法包括 `typeof`、`instanceof`、类型断言、`readonly`、`keyof`、`in`、索引访问 `[]`、条件类型 `extends ? :`、类型谓词 `is`、`infer`、可选属性 `?`、交叉类型 `&` 和联合类型 `|`。

类型安全是借助类型系统避免程序执行无效操作。无效操作可能导致运行时异常、程序崩溃，或虽然没有异常但结果没有意义。

## 编译与类型检查

编译器通常先把程序解析为 AST，再编译为字节码，最后由运行时执行。TypeScript 不直接生成字节码，而是先生成 JavaScript。

TypeScript 的处理过程是：TypeScript 源码生成 TypeScript AST；类型检查器检查 AST；AST 生成 JavaScript 源码；JavaScript 再经过 JavaScript AST 和字节码阶段执行。类型只用于类型检查，不会影响生成的 JavaScript，因此可以改进类型而不改变运行时逻辑。

## 工程配置

原笔记中 `tsconfig.json` 的 `compilerOptions` 包括：

- `outDir`：指定输出目录，未配置时通常与源文件同目录。
- `noEmit`：只检查不生成文件。
- `declaration`：生成 `.d.ts` 类型声明文件。
- `emitDeclarationOnly`：只生成声明文件，不生成 `.js`。
- `removeComments`：删除编译后 JavaScript 中的注释。

其他常见配置有 `include`（指定编译文件或目录，默认匹配 `**/*`）、`exclude`（指定排除文件，默认排除 `node_modules`）、`files`、`extends` 和 `references`。

## 注意点

TypeScript 默认假设代码运行在 DOM 环境中。如果代码没有模块化，编译器会按全局脚本理解，变量可能进入全局作用域。

原始笔记还预留了函数与泛型、类型编程、类和接口、装饰器、工程化等标题，但没有提供具体内容，本整理不对这些标题进行扩写。


整理 TypeScript 类型分类、类型操作、类型安全、编译流程和配置相关知识。

TypeScript 类型系统笔记


# JavaScript

## 变量、类型与作用域

`var` 没有块级作用域，存在变量提升，未初始化时为 `undefined`，同一作用域可以重复声明；全局 `var` 变量会挂载到 `window`。`let` 和 `const` 有块级作用域，不允许同一作用域重复声明，并存在暂时性死区；`const` 还要求声明时初始化且不能重新赋值。

JavaScript 数据类型包括 `null`、`undefined`、`boolean`、`string`、`number`、`object`、`bigint` 和 `symbol`。`number` 使用双精度浮点数表示。常见判断方式是 `typeof`、`instanceof` 和 `Object.prototype.toString.call(value)`。

JavaScript 数字遵循 IEEE 754 浮点数表示，由符号位、指数位和尾数组成，因此可能出现 `0.1 + 0.2` 的精度问题。原笔记列出的处理库有 `math.js`、`decimal.js` 和 `big.js`。

作用域包括全局作用域、模块作用域、函数作用域和 ES6 的块级作用域。`async` 脚本加载完成后立即执行，`defer` 脚本在 DOM 准备好后、`DOMContentLoaded` 之前执行。

## 原型、this、new 与继承

每个函数都有 `prototype` 对象，其 `constructor` 指向函数自身，实例可以通过原型链访问共享属性和方法。原型链在 ES6 `class` 出现之前用于实现继承，但原笔记指出它不支持真正的私有属性。

`this` 可以理解为调用 `call` 时传入的第一个参数。例如 `a.fn()` 的调用效果可类比为 `a.fn.call(a)`。`new` 的过程包括：创建临时对象、绑定构造函数原型、将 `this` 指向临时对象、执行构造函数，并根据构造函数返回值决定最终返回临时对象还是显式返回的对象。`Object.create` 主要负责创建对象并绑定原型。

JavaScript 可以用构造函数加 `prototype` 定义类，也可以使用 `class`。继承可以通过构造函数组合原型链实现，也可以通过 `extends` 和 `super` 实现。

`instanceof` 会沿左侧对象的原型链查找右侧构造函数的 `prototype`，直到找到或到达 `null`。相等运算的隐式转换中，字符串和数字会转为数字，布尔值会转为数字，对象会先尝试 `valueOf()`，再尝试 `toString()` 转为原始值。

## 函数与闭包

立即执行函数是声明匿名函数并立即调用，主要用于创建局部作用域。闭包可以概括为“函数加自由变量”，可避免污染全局、提供局部变量访问器并延长变量生命周期；使用不当可能造成内存泄漏。

箭头函数没有自己的 `this` 和 `arguments`，不能作为构造函数使用，`this` 继承自外层作用域。纯函数的返回值只依赖参数，执行时不产生改变外部状态的副作用。

## 浏览器线程、尺寸与事件

浏览器内核涉及 GUI 渲染线程、JavaScript 引擎线程、定时器触发线程、事件触发线程和异步 HTTP 请求线程。GUI 线程与 JS 引擎线程互斥，长时间执行 JavaScript 会阻塞页面渲染。

DOM 尺寸和位置属性包括：`clientWidth/clientHeight`（内容加内边距）、`offsetWidth/offsetHeight`（内容、内边距和边框）、`clientTop/clientLeft`（边框宽度）、`offsetTop/offsetLeft`（相对最近定位祖先的位置）、`scrollWidth/scrollHeight`（滚动区域尺寸）以及可读写的 `scrollTop/scrollLeft`。事件对象中，`clientX/Y` 相对浏览器可视区，`screenX/Y` 相对整个屏幕，`offsetX/Y` 相对目标元素，`pageX/Y` 相对页面。

事件委托利用冒泡机制在父元素上统一监听，可以减少监听器并支持动态元素；`target` 是实际触发事件的元素，`currentTarget` 是注册监听器的元素。

## 常见手写题

### 防抖与节流

节流是在触发后的一段时间内不再执行，适合限制连续事件的执行频率。防抖是在触发后延迟执行，如果延迟期间再次触发就重新计时，适合搜索输入等场景。

### 深拷贝与数组去重

`JSON.parse(JSON.stringify(obj))` 可以实现简单深拷贝，但不支持 `Date`、正则、`undefined` 和函数。递归实现需要区分数组、日期、正则和函数，并使用 `WeakMap` 处理循环引用。数组去重可以使用 `Set` 配合展开运算符或 `Array.from`。

### AJAX、Promise 与发布订阅

原笔记使用 `XMLHttpRequest` 的 `readyState` 和状态码判断 AJAX 成功或失败。手写 Promise 时需要维护 pending、fulfilled、rejected 状态，异步执行处理函数，并实现 `then`、`catch`、`finally`、`resolve`、`reject`、`all`、`allSettled` 和 `race` 等方法；`Promise.all` 在全部成功时按输入顺序返回结果，任意一个失败则失败。

发布订阅模式通过事件名维护回调队列，提供 `on`、`emit` 和 `off` 操作。

### 拖拽

拖拽需要记录鼠标按下时的位置，在移动时计算偏移量，并更新元素位置。原笔记建议监听范围不要局限于元素本身，不使用较难控制的原生 `drag` 事件，并优先使用 `transform`，避免频繁修改 `top` 引起回流。


整理 JavaScript 类型、作用域、原型、this、异步机制和浏览器线程等核心知识。

JavaScript 基础与原理笔记


# CSS

## CSS 单位

绝对单位包括 `cm`、`mm`、`in`、`pc`、`pt`、`px`。相对单位包括：`em`（相对父元素字体大小）、`ex`（字符 x 的高度）、`ch`（数字 0 的宽度）、`rem`（根元素字体大小）、`lh`（元素的 `line-height`）、`vw`、`vh`、`vmin` 和 `vmax`（相对视口尺寸）。

## BFC

BFC（块级格式化上下文）是一块独立的布局环境，内部元素的布局与外部互不影响。BFC 中的盒子通常按垂直方向排列，同一 BFC 内相邻盒子的垂直外边距可能合并；计算 BFC 高度时，浮动子元素也会参与计算，BFC 区域不会与浮动盒子重叠。

常见触发方式：根元素、`float` 不为 `none`、`position: absolute/fixed`、`overflow` 不为 `visible`、`inline-block`、`table-cell`、`flex` 等。

常见用途：清除浮动、避免外边距合并、避免非浮动元素被浮动元素覆盖以及解决父元素高度塌陷。

IFC 是行内格式化上下文，GFC 是网格布局格式化上下文，FFC 是弹性格式化上下文。

## 垂直居中与隐藏元素

原笔记记录的垂直居中方式包括：使用表格布局，将父元素设置为 `display: table`、子元素设置为 `display: table-cell`，使用 `transform: translateY(-50%)`，使用绝对定位配合 `margin: auto`，以及使用 Flex 布局。

隐藏元素可以分为三类：

- 完全隐藏：`display: none` 或 `hidden` 属性，元素不再参与渲染。
- 视觉隐藏：`opacity: 0`、`visibility: hidden`，或将绝对定位元素移出可视范围；这些方式通常仍会占据空间或保留布局影响。
- 语义隐藏：使用 `aria-hidden="true"` 表示辅助技术不应读取该内容。

## 浮动与定位

浮动最初用于实现文字环绕图片的排版。浮动元素会脱离普通文档流，并彼此贴靠；一行空间不足时会换行。清除浮动可以使用父元素固定高度、`clear`、额外的清除元素、伪元素或 `overflow: hidden` 触发 BFC。原笔记指出，现代布局通常优先使用 Flex，浮动主要用于兼容旧场景。

`position` 的含义：`static` 是默认的普通流定位；`relative` 相对自身原位置偏移且不脱离文档流，也可作为绝对定位子元素的参考；`absolute` 相对最近的已定位祖先元素定位，没有该祖先时参考文档；`fixed` 相对浏览器窗口定位；`sticky` 在达到阈值前表现为相对定位，达到阈值后表现为固定定位。

## 层叠、计算与引入

CSS 属性的计算大致经历：确定声明值、解决层叠冲突、使用继承值、使用浏览器默认值。层叠判断主要看重要性、选择器专用性和源码顺序；原笔记给出的常见优先级顺序是行内样式高于 ID、类、高于标签，同权重时后声明的覆盖先声明的，`!important` 优先级最高但应少用。

CSS 可通过 `link` 外联、`style` 内联和 `@import` 引入。`@import` 是 CSS 规则，加载通常晚于外部样式表，存在兼容性和 DOM 控制方面的限制。

## 过渡、动画与盒模型

`transition` 是由属性、持续时间、时间函数和延迟组成的复合属性，可用 `transitionend` 监听完成。CSS 动画通过 `@keyframes` 声明关键帧，再用 `animation` 指定动画名和时间。

盒模型有 `content-box` 和 `border-box`。前者的 `width` 只表示内容宽度，实际宽度还要加上内边距和边框；后者的 `width` 包含内容、左右内边距和左右边框，计算更方便。

## 响应式与其他

`calc()` 可计算长度、数值、角度和频率。媒体查询可以写在 `link` 的 `media` 属性、`@import` 或 `@media` 规则中。


整理 CSS 单位、BFC、布局定位、层叠、动画和盒模型等基础知识。

CSS 基础与布局笔记


# HTML

## HTML 语义化

语义化是使用能够表达内容含义的 HTML 标签来组织页面，例如用 `h1`-`h6` 表示标题、`p` 表示段落、`article` 表示文章、`main` 表示主要内容、`aside` 表示边栏、`nav` 表示导航。

语义化有两个主要作用：有利于搜索引擎理解页面内容，也便于人阅读和团队维护。

## HTML5 新增标签

- 文章结构：`header`、`main`、`footer`、`nav`、`section`、`article`、`figure`、`mark`。
- 多媒体和图形：`video`、`audio`、`svg`、`canvas`。
- 表单类型：`email`、`tel` 等。

## Canvas 与 SVG

Canvas 主要通过绘图上下文使用笔刷绘制二维图形；SVG 主要通过标签描述不规则的矢量图形。两者都可用于二维绘图。

SVG 的节点支持分层和事件处理，但节点过多时渲染可能变慢；Canvas 通常有更好的绘制性能，但代码组织更复杂，事件和分层能力需要额外处理或借助库实现。

## DOM 事件模型

事件传播先经过从上到下的捕获阶段，再经过从下到上的冒泡阶段。`addEventListener` 的第三个参数可以选择监听阶段，`event.stopPropagation()` 可以阻止事件继续捕获或冒泡。

## SEO

页面内部优化包括：设置合理的 `title`、`description`、`keywords`，使用语义化 HTML，为非装饰图片添加 `alt`，谨慎使用 `display: none` 隐藏重要内容，将重要内容放在 HTML 前部，并减少使用 `iframe`，因为搜索引擎通常无法直接抓取其中的内容。外部优化包括向各个搜索网站提交网站。

原笔记中的建议是：标题一般不超过 80 个字符，描述一般不超过 150 个字，关键词一般设置 3 个左右。

## 微格式

微格式是在已有、广泛采用的标准上建立的一组开放数据格式。它把语义嵌入 HTML，例如给链接增加 `rel="home page"` 等语义属性，使标签具备更明确的结构和含义。

## 替换元素与页面可见性

替换元素的内容不由 CSS 直接控制，原笔记列举了 `iframe`、`img`、`audio`、`video`。

页面可见性可以通过 `document.hidden` 和 `document.visibilityState` 判断。`visible` 表示页面处于当前激活标签且窗口未最小化；`hidden` 表示标签未激活或窗口被最小化；`prerender` 表示页面正在重新生成、用户暂时不可见。`visibilitychange` 事件用于监听状态变化。


整理 HTML 语义化、HTML5 标签、Canvas、SVG、DOM 事件与页面可见性等知识。

HTML 基础与语义化笔记


# 前端面试笔记整理

这些笔记整理自 `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对象，新任务的状态和数据会根据后续处理的结果而改变

### 静态方法

<br />

| 方法                   | 描述                                                                                                                                |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Promise.resolve(data)  | 将一个成功状态的Promise对象返回                                                                                                     |
| Promise.reject(reason) | 将一个失败状态的Promise对象返回                                                                                                     |
| Promise.all([])        | 返回一个任务数组，<br>全部成功则成功,数据为数组<br>任何一个失败则失败,数据为失败的任务数据                                          |
| Promise.any([])        | 任一成功 → 该成功值 <br> 全部失败报错提示 `AggregateError: All promises were rejected`                                              |
| Promise.allSettled([]) | 全部完成（不论成功/失败） 返回数据格式 <br> `[{"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的原理、实现和应用场景。

文章归档

2025 年