2022前端知识大纲

前端知识全景图

计算机专业知识

数据结构与算法

• 熟悉基本数据结构类型

  • 数组
  • 链表
  • 栈/队列
  • 堆
  • 树/二叉树
  • 哈希表
  • 图

• 掌握算法LeetCode 高频150道

算法高频分类讲解

网络

• Http

• TCP

• UDP/DNS/CDN/WebSocket

• 前端相关

  • 跨域
  • 浏览器缓存
  • Ajax/Axios/Fetch/Umi-Request

• 服务端相关

  • RPC
  • RESTFul

网络协议链接合集

设计模式

• 5大设计原则（SOLID）

  • 单一功能原则（Single Responsibility Principle）
  • 开放封闭原则（Opened Closed Principle）
  • 里式替换原则（Liskov Substitution Principle）
  • 接口隔离原则（Interface Segregation Principle）
  • 依赖反转原则（Dependency Inversion Principle）

• 23种设计模式

  • 创建型
  • 行为型
  • 结构型

设计模式链接合集

编程范式

• 面向过程（Process Oriented Programming，POP）
• 面向对象（Object Oriented Programming，OOP）
• 面向接口（Interface Oriented Programming， IOP）
• 面向切面（Aspect Oriented Programming，AOP）
• 函数式（Funtional Programming，FP）
• 响应式（Reactive Programming，RP）
• 函数响应式（Functional Reactive Programming，FRP）

编程范式综合讲解

操作系统

• CPU/内存/指令集

• 进程/线程/协程/纤程

• 编译原理

  • Babel

前端

基础知识

• HTML

• CSS

• DOM

• JavaScript

• TypeScript

• 浏览器知识

前端框架

• React

全面掌握React

• Vue

• 其他(Svelte、SolidJS、JQuery、Angular)

前端工程化

• 微前端

  • SingleSpa
  • Qiankun
  • MicroApp
  • Garfish
  • IceStack
  • 模块联邦

• 构建工具

  • Rollup
  • Gulp
  • Webpack
  • Vite
  • Snowpack

• 模块化

  • UMD
  • AMD
  • CMD
  • CommonJS
  • ESModule

• 编译原理

  • babel

• 包管理

  • Npm/Yarn/Pnpm
  • Monorepo/Lerna

• 脚手架

  • Vue-CLi
  • Create-react-app
  • 自定义脚手架

• 扩展

  • 前端安全
  • 前端监控
  • 自动化测试
  • 性能优化

跨端技术

• Hybrid

  • Web app
  • PWA
  • Cordova
  • Ionic

• 跨App

  • ReactNative
  • Flutter
  • Weex

• 跨小程序/App/H5

  • Taro
  • Uni-app

• 跨PC桌面

  • Electron
  • Tauri
  • WebView2

跨端技术综合汇总

服务端

• Node基础

• Node框架

  • Express
    • Nest
  • Koa
    • Egg
    • Midway
  • SSR
    • Next
    • Nuxt

• 数据库

  • MongoDB
  • Redis
  • Mysql

• ServerLess

全面掌握Node.js

DevOps

• Nginx

• Docker+K8s

• CI/CD

当下热门

• 低代码

• 云原生技术