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

进阶涨薪秘笈

主线

  • 全面复盘

    • 目前的掌握情况（技术栈 React1、Vue2）【熟练使用、了解原理、深入原理】

    • 工程化

    • 架构设计

    • 项目业务点【SaaS、低代码平台（非标品）、数字孪生、GIS、编辑器、团队基建效率工程】

      • 你做过什么项目
      • 项目涉及哪些需求
      • 这个需求背后的价值
      • 你是怎么实现这些功能的

    • 年限

      • 1~3 年，看自己项目需求理解力和协作能力
      • 3~5 年，看自己独当一面的能力，协作沟通
      • 5+ 年，管理

  • 制定计划

  • 步步为营

  • 面试准备

    • 简历优化
    • 基础题记忆
    • 自我介绍的逐字稿
    • 整理项目重难点两个，书写描述文字背诵，准备方案设计与技术选型相关的表述

  • 面试复盘

  • 斩获 Offer

支线

  • 技术分享
  • 博客
  • 开源贡献“混 commit”
  • 找内推

简历优化与面试技巧

简历中两个核心点，两个难受点

  1. 两个核心点

    1. 技能描述
    2. 项目描述

  2. 两个难受点

    1. 工作经历
    2. 教育经历

技能描述

  • 熟练掌握 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 开发脚手架、打包构建优化工具及中间件服务
  • 掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
  • 团队管理经验，并在项目架构设计与性能优化方面具有丰富经验

  1. 丰富的可视化经验，主导可视化大屏低代码平台设计

  2. 3D 数字孪生平台你做了成果

    1. webGL、webassembly
    2. 正射影像、倾斜摄影
    3. Tile
    4. 模型，白膜（blender）、精模
    5. 材质
    6. 光效
    7. 粒子系统

  3. 全面性能优化

    1. 打包构建

      1. webpack，chunk、treeshaking、happypack、cache-loader 等等
      2. Webpack Module Federation

    2. 资源

      1. 图片、字体压缩
      2. 请求队列
      3. oss
      4. cdn

    3. 应用

      1. 数据结构优化
      2. 应用模块更新

    4. 缓存

      1. 强缓存（Expiration、Cache-Control）
      2. 协商缓存（Etag）
      3. 策略缓存（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 打通 】...
其实还不够，这些项目是求职香饽饽

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

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

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

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

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

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

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

工作经历

适度美化

教育经历

大专及以下弱化

本科正常放

大厂面试真题保姆级解析（典型）

Typescript 类型定义

给出：

type UU = {
    uu: {
        uuConfig: string
    }
}

type II = {
    ii: {
        iiConfig: string
    }
}

type UUII = UU | II

请实现：

// 使用合并后的配置类型
type CombinedConfig = CombineConfigs<UUII>;

以满足：

const r: CombinedConfig = {
    uuConfig: '',
    iiConfig: ''
}

type UU = {
    uu: {
        uuConfig: string
    }
}

type II = {
    ii: {
        iiConfig: string
    }
}

type UUII = UU | II

// keyof UU
// keyof II
// 依葫芦画瓢，要推谁，就 infer 谁
// 先提取 key
type ExtractConfigKeys<T> = T extends {
    [key: string]: infer U
} ? keyof U : never

// extends、infer

type CombineConfigs<T> = {
    [K in ExtractConfigKeys<T>]: T extends {
        [key: string]: {[P in K]: infer V }
    } ? V : never
}

// 使用合并后的配置类型
type CombinedConfig = CombineConfigs<UUII>;

const r: CombinedConfig = {
    uuConfig: '',
    iiConfig: ''
}

请说说 V8 引擎

V8 引擎架构

  1. V8引擎的组成

    • 主要组件概述（解释器Ignition、编译器TurboFan等）
    • 运行时环境

  2. 代码执行流程

    • 源代码到字节码
    • JIT编译的作用和流程

核心技术解析

  1. 内存管理

    • 垃圾回收机制
    • 垃圾回收器的类型和工作原理（标记-清除、标记-整理、增量标记等）

  2. 优化技术

    • 隐藏类和内联缓存
    • 优化编译器TurboFan的优化策略

V8引擎的高级特性

  1. 异步编程和事件循环

    • 事件循环的工作机制
    • Promise 和 async/await 的处理

  2. V8 引擎的性能监测与调优

    • 性能分析工具（如Chrome DevTools）
    • 性能调优实战案例分析

面试题考法

  1. 请说说 V8 引擎垃圾回收机制
  2. 事件循环机制
  3. 异步编程

请设计一个计算器

计算器可以实现加减乘除等运算，并且特别容易拓展运算规则，且能够轻松为计算输入与输出拓展加强规则

  1. 微内核设计 plugin
  2. AOP 面向切面编程设计思想 axios，axios.request.interceptors.use
  3. 编译原理 compiler，tokenizer、ast、interpretor

初中级前端做法

高级前端做法

前端专家做法

你离高薪还差多远？

拿高薪，就以下几个核心要素

  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 可视化开发实践

大佬 1V1 咨询

通过 1V1 咨询，给出专属学习计划，帮你在最短时间拿到涨薪结果。

-- - 咨询结果 pdf ---

不同阶段对前端的要求

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

1~3年

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

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

3~5年

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

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

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

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

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

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

5年以上

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

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

职业规划指导

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

【未知组件reminder】