• 1. 虚拟DOM (Virtual DOM)
• 2. Diffing算法（协调算法）
  • 比较策略：
  • Diff规则：
• 3. Fiber架构（React 16+）
  • Fiber核心概念：
• 4. 渲染流程
  • 初始化渲染：
  • 更新过程：
• 5. Hooks原理
  • Hooks规则：
• 6. 事件系统
• 7. 组件更新机制
  • 类组件：
  • 函数组件：
• 8. 性能优化原理
  • React.memo：
  • useMemo/useCallback：
• 9. 新的并发特性（React 18+）
  • Concurrent Mode：
• 10. 核心优势
• 11. 流程总结

React 的核心原理主要围绕以下几个方面：

1. 虚拟DOM (Virtual DOM)

1
2
3
4
5
6
7
8
9
10
11
12
13

// 虚拟DOM是一个JavaScript对象
const virtualDOM = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      {
        type: 'h1',
        props: { children: 'Hello' }
      }
    ]
  }
}

工作原理：

• React 创建虚拟DOM树（轻量级的JS对象）
• 状态变化时，生成新的虚拟DOM树
• 通过Diff算法比较新旧树的差异
• 批量更新实际DOM（最小化操作）

2. Diffing算法（协调算法）

React 使用 O(n) 复杂度的启发式算法：

比较策略：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 不同类型元素 → 完全重建
if (old.type !== new.type) {
  // 卸载旧组件，挂载新组件
}

// 相同类型元素 → 更新属性
if (old.type === new.type) {
  // 只更新变化的属性
  updateProperties(oldNode, newNode);
}

// 列表元素使用key优化
<ul>
  <li key="a">A</li>
  <li key="b">B</li>
</ul>

Diff规则：

1. 同级比较：只比较同一层的节点
2. Key的重要性：帮助React识别元素的移动、添加、删除
3. 类型不同则重建：元素类型改变，整个子树重建

3. Fiber架构（React 16+）

1
2
3
4
5
6
7
8
9
10

// Fiber节点结构
const FiberNode = {
  type: FunctionComponent | ClassComponent | HostComponent,
  stateNode: Component实例 | DOM节点,
  return: 父Fiber,
  child: 第一个子Fiber,
  sibling: 兄弟Fiber,
  alternate: 上次渲染的Fiber,
  effectTag: 需要执行的副作用（PLACEMENT, UPDATE, DELETION等）
}

Fiber核心概念：

• 增量渲染：将渲染工作拆分成多个小任务
• 可中断：React可以暂停、恢复渲染
• 优先级调度：为不同类型的更新分配优先级

4. 渲染流程

初始化渲染：

1
2
3
4

1. JSX → React.createElement() → 虚拟DOM对象
2. 创建Fiber树（协调阶段）
3. 计算DOM更新（提交阶段）
4. 实际DOM操作

更新过程：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 1. 触发更新
setState(newState);

// 2. 调度更新（Scheduler）
requestIdleCallback(() => {
  // 在空闲时间执行
});

// 3. 协调阶段（可中断）
workLoop(deadline) {
  while (有工作 && 有空闲时间) {
    performUnitOfWork(currentFiber);
  }
}

// 4. 提交阶段（不可中断）
commitRoot();

5. Hooks原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

let hookIndex = 0;  // 当前hook索引
let workInProgressHook = null;  // 当前处理的hook

function useState(initialState) {
  // 获取当前hook
  const hook = {
    memoizedState: initialState,
    queue: [],  // 更新队列
    next: null  // 下一个hook
  };
  
  // 返回[状态, 更新函数]
  return [hook.memoizedState, dispatchAction];
}

function dispatchAction(queue, action) {
  // 创建更新对象
  const update = { action, next: null };
  
  // 将更新加入队列
  // 调度重新渲染
  scheduleUpdate();
}

Hooks规则：

• 只能在函数组件顶层调用
• Hook调用顺序必须稳定（基于链表实现）
• 每个Hook有独立的内存单元

6. 事件系统

React使用合成事件（SyntheticEvent）：

1
2
3
4
5
6
7
8
9
10
11
12

// 事件委托
document.addEventListener('click', dispatchEvent);

// 合成事件池
function SyntheticEvent(nativeEvent) {
  this.nativeEvent = nativeEvent;
  this.currentTarget = null;
  // ... 其他属性
  
  // 自动回收（React 17前）
  this.persist(); // 阻止自动回收
}

7. 组件更新机制

类组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class Component {
  setState(partialState, callback) {
    // 1. 将更新加入队列
    this.updater.enqueueSetState(this, partialState, callback);
    
    // 2. 调度更新
    scheduleUpdate();
  }
  
  // 生命周期
  shouldComponentUpdate(nextProps, nextState) {
    // 决定是否更新
    return true;
  }
}

函数组件：

1
2
3
4
5
6
7
8
9
10
11
12

function MyComponent(props) {
  // 每次渲染都会调用整个函数
  const [state, setState] = useState();
  
  // useEffect处理副作用
  useEffect(() => {
    // 副作用代码
    return () => {
      // 清理函数
    };
  }, [dependencies]);
}

8. 性能优化原理

React.memo：

1
2
3
4
5
6
7

const MemoComponent = React.memo(
  MyComponent,
  (prevProps, nextProps) => {
    // 自定义比较逻辑
    return prevProps.id === nextProps.id;
  }
);

useMemo/useCallback：

1
2
3
4
5
6
7
8
9
10
11

const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b]  // 依赖数组
);

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b]
);

9. 新的并发特性（React 18+）

Concurrent Mode：

1
2
3
4
5
6
7
8
9
10

// 可中断的渲染
const root = ReactDOM.createRoot(container);

// 过渡更新（低优先级）
startTransition(() => {
  setState(newState);  // 不紧急的更新
});

// 延迟值
const deferredValue = useDeferredValue(value);

10. 核心优势

1. 声明式编程：描述UI应该是什么样子
2. 组件化：高内聚、低耦合
3. 一次学习，随处编写：React Native、React VR
4. 强大的生态系统

理解这些原理有助于：

• 编写更高效的代码
• 更好的性能优化
• 避免常见错误
• 理解React生态系统中的其他库

11. 流程总结

• 一、背景
• 二、什么是 pnpm ？
• 三、pnpm 对比 npm/yarn 有什么优势？
• 四、什么是 changesets ？
• 五、为什么要使用 changesets ？
• 总结

一、背景

最近公司私服开启鉴权，对于前端来说，带来一些非常重要的影响和变化：

1. 不管拉取 npm 包还是发布 npm 包，均需要鉴权，具体就是 .npmrc 配置信息需要增加 auth token 信息；
2. 使用 yarn 出现偶然下载包失败问题以及必现的无法发包问题，而 npm 和 pnpm 可以；
3. 现有组件库工程（所使用的工具链为 yarn + lerna）发包时会出现 401 鉴权问题，甚至有时连安装依赖包也有问题。

基于以上三个问题，我们做了一些尝试：

1. 将 yarn 从 1.x 升级到 2.x，也就是说 yarn 2.x + lerna，不行；❌
2. 将 yarn 改成 pnpm，使用 pnpm + lerna 组合，也出现了一些问题；❌
3. 将 yarn + lerna 组合改成 pnpm + workspace + [pnpm publish]，成功。✅

最后，我们决定彻底地将 yarn + lerna 组合切换成 pnpm + workspace + changesets 。

二、什么是 pnpm ？

pnpm 是新一代的包管理工具，是目前较为先进的包管理器。按照官网说法，可以实现节约磁盘空间并提升安装速度和创建非扁平化的 node_modules 文件夹两大目标，具体原理可以参考 pnpm 官网。

以下是官方给的一张关于 pnpm 的原理图：

所以，综合上图，我就现在知道 pnpm 为什么说是先进的包管理器了吧。

首先，最大的优点是节省磁盘空间，一个包全局只保存一份，剩下的都是软硬连接，这必然节省不少磁盘空间，并且使用软链接的方式创建非扁平的 node_modules 嵌套关系。

其次就是快，因为通过链接的方式而不是复制，自然会快。

三、pnpm 对比 npm/yarn 有什么优势？

1. 速度快

pnpm 安装包的速度究竟有多快？先以 React 包为例来对比一下:

可以看到，作为黄色部分的 pnpm，在绝多大数场景下，包安装的速度都是明显优于 npm/yarn，速度会比 npm/yarn 快 2-3 倍。

对 yarn 比较熟悉的同学可能会说，yarn 不是有 PnP 安装模式吗？直接去掉 node_modules，将依赖包内容写在磁盘，节省了 node 文件 I/O 的开销，这样也能提升安装速度。

接下来，我们以这样一个仓库为例，我们来看一看 benchmark 数据，主要对比一下 pnpm 和 yarn PnP:

从中可以看到，总体而言，pnpm 的包安装速度还是明显优于 yarn PnP 的。

2. 高效利用磁盘空间

pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件，这个文件系统出色的地方在于:

• 不会重复安装同一个包。用 npm/yarn 的时候，如果 100 个项目都依赖 lodash，那么 lodash 很可能就被安装了 100 次，磁盘中就有 100 个地方写入了这部分代码。但在使用 pnpm 只会安装一次，磁盘中只有一个地方写入，后面再次使用都会直接使用 hardlink（硬链接）。
• 即使一个包的不同版本，pnpm 也会极大程度地复用之前版本的代码。举个例子，比如 lodash 有 100 个文件，更新版本之后多了一个文件，那么磁盘当中并不会重新写入 101 个文件，而是保留原来的 100 个文件的 hardlink，仅仅写入那一个新增的文件。

3. 支持 monorepo

随着前端工程的日益复杂，越来越多的项目开始使用 monorepo。之前对于多个项目的管理，我们一般都是使用多个 git 仓库，但 monorepo 的宗旨就是用一个 git 仓库来管理多个子项目，所有的子项目都存放在根目录的 packages 目录下，那么一个子项目就代表一个 package。

pnpm 与 npm/yarn 另外一个很大的不同就是支持了 monorepo，体现在各个子命令的功能上，比如在根目录下 pnpm add A -r, 那么所有的 package 中都会被添加 A 这个依赖，当然也支持 --filter 字段来对 package 进行过滤。

pnpm 通过 pnpm-workspace.yaml 配置定义工作空间目录，并能够使您从工作空间中包含 / 排除目录。

4. 安全性高

之前在使用 npm/yarn 的时候，由于 node_modules 的扁平结构，如果 A 依赖 B， B 依赖 C，那么 A 当中是可以直接使用 C 的，但问题是 A 当中并没有声明 C 这个依赖。因此会出现这种非法访问的情况。但 pnpm 脑洞特别大，自创了一套依赖管理方式，很好地解决了这个问题，保证了安全性，具体怎么体现安全、规避非法访问依赖的风险的，主要表现为幽灵依赖。

小结

总而言之，pnpm 与 npm/yarn 比较，可以通过以下表格总结出来。

四、什么是 changesets ？

在 workspace 中对包版本管理是一个非常复杂的工作，原来 yarn 还可以使用 lerna，遗憾的是 pnpm 没有提供内置的解决方案，一部分开源项目在自己的项目中自己实现了一套包版本的管理机制，比如 Vue3、Vite等。

pnpm 推荐了两个开源的版本控制工具：

• changesets
• rush

这里我们采用了 changesets 来做依赖包的管理。选用 changesets 的主要原因还是文档更加清晰一些，感觉上手比较容易。

按照 changesets 文档介绍的，changesets 主要是做了两件事：

Changesets hold two key bits of information: a version type (following semver), and change information to be added to a changelog.

简而言之就是管理包的 version 和生成 changelog。

五、为什么要使用 changesets ？

1. lerna 发包方案缺陷

早期我们的组件库版本中采用了 lerna 这一套的发包方案，但随着频繁的使用和深入的研究发现，这套方案随之带来了不少问题：

• ignoreChanges 不能做到文件的完全忽略，存在优先级问题；
• lerna version 根据 commit 以及 tag 更新出来的包版本不符合预期；
• 生成的 CHANGELOG 文件信息不完整；
• lifecycle scripts 经常命中一些用户自定义的 script（例如 publish 等）；
• CI 中自动化发包场景需要很高的定制成本；
• lerna 本身不支持 workspace 协议，导致基于 pnpm 开发的一些仓库无法使用。

2. changesets 的基本工作流程及优势

Changesets 提供了简单、轻量的版本控制和发布方案，其工作流原理如下。

整个流程可以理解为四部曲：

第一步，changeset init。通过执行执行该命令，可以在项目根目录下生成一个 .changeset 目录，里面会生成一个 changesets 的 config 文件，一般项目初始化时，执行一遍即可，后续不用再执行该操作。

第二步，changeset add 或者 changeset。add 在 changesets 中算得上比较关键的命令之一了，它会根据 monorepo下的项目来生成一个 changeset 文件，里面会包含前面提到的 changeset 文件信息(更新包名称、版本层级、CHANGELOG 信息。

第三步，changeset version。 这个命令这里可以当作 Bump Version（版本号升级或更新操作）来理解，这里本质上做的工作是消耗 changesets 文件并且修改对应包版本以及依赖该包的包版本，同时会根据之前 changeset 文件里面的信息来生成对应的 CHANGELOG 信息。

第四步，changeset publish。本质上就是对 npm publish 做了一次封装，同时会检查对应的 registry 上有没有对应包的版本，如果已经存在了，就不会再发包了，如果不存在会对对应的包版本执行一次 npm publish。

另外，changesets 支持 pre 版本 和 非 pre 版本 的操作切换，需要在第二步之前执行 changeset pre enter、changeset pre exit 等操作。

小结

总而言之，主要优点在于提供了很大的自主权在使用者手中，在复杂的业务场景下能够做出一些合适的调整，例如用户可以自行修改 changesets 文件、changelog 文件、甚至是 Bump Version 后不满意的版本。

相比较于 lerna 提供的比较理想化的方案而言，changeset 本身是一套泛用性很强的方案，而且比较适合当下 monorepo 工作流场景下的一些运作方式，虽然本身还存在着不少的缺点 。

总结

综上所述，为什么使用 pnpm + workspace + changesets 替代 yarn + lerna 构建我们组件库，可以总结为以下几个点。

1. 使用 pnpm 解决私服开启鉴权带来的一些非常重要的影响和变化；
2. 充分利用 pnpm 不可替代的速度快、高效利用磁盘空间、天然支持 monorepo（支持 workspace 配置）、 安全性高（比如解决幽灵依赖问题、node_modules 嵌套过深问题）等优势；
3. changesets 带来更加简单、更加轻量的版本控制和发布方案，使得版本管理及发布流程更多的自主权掌握在使用者手中。

在 Node.js 中，可以使用多种方式实现多线程编程，其中最常用的方式包括：

1. 使用 Worker Threads 模块：这是 Node.js 内置的一个模块，它提供了创建和管理多线程的 API。通过该模块，可以在 Node.js 中启动多个线程来执行不同的任务，以提高应用程序的性能和响应速度。该模块使用了共享内存和线程间消息传递来实现多线程编程。
2. 使用 Child Processes 模块：该模块也是 Node.js 内置的一个模块，它允许创建子进程来执行一些独立的任务。这些子进程可以通过 IPC（进程间通信）与主进程进行通信，从而实现多线程编程。
3. 使用 Cluster 模块：该模块允许将 Node.js 应用程序分为多个进程，每个进程都可以处理来自客户端的请求。通过将请求分配给不同的进程，可以有效地利用多核 CPU，从而提高应用程序的性能。

需要注意的是，虽然 Node.js 可以使用多线程来提高应用程序的性能，但多线程编程也可能会带来一些问题，如竞争条件和死锁等。因此，在使用多线程编程时，需要仔细考虑和处理这些问题，以确保应用程序的正确性和稳定性。

详细展开说如下。

1. 使用 Worker Threads 模块

Worker Threads 是 Node.js 内置的一个模块，它提供了一种在 Node.js 中创建和管理多线程的方式。通过该模块，可以在 Node.js 中启动多个线程来执行不同的任务，以提高应用程序的性能和响应速度。

Worker Threads 模块使用了共享内存和线程间消息传递来实现多线程编程。具体来说，可以通过 Worker 类来创建和管理多个线程，每个线程都可以独立地执行一个任务。在任务执行过程中，可以使用 postMessage() 方法向其他线程发送消息，也可以使用 on() 方法监听其他线程发送的消息。

需要注意的是，由于多个线程共享同一个内存空间，因此需要特别小心，避免出现竞争条件和内存泄漏等问题。

以下是使用 Worker Threads 模块示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const { Worker } = require('worker_threads');

function runService(workerData) {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData });
    worker.on('message', resolve);
    worker.on('error', reject);
    worker.on('exit', (code) => {
      if (code !== 0)
        reject(new Error(`Worker stopped with exit code ${code}`));
    });
  });
}

async function run() {
  const result = await runService('hello');
  console.log(result);
}

run();

在上面的示例中，我们使用 Worker Threads 模块创建了一个新的 Worker 对象，并指定了需要执行的 worker.js 文件和传递给它的 workerData 参数。在 worker.js 文件中，我们可以使用 parentPort.postMessage() 方法向主线程发送消息，也可以使用 workerData 属性获取从主线程传递过来的参数。

2. 使用 Child Processes 模块

Child Processes 模块也是 Node.js 内置的一个模块，它允许创建子进程来执行一些独立的任务。这些子进程可以通过 IPC（进程间通信）与主进程进行通信，从而实现多线程编程。

使用 Child Processes 模块时，可以通过 spawn() 方法创建一个子进程，并指定该子进程执行的命令和参数。子进程创建后，可以使用 stdin、stdout 和 stderr 等标准 I/O 流与其进行通信。此外，还可以使用 IPC 机制来实现主进程和子进程之间的通信。

需要注意的是，子进程与主进程之间的通信会涉及到进程间的上下文切换，因此在大规模并发的情况下，可能会导致性能问题。

以下是使用 Child Processes 模块示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const { spawn } = require('child_process');

const child = spawn('ls', ['-lh', '/usr']);

child.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

child.stderr.on('data', (data) => {
  console.error(`stderr: ${data}`);
});

child.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});

在上面的示例中，我们使用 Child Processes 模块创建了一个新的子进程，并指定需要执行的 ls 命令和参数。在子进程中，我们可以使用 process.stdout 和 process.stderr 对象输出日志信息，也可以使用 process.send() 方法向主进程发送消息。

3. 使用 Cluster 模块

Cluster 模块允许将 Node.js 应用程序分为多个进程，每个进程都可以处理来自客户端的请求。通过将请求分配给不同的进程，可以有效地利用多核 CPU，从而提高应用程序的性能。

在使用 Cluster 模块时，可以通过调用 cluster.fork() 方法来创建一个新的工作进程，并将其注册到主进程的事件循环中。主进程和工作进程之间可以使用 IPC 机制进行通信，并共享一些数据和资源。此外，工作进程也可以独立地处理客户端的请求，从而提高应用程序的性能和可扩展性。

需要注意的是，Cluster 模块虽然可以提高应用程序的性能，但也会带来一些复杂性和挑战。例如，需要考虑进程间通信的问题、负载均衡的问题以及进程的崩溃等问题。

以下是使用 Cluster 模块示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  console.log(`Master ${process.pid} is running`);

  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker, code, signal) => {
    console.log(`worker ${worker.process.pid} died`);
  });
} else {
  console.log(`Worker ${process.pid} started`);

  http.createServer((req, res) => {
    res.writeHead(200);
    res.end('Hello World\n');
  }).listen(8000);

  console.log(`Worker ${process.pid} listening on port 8000`);
}

在上面的示例中，我们使用 Cluster 模块创建了多个工作进程，并使用 HTTP 模块创建了一个 Web 服务器。每个工作进程都可以独立地处理客户端的请求，并使用 console.log() 方法输出日志信息。

• 方法一
• 方法二

升级之前要先检查更新

1

npm outdated

执行以上命令，可以看到所有可以更新的模块。
我们需要先更新 package.json 文件。

方法一

我们需要安装 npm-check-updates 模块

1

npm install -g npm-check-updates

检查可更新的模块

1

ncu

或者

1

npm-check-updates

以上两条命令都可以检查可更新模块。接下来更新 package.json 的依赖包到最新版本：

1

ncu -u

以上命令执行时更新全部模块。

方法二

实际场景不建议一次性全部更新，有一定的风险，可以根据实际需要，更新指定的模块，并且可以根据作用范围在后面加上 -D、-S 或者 -g。

1

npm update xxxx # -D 、-S 或者 -g

如果，是需要指定更新到某个版本可提前修改 package.json 中的版本号。

保险起见，更新完之后，可先删除 node_modules 目录，然后重新安装 npm 包。

1

npm install

有效的 IP 地址正好由四个整数（每个整数位于 0 到 255 之间组成），整数之间用 ‘.’ 分隔。

示例:

1
2

输入: "25525511135"
输出: ["255.255.11.135", "255.255.111.35"]

参考解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
 * @param {string} s
 * @return {string[]}
 */
var restoreIpAddresses = function(s) {
  const res = []

  /**
   * cur 当前
   * sub 剩余字符串
   */
  const search = (cur, sub) => {
    // 超出范围
    if (sub.length > 12) {
      return res
    } else if (cur.length === 4 && cur.join('') === s) {
      res.push(cur.join('.'))
    } else {
      // ip位最长只有三位
      const len = Math.min(3, sub.length)
      for (let i = 0; i < len; i++) {
        const tmp = sub.substr(0, i + 1)
        if (tmp < 256 && Number(tmp).toString() === tmp) {
          search([ ...cur, tmp ], sub.substr(i + 1))
        }
      }
    }
  }
  search([], s)
  return res
};

解决思路

递归

示例：

1
2
3

输入：s = 7, nums = [2,3,1,2,4,3]
输出：2
解释：子数组 [4,3] 是该条件下的长度最小的子数组。

进阶：

• 如果你已经完成了 O(n) 时间复杂度的解法, 请尝试 O(n log n) 时间复杂度的解法。

参考解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

/**
 * @param {number} s
 * @param {number[]} nums
 * @return {number}
 */
var minSubArrayLen = function(s, nums) {
  // 双指针
  let minLen = nums.length + 1
  let i = 0
  let j = 0
  let sum = 0

  while (j < nums.length) { // 放大
    sum += nums[j]
    while (sum >= s) { // 缩小
      sum -= nums[i]
      minLen = Math.min(minLen, j - i + 1)
      i++
    }
    j++
  }

  return minLen === nums.length + 1 ? 0 : minLen
}

参考思路

• 扩张窗口：为了找到一个可行解，找到了就不再扩张
• 收缩窗口：在长度上优化该可行解，直到条件被破坏
• 寻找下一个可行解，然后再优化。

示例 1:

1
2
3

输入: [[1,3],[2,6],[8,10],[15,18]]
输出: [[1,6],[8,10],[15,18]]
解释: 区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].

示例 2:

1
2
3

输入: [[1,4],[4,5]]
输出: [[1,5]]
解释: 区间 [1,4] 和 [4,5] 可被视为重叠区间。

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/**
 * @param {number[][]} intervals
 * @return {number[][]}
 */
var merge = function(intervals) {
  // 先根据左顶点进行升序排序
  intervals = intervals.sort((a, b) => a[0] - b[0])
  for (let i = 0; i < intervals.length - 1; i++) {
    const a2 = intervals[i][1] // 当前元素的右顶点
    const b1 = intervals[i+1][0] // 下个元素的左顶点
    const b2 = intervals[i+1][1] // 下个元素的右顶点
    if (a2 >= b1) { // 当前元素的右顶点与下个元素左顶点比较
      intervals[i][1] = Math.max(a2, b2)
      intervals.splice(i + 1, 1) // 删掉下标 i + 1
      i--
    }
  }

  return intervals
}

解题思路

1. 先按左顶点进行升序排序；
2. 循环判断 intervals[i][1] >= intervals[i+1][0]，即当前元素右顶点与下个元素左顶点比较；
3. 当前元素右顶点取值，符合条件删除下一个元素 intervals[i+1]。

注：

边界i<intervals.length-1

因为删除元素，数组变短了。此时： i–

示例：
二叉树：[3,9,20,null,null,15,7],

1
2
3
4
5

  3
 / \
9  20
  /  \
 15   7

返回其层次遍历结果：

1
2
3
4
5

[
  [3],
  [9,20],
  [15,7]
]

个人解答

广度遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/**
 * Definition for a binary tree node.
 * function TreeNode(val) {
 *     this.val = val;
 *     this.left = this.right = null;
 * }
 */
/**
 * @param {TreeNode} root
 * @return {number[][]}
 */
var levelOrder = function(root) {
  if (!root) return []
  var res = []
  var queue = [ root ]

  while (queue.length) { // 纵向遍历
    var curr = [] // 当前行
    var next = [] // 下一行

    while (queue.length) { // 横向遍历
      var node = queue.shift()
      curr.push(node.val)
      if (node.left) {
        next.push(node.left)
      }
      if (node.right) {
        next.push(node.right)
      }
    }
    res.push(curr)
    queue = next
  }

  return res
};

深度遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/**
 * Definition for a binary tree node.
 * function TreeNode(val) {
 *     this.val = val;
 *     this.left = this.right = null;
 * }
 */
/**
 * @param {TreeNode} root
 * @return {number[][]}
 */
var levelOrder = function(root) {
  var res = []

  var levelTransal = function (node, order) {
    res[order] = res[order] || []
    res[order].push(node.val)

    if (node.left) {
      levelTransal(node.left, order + 1)
    }
    if (node.right) {
      levelTransal(node.right, order + 1)
    }
  }
  if (!root) return [] 
  levelTransal(root, 0)

  return res
};

解题思路

1. 广度遍历（双重循环）；
2. 深度遍历（递归）。

示例 1:

1
2
3
4
5

输入: 1->2->3->4->5->NULL, k = 2
输出: 4->5->1->2->3->NULL
解释:
向右旋转 1 步: 5->1->2->3->4->NULL
向右旋转 2 步: 4->5->1->2->3->NULL

示例 2:

1
2
3
4
5
6
7

输入: 0->1->2->NULL, k = 4
输出: 2->0->1->NULL
解释:
向右旋转 1 步: 2->0->1->NULL
向右旋转 2 步: 1->2->0->NULL
向右旋转 3 步: 0->1->2->NULL
向右旋转 4 步: 2->0->1->NULL

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} head
 * @param {number} k
 * @return {ListNode}
 */
var rotateRight = function(head, k) {
  if (!head || !head.next) return head

  // 先闭合环
  var old_tail = head
  var n = 1
  while (old_tail.next) {
    old_tail = old_tail.next
    n++
  }
  old_tail.next = head

  // 断开
  var new_tail = head
  var new_head = head
  for (var i = 0; i < n - k % n - 1; i++) {
    new_tail = new_tail.next
  }
  new_head = new_tail.next // 重新计算新的头结点
  new_tail.next = null // 断开

  return new_head
};

解题思路

1. 先将链表进行闭环
2. 从 n - k % n （因为考虑到k > n情况）处断开。

**说明：**你不能倾斜容器，且 n 的值至少为 2。

^{图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下，容器能够容纳水（表示为蓝色部分）的最大值为 49。}

示例：

1
2

输入：[1,8,6,2,5,4,8,3,7]
输出：49

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * @param {number[]} height
 * @return {number}
 */
var maxArea = function(height) {
  /**
   * 双指针
   */
  var res = 0;
  var i = 0;
  var j = height.length - 1;
  var cur = 0;
  while (i < j) {
    var h = Math.min(height[i], height[j]);
    cur = (j - i) * h;
    res = Math.max(res, cur);
    if (height[i] < height[j]) {
      i++;
    } else {
      j--;
    }
  }

  return res;
};

解题思路

双指针。

• async await 实现原理
• async await 注意点
• ES5 实现继承
• 虚拟DOM和Diff算法
• 工作中项目优化实践
• defineProperty vs proxy
• 手写 call
• 手写 apply
• 手写bind
• preload和prefetch
  • 对比
• 如何比较两个 DOM 树的差异？

在写这篇前端散记之前有写过另外两篇散记，可点击 前端散记 和 前端散记 2 访问。所谓散记，东西都比较零散，更谈不上什么深入，但是至少可以让读者知道一些概念理论，如果深入可以自行去查询相关知识。

async await 实现原理

async 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里。

1
2
3
4
5
6
7
8
9
10
11

async function fn(args){
  // ...
}

// 等同于

function fn(args){ 
  return spawn(function*() {
    // ...
  }); 
}

所有的 async 函数都可以写成上面的第二种形式，其中的 spawn 函数就是自动执行器。

下面给出 spawn 函数的实现，基本就是前文自动执行器的翻版。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    var gen = genF();

    function step(nextF) {
      try {
        var next = nextF();
      } catch(e) {
        return reject(e); 
      }
      if(next.done) {
        return resolve(next.value);
      } 
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });      
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

async 函数是非常新的语法功能，新到都不属于 ES6，而是属于 ES7。目前，它仍处于提案阶段，但是转码器 Babel 和 regenerator 都已经支持，转码后就能使用。

async await 注意点

await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try…catch 代码块中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

sync function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}

// 另一种写法

async function myFunction() {
  await somethingThatReturnsAPromise().catch(function (err){
    console.log(err);
  });
}

await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。

1
2
3
4
5
6
7
8

async function dbFuc(db) {
  let docs = [{}, {}, {}];

  // 报错
  docs.forEach(function (doc) {
    await db.post(doc);
  });
}

上面代码会报错，因为 await 用在普通函数之中了。但是，如果将 forEach 方法的参数改成 async 函数，也有问题。

1
2
3
4
5
6
7
8

async function dbFuc(db) {
  let docs = [{}, {}, {}];

  // 可能得到错误结果
  docs.forEach(async function (doc) {
    await db.post(doc);
  });
}

上面代码可能不会正常工作，原因是这时三个 db.post 操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用 for 循环。

1
2
3
4
5
6
7

async function dbFuc(db) {
  let docs = [{}, {}, {}];

  for (let doc of docs) {
    await db.post(doc);
  }
}

如果确实希望多个请求并发执行，可以使用 Promise.all 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = await Promise.all(promises);
  console.log(results);
}

// 或者使用下面的写法

async function dbFuc(db) {
  let docs = [{}, {}, {}];
  let promises = docs.map((doc) => db.post(doc));

  let results = [];
  for (let promise of promises) {
    results.push(await promise);
  }
  console.log(results);
}

ES5 实现继承

第一种方式是借助call实现继承：

1
2
3
4
5
6
7
8

function Parent1(){
  this.name = 'parent1';
}
function Child1(){
  Parent1.call(this);
  this.type = 'child1'
}
console.log(new Child1);

复制代码这样写的时候子类虽然能够拿到父类的属性值，但是问题是父类原型对象中一旦存在方法那么子类无法继承。那么引出下面的方法。

第二种方式借助原型链实现继承：

1
2
3
4
5
6
7
8
9
10

function Parent2() {
  this.name = 'parent2';
  this.play = [1, 2, 3]
}
function Child2() {
  this.type = 'child2';
}
Child2.prototype = new Parent2();

console.log(new Child2());

看似没有问题，父类的方法和属性都能够访问，但实际上有一个潜在的不足。举个例子：

1
2
3
4

var s1 = new Child2();
var s2 = new Child2();
s1.play.push(4);
console.log(s1.play, s2.play);

可以看到控制台：

明明我只改变了s1的play属性，为什么s2也跟着变了呢？很简单，因为两个实例使用的是同一个原型对象。

那么还有更好的方式么？

第三种方式：将前两种组合：

1
2
3
4
5
6
7
8
9
10
11
12
13

function Parent3 () {
  this.name = 'parent3';
  this.play = [1, 2, 3];
}
function Child3() {
  Parent3.call(this);
  this.type = 'child3';
}
Child3.prototype = new Parent3();
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play, s4.play);

可以看到控制台：

之前的问题都得以解决。但是这里又徒增了一个新问题，那就是Parent3的构造函数会多执行了一次（Child3.prototype = new Parent3();）。这是我们不愿看到的。那么如何解决这个问题？

第四种方式: 组合继承的优化1

1
2
3
4
5
6
7
8
9
10

function Parent4 () {
  this.name = 'parent4';
  this.play = [1, 2, 3];
}
function Child4() {
  Parent4.call(this);
  this.type = 'child4';
}
Child4.prototype = Parent4.prototype;

这里让将父类原型对象直接给到子类，父类构造函数只执行一次，而且父类属性和方法均能访问，但是我们来测试一下：

1
2
3

var s3 = new Child4();
var s4 = new Child4();
console.log(s3)

子类实例的构造函数是Parent4，显然这是不对的，应该是Child4。

第五种方式(最推荐使用)：优化2

1
2
3
4
5
6
7
8
9
10
11

function Parent5 () {
  this.name = 'parent5';
  this.play = [1, 2, 3];
}
function Child5() {
  Parent5.call(this);
  this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;

这是最推荐的一种方式，接近完美的继承。

因此，小小的继承虽然ES6当中简化了很多，但毋庸置疑的是，js是一门基于原型的语言，所以，用ES5来完成继承非常考验面试者对JS语言本身的理解，尤其是对于原型链是否理解清楚。

虚拟DOM和Diff算法

虚拟DOM

虚拟Dom(virtual dom)到底是什么，简单来讲，就是将真实的dom节点用JavaScript来模拟出来，而Dom变化的对比，放到 Js 层来做。

• 传统DOM节点

1
2
3
4

<ul id="list">
  <li class="item">jelon1</li>
  <li class="item">jelon2</li>
</ul>

• 对应虚拟DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
  tag: 'ul',
  attrs: {
    id: 'list'
  },
  children: [
    {
      tag: 'li',
      attrs: {
        className: 'item'
      },
      children: [ 'jelon1' ]
    },
    {
      tag: 'li',
      attrs: {
        className: 'item'
      },
      children: [ 'jelon2' ]
    }
  ]
}

• render方法

diff算法

关键词：patch

可参考详解vue的diff算法

工作中项目优化实践

前端优化主要基于两个目的：

1. 提升加载速度；
2. 用户操作起来流畅。
   因此，以下优化主要是围绕这两个目的展开。

1. css sprite（雪碧图），iconfont；
2. 资源懒加载、异步路由；
3. 前端缓存 LocalStorage 及混合应用 Storage；
4. 使用 CDN（JS、CSS等资源使用外部域名）；
5. Tree Shaking （Webpack 4.0+）；
6. 预请求；
7. 资源按需加载；
8. gzip （服务器）；
9. 减少 DOM 操作；
10. 防抖节流；
11. 尽量少用iframe；
12. 尽量规避 CSS 计算。

参考思路

雅虎军规

Best Practices for Speeding Up Your Web Site

defineProperty vs proxy

• Proxy可以直接监听对象而非属性；
• Proxy直接可以劫持整个对象,并返回一个新对象,不管是操作便利程度还是底层功能上都远强于Object.defineProperty；
• Proxy可以直接监听数组的变化；
• Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。

手写 call

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Function.prototype.call2 = function (context) {
    var context = context || window;
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }

    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result;
}

手写 apply

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;

    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }

    delete context.fn
    return result;
}

手写bind

1
2
3
4
5
6

Function.prototype.bind2 = function (asThis, ...args1) {
   let fn = this;  // 函数调用时，原this其实就是这个调用函数
    return function(...args2) {  // 同时，返回的新函数也可以接受参数
        return fn.call(asThis, ...args1, ...args2);
    }
}

preload和prefetch

preload特点

preload加载的资源是在浏览器渲染机制之前进行处理的，并且不会阻塞onload事件；
preload可以支持加载多种类型的资源，并且可以加载跨域资源；
preload加载的js脚本其加载和执行的过程是分离的。即preload会预加载相应的脚本代码，待到需要时自行调用；
prefetch

prefetch是一种利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制；通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度；

prefetch特点

prefetch加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少5分钟（无论资源是否可以缓存）；并且，当页面跳转时，未完成的prefetch请求不会被中断。

对比

Chrome有四种缓存：http cache、memory cache、Service Worker cache和Push
cache。在preload或prefetch的资源加载时，两者均存储在http
cache。当资源加载完成后，如果资源是可以被缓存的，那么其被存储在http
cache中等待后续使用；如果资源不可被缓存，那么其在被使用前均存储在memory cache；
preload和prefetch都没有同域名的限制；
preload主要用于预加载当前页面需要的资源；而prefetch主要用于加载将来页面可能需要的资源；
不论资源是否可以缓存，prefecth会存储在net-stack cache中至少5分钟；
preload需要使用as属性指定特定的资源类型以便浏览器为其分配一定的优先级，并能够正确加载资源；

如何比较两个 DOM 树的差异？

两个树的完全 diff 算法的时间复杂度为 O(n^3) ，但是在前端中，我们很少会跨层级的移动元素，所以我们只需要比较同一层级的元素进行比较，这样就可以将算法的时间复杂度降低为 O(n)。

算法首先会对新旧两棵树进行一个深度优先的遍历，这样每个节点都会有一个序号。在深度遍历的时候，每遍历到一个节点，我们就将这个节点和新的树中的节点进行比较，如果有差异，则将这个差异记录到一个对象中。

在对列表元素进行对比的时候，由于 TagName 是重复的，所以我们不能使用这个来对比。我们需要给每一个子节点加上一个 key，列表对比的时候使用 key 来进行比较，这样我们才能够复用老的 DOM 树上的节点。

示例:

1
2
3
4
5
6
7
8

输入: [1,null,2,3]
   1
    \
     2
    /
   3

输出: [1,3,2]

进阶: 递归算法很简单，你可以通过迭代算法完成吗？

个人解答

方法一：递归

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/**
 * Definition for a binary tree node.
 * function TreeNode(val) {
 *     this.val = val;
 *     this.left = this.right = null;
 * }
 */
/**
 * @param {TreeNode} root
 * @return {number[]}
 */
var inorderTraversal = function(root) {
  const res = []
  traversal(root, res)
  return res
};
function traversal (root, res) {
  if (root) {
    if (root.left) {
      traversal(root.left, res)
    }
    res.push(root.val)
    if (root.right) {
      traversal(root.right, res)
    }
  }
}

方法而：栈

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var inorderTraversal = function(root) {
  var res = []
  var stack = []
  
  while (root || stack.length) {
    if (root.left) { // 如果有左节点先遍历左节点
      stack.push(root)
      root = root.left
    } else if (!root.left && !root.right) { // 既没有左节点也没有右节点
      res.push(root.val)
      root = stack.pop() // 回溯
      root && (root.left = null)
    } else if (root.right) { // 如果有右节点
      res.push(root.val)
      root = root.right
    }
  }
  
  return res
}

解题思路

• 前序遍历：先输出根节点，在依次前序遍历左子树和右子树；

• 中序遍历：先中序遍历左子树，在输出根节点，最后中序遍历右子树；

• 后序遍历：先后序遍历左子树，接着后序遍历右子树，最后输出根节点。

输出

前序遍历：1，2，4，5，3，6，7；

中序遍历：4，2，5，1，3，7，6

后序遍历：4，5，2，7，6，3，1

这些数位是反向存放的，也就是个位排在链表首部。

编写函数对这两个整数求和，并用链表形式返回结果。

示例：

1
2
3

输入：(7 -> 1 -> 6) + (5 -> 9 -> 2)，即617 + 295
输出：2 -> 1 -> 9，即912
进阶：假设这些数位是正向存放的，请再做一遍。

示例：

1
2

输入：(6 -> 1 -> 7) + (2 -> 9 -> 5)，即617 + 295
输出：9 -> 1 -> 2，即912

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} l1
 * @param {ListNode} l2
 * @return {ListNode}
 */
var addTwoNumbers = function(l1, l2) {
  var count = 0 // 进数位
  var head = {} // 头节点
  var cur = head // 指针节点
  while (l1 || l2 || count) {
    count += (l1 && l1.val) + (l2 && l2.val)
    cur = cur.next = new ListNode(count % 10)
    l1 = l1 && l1.next
    l2 = l2 && l2.next
    count = Math.floor(count / 10)  /* 进1 */
  }

  return head.next
};

参考思路

双指针。

时间复杂度：o(n)
空间复杂度：o(n)

示例：

1
2
3

给定一个链表: 1->2->3->4->5, 和 k = 2.

返回链表 4->5.

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} head
 * @param {number} k
 * @return {ListNode}
 */
// 双指针
var getKthFromEnd = function(head, k) {
  if (k < 0 || !head) {
    return null
  }
  var pointer = head
  for (var i = 1; i < k; i++) {
    if (pointer.next) {
      pointer = pointer.next
    } else {
      return null
    }
  }
  while (pointer.next) {
    head = head.next
    pointer = pointer.next
  }
  return head
};

解题思路

双指针

1. 参考指针 pointer 先从头遍历到 k，然后剩下长度为 len - k；
2. head 指针再从投开始遍历 len - k 个节点，即可得到倒数第 k 个节点。

示例:

1
2

输入: 1->2->3->4->5->NULL
输出: 5->4->3->2->1->NULL

进阶:

你可以迭代或递归地反转链表。你能否用两种方法解决这道题？

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} head
 * @return {ListNode}
 */
// 双指针
var reverseList = function(head) {
  var prev = null
  var cur = head
  var tmp = null
  while (cur) {
    tmp = cur.next
    cur.next = prev
    prev = cur
    cur = tmp
  }

  return prev
};

参考思路

双指针

示例：

1
2

输入: numbers = [1,2]
输出: [2,1]

提示：

• numbers.length == 2

个人解答

1
2
3
4
5
6
7
8
9
10
11

/**
 * @param {number[]} numbers
 * @return {number[]}
 */
// 做减法
var swapNumbers = function(numbers) {
  numbers[1] = numbers[0] - numbers[1];
  numbers[0] = numbers[0] - numbers[1];
  numbers[1] = numbers[0] + numbers[1];
  return numbers
};

解题思路

使用减法思路。

以 a、b 为例：a = 1; b = 2

第一遍：b（临时） = a - b;
第二遍：a = a - b（临时）; // 得出 a = 原b;
第三遍：b = a（原b） + b（临时：原a - 原b）; // 得出 b = 原a;

• keep-alive vs http2
  • http pipelining
  • HTTP2
• HTTP3相关
  • HTTP/3 新特性
    • 1. HTTP/3简介
    • 2. QUIC新功能
  • 总结
• 小程序优化
• Webpack 优化
• 浏览器渲染页面的过程
• async/await 与 Generator 区别
• JSONP 封装
• 平民版深度拷贝
• instanceof 实现
• new 封装
• 手写 Promise （乞丐版）
• flex

在写这篇前端散记之前有写过另外一篇散记，可点击 前端散记 访问。所谓散记，东西都比较零散，更谈不上什么深入，但是至少可以让读者知道一些概念理论，如果深入可以自行去查询相关知识。

keep-alive vs http2

有很多文章都说 http2 相比 http1.1 增加了连接复用。这句话其实是不准确的。

在 HTTP 1.1 中 所有的连接默认都是持续连接，除非特殊声明不支持。 而在 http1.0 中，官方没有支持 keep-alive, 通常会手动在请求头中添加 Connection: Keep-Alive。

keep-alive 就是 TCP 连接复用的开端。改善的效果就是不再重新建立TCP连接，省去 三次握手 的时间。如下图：

优势有：

• 较少的CPU和内存的使用（由于同时打开的连接的减少了）；
• 允许请求和应答的HTTP管线化；
• 降低拥塞控制 （TCP连接减少了）；
• 减少了后续请求的延迟（无需再进行握手）；
• 报告错误无需关闭TCP连接。

http pipelining

有些文章中会有一个误区，就是TCP连接必须等一个请求响应完成后，才能复用。这是不对的，但其实可以注意上面优势里提到到 http pipelining，如下图：

HTTP1.1 中，一个TCP连接里是可以同时发送（实际有先后，但可以在响应前）多个请求的。但它是有序的，遵循先进先出，服务端只能按顺序响应请求（如果前面的请求没有响应完成或需要很长时间，后面的请求就会被阻塞），所以可能发生 队头阻塞（HOL blocking），造成延迟。

连续的 GET 和 HEAD 请求总可以管线化的。一个连续的幂等请求，如 GET，HEAD，PUT，DELETE，是否可以被管线化取决于一连串请求是否依赖于其他的。

所以keep-alive 的劣势也很明显：

• Keep-Alive可能会极大的影响服务器性能，因为它在文件被请求之后还保持了不必要的连接很长时间；
• 可能发生队头阻塞（HOL blocking），造成延迟。

HTTP2

HTTP2 主要解决的问题也是 TCP连接复用。但它比 keep-alive 更彻底，类似于通信工程里的时分复用，多个请求可以同时发送（不分先后），同时响应，解决了 队头阻塞（HOL blocking）的问题，极大提高效率。

keep-alive 的 HTTP pipelining 相当于单线程的，而 HTTP2 相当于并发。

HTTP2 的优点：

• 对HTTP头字段进行数据压缩(即HPACK算法)；
• HTTP/2 服务端推送(Server Push)；
• 请求管线化；
• 修复HTTP/1.0版本以来未修复的队头阻塞问题；
• 对数据传输采用多路复用，让多个请求合并在同一 TCP连接内。

后三个优点其实都是多路复用带来的优点。

HTTP3相关

HTTP/3 新特性

1. HTTP/3简介

虽然 HTTP/2 解决了很多之前旧版本的问题，但是它还是存在一个巨大的问题，主要是底层支撑的 TCP 协议造成的。

上文提到 HTTP/2 使用了多路复用，一般来说同一域名下只需要使用一个 TCP 连接。但当这个连接中出现了丢包的情况，那就会导致 HTTP/2 的表现情况反倒不如 HTTP/1 了。

因为在出现丢包的情况下，整个 TCP 都要开始等待重传，也就导致了后面的所有数据都被阻塞了。但是对于 HTTP/1.1 来说，可以开启多个 TCP 连接，出现这种情况反到只会影响其中一个连接，剩余的 TCP 连接还可以正常传输数据。

那么可能就会有人考虑到去修改 TCP 协议，其实这已经是一件不可能完成的任务了。因为 TCP 存在的时间实在太长，已经充斥在各种设备中，并且这个协议是由操作系统实现的，更新起来不大现实。

基于这个原因，Google 就更起炉灶搞了一个基于 UDP 协议的 QUIC 协议，并且使用在了 HTTP/3 上，HTTP/3 之前名为 HTTP-over-QUIC，从这个名字中我们也可以发现，HTTP/3 最大的改造就是使用了 QUIC。

QUIC 虽然基于 UDP，但是在原本的基础上新增了很多功能，接下来我们重点介绍几个QUIC新功能。

2. QUIC新功能

• 0-RTT

通过使用类似 TCP 快速打开的技术，缓存当前会话的上下文，在下次恢复会话的时候，只需要将之前的缓存传递给服务端验证通过就可以进行传输了。0RTT 建连可以说是 QUIC 相比 HTTP2 最大的性能优势。那什么是 0RTT 建连呢？

这里面有两层含义:

1. 传输层 0RTT 就能建立连接。
2. 加密层 0RTT 就能建立加密连接。

上图左边是 HTTPS 的一次完全握手的建连过程，需要 3 个 RTT。就算是会话复用也需要至少 2 个 RTT。

而 QUIC 呢？由于建立在 UDP 的基础上，同时又实现了 0RTT 的安全握手，所以在大部分情况下，只需要 0 个 RTT 就能实现数据发送，在实现前向加密的基础上，并且 0RTT 的成功率相比 TLS 的会话记录单要高很多。

• 多路复用

虽然 HTTP/2 支持了多路复用，但是 TCP 协议终究是没有这个功能的。QUIC 原生就实现了这个功能，并且传输的单个数据流可以保证有序交付且不会影响其他的数据流，这样的技术就解决了之前 TCP 存在的问题。

同HTTP2.0一样，同一条 QUIC连接上可以创建多个stream，来发送多个HTTP请求，但是，QUIC是基于UDP的，一个连接上的多个stream之间没有依赖。比如下图中stream2丢了一个UDP包，不会影响后面跟着 Stream3 和 Stream4，不存在 TCP 队头阻塞。虽然stream2的那个包需要重新传，但是stream3、stream4的包无需等待，就可以发给用户。

另外QUIC 在移动端的表现也会比 TCP 好。因为 TCP 是基于 IP 和端口去识别连接的，这种方式在多变的移动端网络环境下是很脆弱的。但是 QUIC 是通过 ID 的方式去识别一个连接，不管你网络环境如何变化，只要 ID 不变，就能迅速重连上。

• 加密认证的报文

TCP 协议头部没有经过任何加密和认证，所以在传输过程中很容易被中间网络设备篡改，注入和窃听。比如修改序列号、滑动窗口。这些行为有可能是出于性能优化，也有可能是主动攻击。

但是 QUIC 的 packet 可以说是武装到了牙齿。除了个别报文比如 PUBLIC_RESET 和 CHLO，所有报文头部都是经过认证的，报文 Body 都是经过加密的。

这样只要对 QUIC 报文任何修改，接收端都能够及时发现，有效地降低了安全风险。

如上图所示，红色部分是 Stream Frame 的报文头部，有认证。绿色部分是报文内容，全部经过加密。

• 向前纠错机制

QUIC协议有一个非常独特的特性，称为向前纠错 (Forward Error Correction，FEC)，每个数据包除了它本身的内容之外，还包括了部分其他数据包的数据，因此少量的丢包可以通过其他包的冗余数据直接组装而无需重传。向前纠错牺牲了每个数据包可以发送数据的上限，但是减少了因为丢包导致的数据重传，因为数据重传将会消耗更多的时间（包括确认数据包丢失、请求重传、等待新数据包等步骤的时间消耗）。

假如说这次我要发送三个包，那么协议会算出这三个包的异或值并单独发出一个校验包，也就是总共发出了四个包。当出现其中的非校验包丢包的情况时，可以通过另外三个包计算出丢失的数据包的内容。当然这种技术只能使用在丢失一个包的情况下，如果出现丢失多个包就不能使用纠错机制了，只能使用重传的方式了。

总结

HTTP/1.x 有连接无法复用、队头阻塞、协议开销大和安全因素等多个缺陷；
HTTP/2 通过多路复用、二进制流、Header 压缩等等技术，极大地提高了性能，但是还是存在着问题的；
QUIC 基于 UDP 实现，是 HTTP/3 中的底层支撑协议，该协议基于 UDP，又取了 TCP 中的精华，实现了即快又可靠的协议。

小程序优化

以本人所项接触的项目（IM相关）实战为例

1. 去除后端返回来的冗余字段；
2. 状态管理（以为项目使用的是 mpVue 小程序开发框架） ；
3. 图片资源优化（采用 CDN）；
4. 图片使用 CDN 之后发现网络请求多了还是给人感觉体验不好，所以又采取了部分较小的图片直接打包进了项目 JS，由于担心小程序项目大小过大，所以才去分包；
5. 群组人员 ID 缓存，并通过 ID 数组是否变化来加载人员信息。

Webpack 优化

1. externals + cdn；
2. cache-loader；
3. happy-pack、thread-loader；
4. webpack-bundle-analyzer
5. Tree Shaking
6. CommonChunkPlugin (Webpack 4.0移除，使用 SplitChunkPlugin 替代)；
7. DllPlugin 和 DllReferencePlugin：DLLPlugin 就是将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件（这里可以称为动态链接库）中。在之后的构建过程中不会再对这些模块进行编译，而是直接使用 DllReferencePlugin 来引用动态链接库的代码。

浏览器渲染页面的过程

从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上：

1. DNS 查询
2. TCP 连接
3. HTTP 请求即响应
4. 服务器响应
5. 客户端渲染

浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制），又可以分为下面五个步骤：

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。

async/await 与 Generator 区别

ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。

async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。

想较于 Generator，Async 函数的改进在于下面四点：

• 内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样；
• 更好的语义。async 和 await 相较于 * 和 yield 更加语义化；
• 更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）；
• 返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用。

JSONP 封装

以下是之前在做跨域项目所封装的 jsonp 库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function jsonp(options) {
  options = options || {}
  if (!options.url) {
    throw new Error('参数不合法')
  }

  // 创建 script 标签并加入到页面中, 如果没传callback默认生成一个
  let callbackName = options.callback || options.data['callback'] ||　('jsonp_' + Math.random()).replace('.', '')

  let oHead = document.getElementsByTagName('head')[0]
  options.data['callback'] = callbackName
  let params = formatParams(options.data)

  let oScript = document.createElement('script')
  oHead.appendChild(oScript);
  // 创建jsonp回调函数
  window[callbackName] = function (json) {
    oHead.removeChild(oScript)
    clearTimeout(oScript.timer)
    window[callbackName] = null
    if (json) {
      options.success && options.success(json)
    } else {
      options.fail && options.fail({ code: 'FS_UNKNOW', summary: '请求错误' })
    }
  }

  // 发送请求
  oScript.src = options.url + (options.url.indexOf('?') > -1 ? '&' : '?') + params

  // 超时处理
  if (options.time) {
    oScript.timer = setTimeout(function () {
      window[callbackName] = null
      oHead.removeChild(oScript)
      options.fail && options.fail({ code: 'S_FAIL', summary: '请求超时' })
    }, options.time)
  }
}

平民版深度拷贝

比乞丐版 JSON.parse(JSON.stringify(obj)) 好点的深度拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
 * 深拷贝
 * @param {*} target
 */
export const deepClone = target => {
  if (typeof target === 'object') {
    let newTarget = Array.isArray(target) ? [] : {}
    for (const i in target) {
      if (typeof target[i] === 'object') {
        newTarget[i] = deepClone(target[i])
      } else {
        newTarget[i] = target[i]
      }
    }
    return newTarget
  } else {
    return target
  }
}

instanceof 实现

1
2
3
4
5
6
7
8
9
10
11
12
13

function new_instance_of(leftVaule, rightVaule) { 
    let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
    leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
    while (true) {
      if (leftVaule === null) {
            return false;  
        }
        if (leftVaule === rightProto) {
            return true;  
        } 
        leftVaule = leftVaule.__proto__ 
    }
}

new 封装

1
2
3
4
5

function myNew(Con, ...args) {
  let obj = Object.create(Con.prototype)
  let result = Con.apply(obj, args)
  return typeof obj === 'object' ? result : obj
}

手写 Promise （乞丐版）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function MyPromise (executor) {
  this.value = undefined
  this.reason = undefined
  this.status = 'pending' // 状态 pending、resolved、rejected，默认为 pending
  this.resolvedCallbacks = []
  this.rejectedCallbacks = []

  function resolve (value) {
    if (this.pending === 'pending') {
      this.value = value
      this.status = 'resolved'
      this.resolvedCallbacks.forEach(fn => fn())
    }
  }
  function reject (reason) {
    if (this.pending === 'pending') {
      this.reason = reason
      this.status = 'rejected'
      this.rejectedCallbacks.forEach(fn => fn())
    }
  }

  executor(resolve, reject)
}
MyPromise.prototype.then = function (fn) {
  if (this.status === 'resolved') {
    fn(this.value)
  }
  if (this.status === 'pending') {
    this.resolvedCallbacks.push(function () {
      fn(this.value)
    })
  }
}
MyPromise.prototype.catch = function (fn) {
  if (this.status === 'rejected') {
    fn(this.reason)
  }
  if (this.status === 'pending') {
    this.rejectedCallbacks.push(function () {
      fn(this.reason)
    })
  }
}

flex

• flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

1
2
3

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

1
2
3

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

• flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

1
2
3

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

为了表示给定链表中的环，我们使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。 如果 pos 是 -1，则在该链表中没有环。

示例 1：

1
2
3

输入：head = [3,2,0,-4], pos = 1
输出：true
解释：链表中有一个环，其尾部连接到第二个节点。

示例 2：

1
2
3

输入：head = [1,2], pos = 0
输出：true
解释：链表中有一个环，其尾部连接到第一个节点。

示例 3：

1
2
3

输入：head = [1], pos = -1
输出：false
解释：链表中没有环。

进阶：

你能用 O(1)（即，常量）内存解决此问题吗？

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */

/**
 * @param {ListNode} head
 * @return {boolean}
 */
var hasCycle = function(head) {
  // 快慢指针
  let slow = head;
  let fast = head;

  while (slow && fast && fast.next) {
    slow = slow.next;
    fast = fast.next.next;
    if (slow === fast) return true; 
  }

  return false;
};

解题思路

通过使用具有 不同速度 的快、慢两个指针遍历链表，空间复杂度可以被降低至 O(1)。慢指针每次移动一步，而快指针每次移动两步。

如果列表中不存在环，最终快指针将会最先到达尾部，此时我们可以返回 false。

现在考虑一个环形链表，把慢指针和快指针想象成两个在环形赛道上跑步的运动员（分别称之为慢跑者与快跑者）。而快跑者最终一定会追上慢跑者。这是为什么呢？考虑下面这种情况（记作情况 A）- 假如快跑者只落后慢跑者一步，在下一次迭代中，它们就会分别跑了一步或两步并相遇。

• 时间复杂度：O(n)；
• 空间复杂度：O(1)。

示例：

1
2

输入：单向链表a->b->c->d->e->f中的节点c
结果：不返回任何数据，但该链表变为a->b->d->e->f

个人解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */
/**
 * @param {ListNode} node
 * @return {void} Do not return anything, modify node in-place instead.
 */
var deleteNode = function(node) {
  let current = node;
  node.val = current.next.val;
  node.next = current.next.next;
};

解题思路

删除当前节点只需要把当前节点指向下个节点值即可。

示例：

1
2
3
4
5
6
7
8

输入：n = 3
输出：[
       "((()))",
       "(()())",
       "(())()",
       "()(())",
       "()()()"
     ]

参考解答

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

/**
 * @param {number} n
 * @return {string[]}
 */
var generateParenthesis = function(n) {
  const res = []
  dfs('', n, n, res)
  return res
};
/**
 * 深度遍历（回溯）
 */
function dfs (curStr, left, right, res) {
  // 当左括号、右括号剩余数均为0时终止递归
  if (left === 0 && right === 0) {
    res.push(curStr)
    return
  }
  // 当左括号剩余数大于右括号剩余数
  // 即，已使用的左括号数少于已使用的右括号数
  // 终止递归
  if (left > right) {
    return
  }
  if (left > 0) {
    dfs(curStr + '(', left - 1, right, res)
  }
  if (right > 0) {
    dfs(curStr + ')', left, right - 1, res)
  }
}

解题思路

深度优先（回溯）：

1. 当前左右括号都有大于 0 个可以使用的时候，才产生分支；

2. 产生左分支的时候，只看当前是否还有左括号可以使用；

3. 产生右分支的时候，还受到左分支的限制，右边剩余可以使用的括号数量一定得在严格大于左边剩余的数量的时候，才可以产生分支；

4. 在左边和右边剩余的括号数都等于 0 的时候结算。