2023年前端核心竞争技能大全_前端三年经验掌握什么技术-优快云博客

本文链接：https://blog.youkuaiyun.com/xiebaochun/article/details/134288932

JavaScript 内功修炼

1 对JavaScript的数据类型、原型链、作⽤域、闭包等内容进⾏深⼊理解
2 彻底弄懂 JavaScript 异步任务处理原理
3 熟悉ES6+的新特性、模块化等
4 掌握JavaScript的常⽤设计模式和代码优化技巧
5 理解 JavaScript 中内存管理、垃圾回收机制、相关算法
6 掌握 TypeScript 基本语法、⾼级特性、内置标准库等
7 掌握函数式编程范式，理解函数式思想，为深⼊源码学习做出铺垫
8 掌握 JavaScript 语⾔层⾯性能优化的 10 ⼤优化细节

this、闭包与作⽤域

this 指针详解
默认绑定、显式绑定、隐式绑定
存储空间、执⾏上下⽂

作⽤域详解
闭包的概念
闭包的使⽤场景

原型继承与⾯向对象编程思想

JavaScript 原型继承
JavaScript 原型与原型链
JavaScript 原型实现继承(原型继承、构造函数继承、组合继承)
JavaScript new 创建对象原理详解
事件机制
事件绑定
事件冒泡与事件捕获
事件委托原理与实现

事件处理常⻅问题与⽅案详解
事件回调机制

异步编程

回调地狱
细数异步场景与处理策略
从 callback 到 promise
详解 Promise A+ 规范

⼿写 Promise
从 Promise 到 tj/co
async 与 await ⽤法与原理详解

模块化详解

React 模块化思想初探
CommonJS 模块化规范及发展
Vue 模块化思想初探
模块打包⼯具⼯程化使⽤简介
AMD、CMD、systemJS 模块化规范介绍及使⽤

JS垃圾回收机制&运⾏机制
垃圾回收
内存管理

JS运⾏机制
宏任务&微任务
函数式编程

惰性求值及其应⽤场景
函数式编程的本质
函数式编程的好处（引⽤透明、⽆副作⽤）
⾼阶函数、柯⾥化、闭包

ES6 &ESNext 规范及编译⼯具简介

ECMAScript 规范发展简介
ES6 新增 API 解析
ESNext 规范中的 API 解析
babel 编译⼯具链的基础介绍
使⽤babel实现esnext⾄es5的转换

TS

Typescript VS JavaScript VS Flow 基础理论及原理
Scanner 扫描器、Parser 解析器、Binder 绑定器、Checker 检
查器、Emitter 发射器
Typescript范类、注解及反射
常⻅⾯试题及实战

Vue.js 源码与进阶

1 掌握 Vue 的⾼级特性，如动态组件、⾃定义指令、渐进式搭建、
SSR等
2 熟练掌握 Vue ⽣态中主要库的实现原理，包括：Vue Router 及
Vuex并⼿写简版源码
3 熟练掌握 Typescript + Vue3.0 架构设计⽅案
4 掌握 Vue CLI 实现原理
5 掌握SSR 概念、优势及实现原理
6 深⼊剖析 Vue2.0 及 Vue3.0 源码，⼿写简版源码

mixin 复⽤
Vue.js 动画特效 & 常⻅组件库介绍
插槽 & 插件 & 过滤器
单元素/组件动画
列表动画、状态动画、动画库

Vue3 新特性

composition API
⽣命周期
异步组件

⾃定义指令
teleport
⾃定义Hooks

Vue状态管理&Vue CLI

前端状态管理出现的意义及解决的问题
Vuex 及pinia介绍及深⼊使⽤
Vuex 实现原理及初始化过程
Vue CLI 使⽤及原理剖析
Vue CLI 插件及Preset
Vue CLI 配置实战

Vue前端路由&SSR

前端路由 router 原理及表现
Vue router 使⽤详解
Vue router 的实现原理
⼿动实现⼀个基于 hash 的路由
⼿动实现⼀个基于 History 的路由

完整的导航解析流程
Vue服务端渲染介绍
CSR 与 SSR
同构应⽤

Vue2核⼼模块源码
Flow
组件化的实现原理
编译实现
响应式对象的创建，依赖收集、派发更新的实现过程
event、v-model、slot、keep-alive、transition、
transition-group 等常⽤功能的原理实现
深⼊理解响应式设计
⼿写Vue3中diff算法属性⽐对及⼦元素⽐对流程
从性能⻆度对⽐vue2.0与vue3.0

项⽬评审与架构设计

项⽬需求分析评审（⼊料、编排、渲染、出码）
Vue 项⽬基础架构设计，基于 Vite、Pinia、Vue-Router
构建基础框架（导航、物料、配置）
编排的选型与实现（流式、画布式、Grid）

基础框架开发
配置⾯板开发
表单⽣成器 Form Builder 动态⽣成表单实现校验与提交
插件化机制实现物料灵活组装

物料与图表渲染器
可视化物料
定制化图表开发(基于d3/zrender）

图表渲染器引擎开发
本地持久化（indexedDB）

预览器开发、调优与应⽤发布
出码功能
性能调优

预览器开发
应⽤部署与发布（github action）

React.js 源码与进阶

1 能熟练运⽤ React 设计开发企业级项⽬
2 从作者第⼀视⻆详述 React16 到 React18 的设计演变
3 熟练掌握 React Hooks 原理，并能轻松⾃定义 Hook
4 深⼊理解 React 设计思想与源码实现
5 掌握 React 的状态管理库 Redux 设计思想与源码实现
6 理解 React 应⽤优化常⽤⼿段
7 掌握 React SSR

React.js 基础

react.js 简介
jsx 模版语法及 babel 编译配置
事件/条件渲染/列表渲染等基础⽤法
react.js 组件化及⽣命周期 refs 及 React API 详解
create-react-app cli 的使⽤
函数组件和 class 组件/受控组件和⾮受控组件
异步过程使⽤单例的 event 对象
性能优化⽅式
介绍 immutable 库 immutable-js 和 immer

React.js ⾼级⽤法

⾼阶组件⽤法及封装
react hook ⽤法详解
异步组件/suspense 等新版内容介绍
使⽤ immutable 数据优化我们的 react 应⽤

React 状态管理&create-react-app
redux 状态管理详解
state和context在状态管理中的应⽤
集中状态管理⽅案深度对⽐（Redux、Mobx、Jotai、Zustand）
⼿写⼀个redux
create- react- app 使⽤及原理
create- react- app 配置

React 路由&SSR
Vue Router 和 React Router实现的区别
React- router详解
⼿写⼀个 react- router
如何监听 url 的变化
如何匹配 path，按什么规则如何渲染对应的组件
SSR⽅案的价值
Next.js服务端渲染开发
深⼊理解React Hydrate

React 代码组织

React架构原理
React执⾏流程 render commit阶段实现
React Hooks实现
Concurrent Mode实现
React Diff实现

前端⼯程化实战

1 熟悉前端⼯程化相关⼯具的使⽤，如 Vite、Webpack、Babel 等
2 掌握 Webpack Loader 与 Plugin 原理，深⼊理解 tapable 在
插件化系统中的作⽤
3 掌握 Webpack 实现原理，从零到⼀实现⼀个简版 webpack
4 理解编译器原理，及在前端项⽬中的应⽤
5 掌握前端脚⼿架设计⽅案，实现团队提效
6 ⽅案到落地，从零设计⼀个脚⼿架⼯具
7 掌握前端⾃动化构建流程，包括代码检查、测试、打包、部署等
8 熟悉前端性能优化相关知识，包括代码压缩、懒加载、CDN等

前端AST

什么是AST
AST 简介、常⻅前端 AST 库解析
前端AST相关⽣态
基于JS实现简单的编译原理

前端⼯程化实战

前端⼯程化详解
前端⼯程化发展
前端项⽬打包构建
babel 在前端⼯程的应⽤

前端脚⼿架核⼼原理
脚⼿架开发实战

⾃动化构建
Vite 新⽣态构建⼯具初探
从零到⼀搭建⾃动化构建场景
构建缓存
npm scripts 详解
打包与部署
Webpack 模块详解
基于 Webpack 的前端构建增速与产物优化

⾃动化测试及部署
⾃动化测试概览
单元测试的价值与实现
前端单元测试框架对⽐与实践
E2E 测试的价值与实现

E2E 测试实践CI/CD
⼯作流与 devOps

模块化开发

模块编译
异步组件打包
babel 原理与⾃定义 plugin、preset
webpack 深⼊与原理详解
webpack 打包优化思路
⾃定义 webpack loader

⾃定义 webpack plugin
⾃定义 webpack plugin
eslint、tscheck、stylelint
概念与配置
gitflow 与 git hook 理解

新晋打包⽅案

Vite 介绍
Vite 1.x 到 2.x 对⽐
Vite 实战

Vite 源码解析ESBuild、
Rollup、SWC 对⽐

前端微服务化

前端微服务化概念详解
js 隔离、css 隔离
应⽤通信
single-spa 使⽤与原理详解

基座、路由及应⽤⽣命周期
qiankun 实现原理详解
qiankun 开发实战*web
component 与 lit ⼀瞥

性能调优

学习⽬标 Learning objectives
1 缓存在前端性能优化中的最佳实践
2 Vue项⽬性能调优分析思路与落地
3 React项⽬性能调优分析思路与落地
4 项⽬打包构建阶段对于性能优化的⼀些⼿段

Http缓存&本地缓存优化实战

node实战优化

强缓存、协商缓存的使⽤与原理剖析
策略缓存与PWA
cookie&indexDB
localStorage与cookieStorage
React状态本地缓存与undo redo操作实操

React性能优化

组件设计优化

Vue 性能优化实战

减少rerender是优化的第⼀步
组件按需加载

优化 props（activeId -> active）
使⽤指令进⾏优化（v-once、v-memo）
⽆渲染组件与⾼阶组件的使⽤

虚拟列表

前端框架⽣态库源码

Vue Router源码解析

Vue Router核⼼实现思路
Vue Router源码

Vue CLI源码

Vue CLI核⼼实现思路
Vue CLI源码

Redux源码

Redux核⼼实现思路
Redux源码

SSR源码

Next核⼼实现思路
Next源码

设计模式、数据结构与算法

1 掌握常⽤数据结构
2 掌握前端常⽤常考算法
3 数据结构与算法在项⽬中的实际应⽤
4 全⾯拆解⼤⼚经典前端⾯试算法题

设计模式

复杂应⽤设计思路与原则
js常⻅设计模式分类与应⽤
常⻅设计模式⾯试题
总结&提升

常⻅数据结构
基础数据结构
数组（Array）
映射（Map）
集合（Set）

栈（Stack）
队列（Queue）
链表（Linked-List）

堆（Heap）
树（Tree）
图（Graph）
前端⾯试⾼频算法
排序算法
动态规划

树遍历、图遍历、DFS、BFS
贪⼼算法
⽆重复字符的最⻓⼦串【双指针】
⼆叉树的最近公共祖先【⼆叉树】
有效的括号【栈】
反转链表【双指针】
最⼤⼦数组和【动态规划】
快速排序
合并两个有序链表【递归】
LRU缓存机制【哈希表+双向链表】
数组中的第K个最⼤元素【堆排序】

前端稳定性建设

1 学习前端稳定性监控的完整流程；
2 学习前端稳定性监控统计指标的思路及⽆埋点的实现；
3 学习前端稳定性监控指标的上传⽅式的实现；
4 掌握Node层作为数据清洗层，进⾏的常⻅的数据清洗规则及使⽤；
5 掌握如何使⽤Node进⾏持久化的数据存储，及稳定性指标的展⽰。

全栈开发之Node.js

1 掌握 Node.js 平台核⼼模快
2 掌握⽹络基础知识
3 熟悉Node.js web 服务开发及运维思路
4 熟悉 Koa 框架开发模式
5 了解 Koa 源码实现原理
6 掌握⾯向切⾯编程、依赖注⼊及控制反转思想
7 了解如何使⽤ Nestjs 开发 api 后台服务

Node.js 基础
Node.js 环境搭建
Node.js 核⼼模块使⽤

CommonJS 模块化及源码

Node.js 原理
Node.js 事件环机制
buffer、stream、events

进程详解
V8
Node.js ⽹络详解
TCP/IP 模型
http 服务实战

socket 服务实战

Express、Koa

Express 基础与原理详解
Koa 基础与原理详解

Koa 中间件原理详解
Koa 实战

NestJS

⾯向切⾯编程思想
依赖注⼊与控制反转

MVC 模式详解
邮件服务与定时任务实现

Node.js 实战

搭建 NestJS 服务
登录服务与鉴权
拦截器与数据注⼊

ORM 框架详解
构建与发布
pm2 部署

多端开发实战

1 掌握原⽣微信⼩程序开发
2 掌握 uni-app，并理解其实现原理
3 掌握 Taro 框架，并理解其实现原理
4 掌握 React Native，使⽤ RN 开发 iOS、Android 应⽤
5 熟悉 dart 语⾔，能使⽤ flutter 开发构建多端应⽤
6 了解 electron 架构设计，能基于 electron 实现桌⾯端应⽤