“前端开发必备：掌握这些知识，让你的技能瞬间升级！“

现阶段存在的问题：

• 目前只掌握了基础的框架使用，尚未突破前端核心技术瓶颈，底层代码能力相对薄弱。
• 刚毕业，工作经验不足，可能在面对复杂项目时会遇到困难，甚至产生焦虑情绪。
• 技术栈不够全面：只熟悉某些技术栈，例如React或Vue，但在实际工作中，需要掌握更多的技术栈，
• 缺乏沟通能力：平时工作中需要与产品经理、UI设计、后端，测试等多个角色进行沟通，因为经验不足在沟通协作方面存在着不自信，不专业等问题
• 对工具和框架依赖过重：作为一名刚毕业的前端开发工程师，我可能过于依赖工具和框架，导致在遇到问题时可能无法独立解决。需要加强对原生JavaScript、HTML和CSS的理解和运用能力。
• 项目管理能力不足：在平时的工作中管理项目，包括任务排期、时间规划和进度控制等。在这方面能力欠缺

00. 基本功（数据结构，算法，计算机网络，硬件，安全等）

• 计算机组成原理（CPU、内存、硬盘、I/O设备等）
• 操作系统（进程、线程、内存管理、文件系统、设备驱动、调度算法等）
• 计算机网络（OSI七层模型、TCP/IP协议、HTTP协议、DNS、路由器、交换机等）
• 编译原理（词法分析、语法分析、语义分析、中间代码生成、目标代码生成、优化等）
• 数据库原理（关系型数据库、非关系型数据库、SQL语言、事务处理、索引、查询优化等）MySQL、MongoDB等
• 数据库知识 https://tsejx.github.io/database-guidebook/mysql/advanced/transition
• 软件工程（需求分析、设计、编码、测试、维护等）
• 计算机安全（加密算法、数字签名、身份认证、网络安全等）
• 具体知识参考 https://xiaolincoding.com/os/，里面有详细的介绍
• 图解 mysql https://xiaolincoding.com/mysql/
• 图解 redis https://xiaolincoding.com/redis/
• Linux 知识，参考我写的一篇博客汇总 https://juejin.cn/post/7053718932917583909
• Linux知识汇总 https://tsejx.github.io/devops-guidebook/linux
• 代码管理 参考： https://tsejx.github.io/devops-guidebook/code/git
• 我写的一篇git 相关的博客 https://juejin.cn/post/7270916734139809792
• 算法 leetcode https://xiaochen1024.com/courseware/60b4f11ab1aa91002eb53b18/61964164c1553b002e57bf18
• 随想录 https://programmercarl.com/

01. 前端基础 HTML，CSS

• HTML5: 语义化标签、多媒体标签、表单新特性、Web存储
• CSS3: 动画、过渡、阴影、圆角、背景渐变、Flexbox布局、Grid布局
• 响应式设计: 媒体查询、移动优先原则、视口设置
• CSS预处理器: Sass、Less、Stylus
• CSS架构: BEM、SMACSS、OOCSS
• CSS GuideBook https://tsejx.github.io/css-guidebook/concept
• HTML https://www.runoob.com/html/html-tutorial.html
• CSS https://www.runoob.com/css/css-tutorial.html

02. JavaScript 内功

• js 词典 https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

• 现代js 教程 https://zh.javascript.info/

• 阮一峰 ES6 经典之作 https://es6.ruanyifeng.com/#docs/proxy

• 对JavaScript的数据类型、原型链、作用域、闭包等内容进行深入理解

• 彻底弄懂 JavaScript 异步任务处理原理

• 熟悉ES6+的新特性、模块化等

• 掌握JavaScript的常用设计模式和代码优化技巧

• 理解 JavaScript 中内存管理、垃圾回收机制、相关算法

• 掌握 TypeScript 基本语法、高级特性、内置标准库等

• 掌握函数式编程范式，理解函数式思想，为深入源码学习做出铺垫

• 掌握 JavaScript 语言层面性能优化的 10 大优化细节

• this、闭包与作用域

• • this 指针
• • 作用域
• • 默认绑定、显式绑定、隐式绑定
• • 闭包的概念
• • 存储空间、执行上下文

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

• JavaScript 原型与原型链，原型继承，new 创建对象原理

事件机制

• 事件绑定

• • 事件冒泡与事件捕获
• • 事件处理常见问题与方案详解
• • 事件回调机制
• • 事件委托原理与实现
• • 异步编程

• 模块化

• JS垃圾回收机制&运行机制

• • 垃圾回收
• • JS运行机制
• • 内存管理
• • 宏任务&微任务

• 函数式编程

• • 函数式编程的本质
• • 惰性求值及其应用场景
• • 函数式编程的好处 (引用透明、无副作用)
• • 高阶函数、柯里化、闭包

• ES6 &ESNext 规范及编译工具

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

• TypeScript

• • Typescript VS JavaScript VS Flow

• 基础理论及原理

• • Scanner 扫描器、Parser 解析器、Binder 绑定器、Checker 检查器、Emitter 发射器

• Typescript范类、注解及反射

• typescript guidebook https://tsejx.github.io/typescript-guidebook/syntax/basics/basic-types

03. 前端框架和库

0301.React

(1) React.js 基础

• jsx 模版语法及 babel 编译配置。
• 事件/条件渲染/列表渲染等基础用法
• react 组件化及生命周期
• refs 及 React API
• create-react-app cli 的使用
• 函数组件和 class 组件/受控组件和非受控组件
• 高阶组件用法
• react hook
• ahooks https://ahooks.js.org/zh-CN/hooks/use-set-state/
• 异步组件/suspense
• 异步过程使用单例的 event 对象
• 性能优化方式
• immutable 库 immutable-js 和 immer
• 使用 immutable 数据优化 react 应用
• redux 状态管理，rematch，dva.js，react-redux，redux-thunk
• redux-Saga https://redux-saga-in-chinese.js.org/docs/introduction/BeginnerTutorial.html
• dva.js https://dvajs.com/guide/
• state和context在状态管理中的应用
• 集中状态管理方案深度对比 (Redux、Mobx、Jotai、Zustand)

(2) React.is 源码与进阶

• 能熟练运用 React 设计开发企业级项目
• React16 到 React18 的设计演变熟练掌握 React Hooks 原理，并能轻松自定义 Hook
• 深入理解 React 设计思想与源码实现
• 掌握 React 的状态管理库 Redux 设计思想与源码实现
• 理解 React 应用优化常用手段
• 掌握 React SSR
• 手写一个redux
• create-react-app 使用及原理剖析
• 知识宝典 https://xiaoxiaosaohuo.github.io/react-books/chapter1/project.html

(3) React 路由&SSR

• Vue Router 和 React Router实现的区别
• React-router详解
• 手写一个 react-router
• 如何监听 url 的变化
• 如何渲染对应的组件如何匹配 path，按什么规则
• SSR方案的价值
• 深入理解React Hydrate
• Next.is服务端渲染开发指南

(4) React 核心源码解析

• React 代码组织
  React架构原理
  React执行流程 render commit阶段实现
• React Hooks实现
  Concurrent Mode实现
  React Diff实现
• 源码解析知识文章 https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718

0302. Vue

• Vue GuideBook https://tsejx.github.io/vue-guidebook/overview/basic/syntax
• Vue3 架构 https://tsejx.github.io/vue-guidebook/infrastructure/vue3/overview

0303. 其他常用库

• 其他库: Lodash、jQuery、axios、Moment.js、Immutable.js，canvas，tea，常用的组件库等
• 前端图形学 https://tsejx.github.io/visualization-guidebook/canvas/basic/scale
• react form hooks https://react-hook-form.com/docs/useform/form

04. 前端工程化

0401. 目标

• 模块化和组件化开发: CommonJS、AMD、UMD、ES Modules，
• 熟悉前端工程化相关工具的使用，如 Vite、Webpack、Babel、Rollup、Parcel、Gulp、Grunt 等，参考 https://tsejx.github.io/webpack-guidebook/basic/modularization
• 代码检查和格式化: ESLint、Prettier
• 掌握 Webpack Loader 与 Plugin 原理，深入理解 tapable 在插件化系统中的作用
• 掌握 Webpack 实现原理，从零到一实现一个简版 webpack
• 理解编译器原理，及在前端项目中的应用
• 掌握前端脚手架设计方案，实现团队提效
• 方案到落地，从零设计一个脚手架工具
• 掌握前端自动化构建流程，包括代码检查、测试、打包、部署等
• 熟悉前端性能优化相关知识，包括代码压缩、懒加载、CDN等
• 学习一些DevOps技术，例如Docker、Kubernetes等，这些技术可以让你更好地管理和部署Web应用程序。
• CI/CD: Jenkins、Travis CI、CircleCI、GitHub Actions、docker 等 https://tsejx.github.io/devops-guidebook/deploy/docker/overview

0402. 前端AST

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

0403. 前端工程化详解

• 前端工程化发展
• 前端项目打包构建
• 前端脚手架核心原理
• 脚手架开发实战
• babel 在前端工程的应用

0404. 自动化构建

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

0405. 自动化测试及部署

• 自动化测试概览
• 单元测试的价值与实现
• 前端单元测试框架对比与实践
• E2E 测试实践CI/CD
• 工作流与 devOps 大厂
• 应用实战
• E2E 测试的价值与实现

0406. 新晋打包方案

• Vite 基本使用
• Vite 1.x 到 2.x 对比
• Vite 源码解析ESBuild.
• Rollup、SWC 对比
• Vite 实战

0407. 前端微服务化

• 前端微服务化概念详解基座、路由及应用生命周期
• js 隔离、CSS 隔离
• 应用通信
• qiankun 实现原理详解
• qiankun 开发实战*web
• component 与 lit 一瞥single-spa 使用与原理详解

05. 网络和性能优化

• HTTP协议: 请求方法、状态码、请求头、响应头、HTTP/2、HTTP/3
• 浏览器缓存: 强缓存、协商缓存、Service Worker
• 性能优化: 代码压缩、懒加载、图片优化、CDN、预加载、预渲染
• Web安全: XSS、CSRF、CSP、同源策略、跨域资源共享（CORS）
• 网关，代理等

06. 前端测试

• 自动化测试
• 测试类型: 单元测试、集成测试、端到端测试
• 测试框架: Jest、Mocha、Chai、Sinon、Jasmine、Cypress、Puppeteer

07. 服务端知识

• 后端概念: RESTful API、数据库、认证与授权
• 服务端语言: Node.js、Express、Koa、Python、egg.js，midway
• 服务端渲染: React SSR、Vue SSR、Next.js、Nuxt.js、Gatsby
• redis mysql java 等
• nginx https://tsejx.github.io/devops-guidebook/server/nginx
• node guidebook https://tsejx.github.io/node-guidebook/overview/basic
• midway https://www.midwayjs.org/docs/intro
• 分布式 https://icyfenix.cn/
• node.js https://www.runoob.com/nodejs/nodejs-tutorial.html

08. 软技能

• 沟通能力: 明确表达观点、倾听他人、提问技巧
• 团队协作: 分工合作、代码评审、知识分享
• 问题解决: 创新思维、逻辑分析、调试技巧
• 项目管理: 敏捷开发、Scrum、看板、需求分析、风险评估

09. 前端框架生态库源码解析

10. 多端开发

• 掌握原生微信小程序开发
• 掌握 uni-app，并理解其实现原理
• 掌握 Taro 框架，并理解其实现原理
• 掌握 React Native，使用 RN 开发 iOS、Android 应用
• 熟悉 dart 语言，能使用 flutter 开发构建多端应用
• 了解 electron 架构设计，能基于 electron 实现桌面端应用

11.有需要再学习

学习一些新的前端技术，例如WebAssembly、WebGL等，这些技术可以更好地优化Web应用程序的性能。

总结：

1. 第一优先级，浏览器相关知识， BOM， DOM，相关API， javascript的原生api（很多， 相对重要）

2. 第二优先级网络知识（私有协议入（CGW）， 服务发现），后端相关知识与容器化技术，这个因为工作中有用到

3. 第三优先级，基本功部分，数据结构， 算法，硬件知识