⚠️温馨提示： 文档中包含【1个】暂不支持的区域，请通过搜索关键字【暂不支持的文档区域】进行后续处理

algorithm-notes.zip

常考算法题汇总

排序与查找

• 经典排序算法：快速排序、归并排序、堆排序
• 二分查找及其变种

数据结构

• 线性数据结构：数组、链表、栈、队列
• 树结构：二叉树、二叉搜索树、AVL 树
• 图结构：邻接表、邻接矩阵

动态规划

• 基本概念及适用场景
• 经典问题：最长公共子序列、背包问题

贪心算法

• 基本原理及应用场景
• 经典问题：活动选择、哈夫曼编码

回溯算法

• 基本原理及应用场景
• 经典问题：八皇后、迷宫问题

分治算法

• 基本原理及应用场景
• 经典问题：归并排序、快速排序

图论算法

• 基本原理及应用场景
• 经典问题：最短路径、最小生成树

数学算法

• 常见问题：素数判断、最大公约数、最小公倍数

动态规划（DP）算法全解析

动态规划问题，算法常考，尤其是大厂面试算法题，以字节为例，动态规划问题出现的比例相当之高。

• 核心思想：避免重复计算，通过 保存子问题 的结果来减少计算量。

常见动态规划问题

• 斐波那契数列
• 最长公共子序列
• 最长递增子序列
• 背包问题
• 硬币找零问题
• 接雨水

动态规划解题步骤与技巧

1. 定义状态：找到问题的子结构，定义状态数组。
2. 状态转移方程：根据问题建立状态转移方程。
3. 初始化：根据问题初始化状态数组。
4. 填表计算：按照状态转移方程填充状态表。
5. 提取结果：根据状态表提取最终结果。

DP 实战

我们以 斐波那契数列 问题求解为例，力求给课堂的每一位同学讲明白，DP 的核心思路。动态规划，这个看似高大上的问题，其实没有大家想象的那么难。

题目

斐波那契数 （通常用 F(n) 表示）形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始，后面的每一项数字都是前面两项数字的和。也就是：

给定 n ，请计算 F(n) 。

示例 1

示例 2

示例 3

提示：

• 0 <= n <= 30

递归实现

// 递归实现
function fib(n) {
  console.log("🚀 ~ fib ~ n:", n);
  // n === 0, 0
  // n === 1, 1
  // n === 2, 0 + 1 = 1
  // n === 3, 1 + 1 = 2
  // n === 4, 1 + 2 = 3  // 递归最重要的就是找到结束条件
  if (n === 0) return 0;
  if (n === 1) return 1;

  // 递归调用
  // n === 2
  // fib(1) + fib(0) = 1
  // n === 3
  // fib(2) + fib(1) = 2
  return fib(n - 1) + fib(n - 2);
}

// console.log(fib(4)); // 3
// console.log(fib(5)); // 5
// console.log(fib(6)); // 8
// console.log(fib(7)); // 13
// console.log(fib(8)); // 21console.log(fib(40));

DP 1.0

// 缓存，空间换取时间
// 数组来存// 递归实现
function fib(n) {
  console.log("🚀 ~ fib ~ n:", n);
  // n === 0, 0
  // n === 1, 1
  // n === 2, 0 + 1 = 1
  // n === 3, 1 + 1 = 2
  // n === 4, 1 + 2 = 3

  if (n === 0) return 0;
  if (n === 1) return 1;
  const arr = [0, 1];

  // arr[2] = arr[1] + arr[0];
  // arr[3] = arr[2] + arr[1];
  // arr[4] = arr[3] + arr[2];
  // arr[5] = arr[4] + arr[3];  // 循环
  for (let i = 2; i <= n; i++) {
    arr[i] = arr[i - 1] + arr[i - 2];
  }

  return arr[n];
}

console.time('fib')
console.log(fib(4000000));
console.timeEnd('fib')

DP 2.0

function fib(n) {
  if (n === 0) return 0;
  if (n === 1) return 1;

  // 我们是不是可以考虑用三个变量来存储
  let rn_2 = 0,
    rn_1 = 1,
    rn;

  for (let i = 2; i <= n; i++) {
    rn = rn_1 + rn_2; // 已经将结果给好了
    rn_2 = rn_1;
    rn_1 = rn;
  }

  return rn;
}

console.time('fib')
console.log(fib(4000000));
console.timeEnd('fib')

你从来没接触过的 WebAssembly 技术

这项技术，学完之后直接放到简历里，你就是懂 V8 的小盆友啦~

除了这个技术，关于浏览器的知识还有很多，读过 Chromium 的同学都知道，图形借助了 Skia

https://chromium.googlesource.com/chromium/src.git/+/refs/tags/127.0.6506.2/skia/

chromium.googlesource.com

相关原理还有很多，我们在 Vip 课程内容有详细探讨。

WebAssembly

WebAssembly（wasm）是一种紧凑的二进制指令格式，用于在现代 Web 浏览器中高效执行。它设计为可移植的、紧凑的和高效的，可作为 JavaScript 的补充运行在浏览器中。

这要归功于 V8，V8 提供了 wasm 支持

https://chromium.googlesource.com/v8/v8/+/refs/tags/12.7.146/src/builtins/wasm.tq

chromium.googlesource.com

优势

• 高性能 ：接近原生代码的执行速度。
• 安全性 ：在沙箱环境中执行，确保代码的安全性。
• 跨平台 ：在所有现代浏览器中兼容运行。
• 语言无关 ：支持多种编程语言编译为 WebAssembly。

应用场景

• 高性能计算
• 游戏开发
• 多媒体处理
• 复杂计算和数据处理

AssemblyScript

前端人学习 WebAssembly，最快的途径就是 AssemblyScript ，它是一种基于 TypeScript 的语言，可编译为 WebAssembly。它允许开发者使用熟悉的 TypeScript 语法编写 WebAssembly 模块。

优势

• 易于学习 ：基于 TypeScript，开发者可以快速上手。
• 高性能 ：生成高效的 WebAssembly 代码。
• 良好的工具支持 ：与 TypeScript 工具链兼容。

---

环境搭建与工具链

首先需要安装 AssemblyScript 和 Node.js。使用 npm 安装 AssemblyScript：

npm install -g assemblyscript

创建项目目录并初始化项目：

mkdir my-assemblyscript-project
cd my-assemblyscript-project
npm init -y

安装 AssemblyScript 依赖：

npm install --save-dev assemblyscript

初始化 AssemblyScript 项目结构：

npx asinit .

基础语法

AssemblyScript 支持多种基本数据类型，包括：

• 数字类型：i32、i64、f32、f64
• 布尔类型：bool
• 字符串类型：string

支持常见的控制结构，如 if、else、for、while 等。

函数和模块的定义与 TypeScript 类似。

编写与编译

在 assembly/index.ts 中编写代码：

export function sum(a: i32, b: i32): i32 {
  return a + b;
}

运行编译命令生成 WebAssembly 文件：

npm run asbuild

---

JavaScript 中使用 wasm

加载 WebAssembly 模块

fetch('build/optimized.wasm').then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes)
).then(results => {
  const instance = results.instance;
  console.log(instance.exports.hello());
});

调用 WebAssembly 函数

fetch('build/optimized.wasm').then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes)
).then(results => {
  const instance = results.instance;
  console.log(instance.exports.sum(5, 3)); // 输出 8
});

递归的斐波那契数列，真的无解吗？

我们把上面讲到的斐波那契数列数列实现的代码，分别编译为 wasm 后，看看整体运行性能表现。

export function fibonacci(n: i32): i32 {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

执行后，大家会发现，WebAssembly 还是 WebAssembly，相同实现，数据量大的情况下它比原生 JavaScript 快了 1 倍哦。

简历优化（30K+ 简历样板）

技能描述

• 熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想

• 掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG

• 熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理

• 掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建

• 丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎

• 丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理

• 基于 Node.js 开发脚手架、打包构建优化工具及中间件服务

• 掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验

• 团队管理经验，并在项目架构设计与性能优化方面具有丰富经验

• 算法与编程技术

  • 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
  • 重点掌握动态规划的基本概念、解题步骤和经典题目。

• 3D 数字孪生平台开发经验

  • 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
  • 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
  • 熟悉材质、光效和粒子系统的实现与优化。

• 全面性能优化能力

  • 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
  • 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
  • 具有应用性能优化经验，包括数据结构优化和应用模块更新。
  • 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目描述

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

• 遇到了什么问题 question，需求
• 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
• 具体方案落地
• 结果反思，细节优化思考

大家先看这段描述：

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

深度优化一下

工作内容和成果

• 【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
• 【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
• 【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
• 【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
• 【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
• 【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
• 【 优化 】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
• 【 自研 OA 打通 】...

STAR

【技术栈】

• Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
• 数据库 ：MySQL
• 管理工具 ：SVN

【产品前端研发负责人】

• 情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
• 任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
• 行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
• 结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

• 情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
• 任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
• 行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
• 结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

• 情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
• 任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
• 行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
• 结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

• 情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
• 任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
• 行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
• 结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

• 情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
• 任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
• 行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
• 结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

其实还不够，这些项目才是求职香饽饽

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

• 大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)

• 大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)

• 企业级脚手架工具开发实践

• 企业级文档编辑器飞书文档开发实践

• 前端性能、异常与行为监控

• 3D 可视化数字孪生低代码实战 💥

  • 基于 cesium（arcGis、超图） 方案的 WebGIS 开发实践
  • 基于 openlayer、mapbox 开发
  • 基于 WebGL 3D 可视化开发实践

30K+ 薪资长线规划

核心要素

1. 全面的技术储备

   1. Vue 经验、React 经验，Vue3 + Typescript，React18（Hooks、Concurrent）【框架基础】
   2. 框架原理，React 生态库原理（React-Router、Redux）、Vue 生态库原理
   3. 工程化（构建工具：Webpack、Vite、Rspack、ESBuild、swc）
   4. CI/CD 自动化，自动化构建、自动化部署
   5. 基建能力（Node、命令行工具开发 Cli），UI 库、图表库、工具库
   6. 业务方面（管理系统、图表类），衍生 -> 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

2. 至少参加过两个以上大型项目，并主导过一个复杂项目

   1. 管理系统，（项目搭建、方案、技术栈、CI/CD 等等）
   2. 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

3. 面试表现好

   1. 个人介绍【 打个草稿 】，基本信息、技术栈、项目重难点

   2. STAR：

      • 遇到了什么问题 question，需求
      • 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
      • 方案落地
      • 反思，优化
   • 面试过程中，重点去复习只是重难点（v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型）
   • 技术储备，由你的项目经验体验，技术怎样在你的项目中落地的

4. 学历还行

   1. 大专，尽快考一个本科证（年限去掉）
   2. 民办
   3. 内推，学历问题、工作经历的问题

短板

• 项目简单，管理后台一做就是大半年，天天 CRUD

  • 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
  • 找一些不错的项目练手
  • 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
  • 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）

• 技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）

• 架构、方案设计没碰过

  • React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
  • Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite

• 没有专精的技能或业务

  • 自驱 （假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
  • 与生俱来有些东西，好奇心、自驱力、清晰规划
  • 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院，全方位服务，助你升职加薪

我们主要从以下方面为你的升职加薪提供帮助

⚠️ 暂不支持的文档区域，【文档小组件】

• 跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
• 协同编辑器（文档类、画板类）wangEditor、CKEditor
• 团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
• 3D 可视化数字孪生 bigdata
• 低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

• 企业级脚手架工具开发实践

• 企业级文档编辑器飞书文档开发实践

• 大厂 UI 组件库（Vue3）整体设计与开发实践

• 大厂业务 Hooks 库（React 18）整体设计与开发实践

• 埋点与数据监控平台实战

• 3D 可视化数字孪生实战 💥

  • 基于 cesium 方案的 WebGIS 开发实践
  • 基于 WebGL 3D 可视化开发实践

不同阶段对前端人的硬性要求

以下是对您提供的内容进行权威和专业化改写的建议：

1~3年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

• 关键在于通过学术教育或网络资源加强基础知识；
• 在简历中以多种方式展示对前端的热情，展现个人潜力；
• 积极探索前沿技术，关注国内外技术动态；
• 尝试开发小型项目或参与社区开源项目；
• 建立技术博客，以输出促进知识吸收。

3~5年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

• 关注社区中关于进阶的资料和路线，强化基础知识；

• 深入掌握常用框架的高级用法，探索其原理；

• 在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；

• 思考提高团队效率的方法，例如：

  • 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
  • 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
  • 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
  • 尝试搭建CI/CD平台，维护公司内部的通用npm包；
  • 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

• 负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
• 拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
• 协助或主导业务目标制定，合理推动项目达成预期效果；
• 是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
• 打造技术氛围，促进团队共同成长。

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】