本篇梳理一下高级前端的知识体系图谱，可以参考学习：

（对应的初 / 中级前端知识体系图谱可以参考这篇：初 / 中级前端知识体系）

知识体系图谱

高级前端知识体系.jpg

一、前端自动化工作流
  • 模块化打包工具详解：Webpack4、Rollup、Parcel
  • 前端工作流实战：基于GitHub、GitLab的开发工作流
  • 前端工程构建工具详解：npm scripts、Makefile、 Gulp、Grunt、Broccoli、FIS
  • 优质代码规范化工具详解：Prettier代码格式化工具、ESLint代码检测工具、Stylelint样式代码规范工具、 Markdownlint格式检查扩展工具
二、JavaScript高阶深入
  • 函数式编程思想
  • Flow静态类型工具、Typescript编译扩展工具
  • 原理掌握：call、apply、bind、new、防抖和节流、深拷贝和浅拷贝等手写实现，原型链和闭包深入，执行上下文和作用域链
  • ES6、ES7、ES8新特性、Babel编译器、CoreJS模块化、标准库
  • Symbol元编程、Set和Map应用以及WeakMap、Object.defineProperty以及下一代Proxy&Reflect、ESModule实现、浏览器和Node.js中的EventLoop
  • 高阶函数、发布订阅和观察者模式、Promise核心应用、generator和实现co库、async+await原理、实现完整的PromiseA+类库，包含reace、all、finally、try等方法
  • 词法分析和语法分析AST
  • V8内存管理、垃圾收集、引用记数、标记清除、标记整理和增量标记
三、框架原理剖析及进阶
  • Vue.js源码分析与进阶
  • Angular原理与进阶
  • React.js原理与进阶
  • MVVM模式思想及框架实现
  • CSS-in-JS、Redux、React Hooks
  • Gatsby 静态化 Web 开发（React、GraphQL)
  • 数据流解决方案：Redux、Mobx、Vuex、RxJS
  • 服务端這染 SSR 专题：Next.js、Nuxt.js、Universal
  • Vue.js 3.0 function API 使用、TypeScript 开发 Vue.js
四、移动与桌面应用开发
  • React Native移动应用开发
  • Flutter移动跨平台开发框架
  • Electron跨平台桌面应用程序开发
  • 小程序开发实战：微信、支付宝、百度、头条
  • 混合式 App 开发框架：Cordova、Ionic、Phonegap
  • 移动端多端统一开发解决方案：Taro、uni-app、 Chameleon
  • H5配合原生开发 App： Webview、Jsbridge、 NativeScript
五、node.js核心技术
  • Node.js微服务开发
  • 基于Node.js的前后端分离方案
  • GraphQL / RESTful 标准接口开发
  • 网络爬虫幵发：Cheerio、Nightmare、Puppeteer
  • Node.js高级特性解读：单线程、EventLoop、Cluster
  • NoSQL数据库详解及应用：Redis、MongoDB、 Memcached
  • Web应用开发框架从入门到实战：Adonis.js、Egg.js、Koa
六、架构与运维
  • 现代化Web应用架构101
  • 单元測试、集成测试、Mock
  • 容器化运维操作： Docker Compose
  • 项目质量监测：Lint、e2e test、 codecov
  • Serverless无服务器架构： ZEIT Now、 Netlify
  • 持续集成与持续部署： Jenkins、 TravisCI、 CircleCI
  • 前端应用性能测试及优化工具： Jsperf、 Yslow、Pagespeed
  • 测试框架： Mocha、Ava、Jest、 Karma、 Protractor、Cypress
七、其他广度知识
  • 设计模式(创建型设计模式、结构型设计模式、行为型设计模式)
  • 计算机基础(网络/组成原理)
  • 数据结构与算法
  • 性能优化
  • 网络安全

深入研究一个前端框架vue、react的底层原理(前提是这两者的使用必须熟练掌握)，要熟悉核心原理的实现 底层机制，学会自己封装库和框架，接下来分开剖析每个知识面的详细内容：

对vue的掌握

基础&原理
  • Vue基础 什么是Vue?、Vue的使用、Vue常见的指令、Vue的事件绑定和属性绑定、Vue中的计算属性、computed和watch的应用、表单中的数据绑定、手写Vue中的响应式原理、MVVM手写实现
  • Vue应用 Vue中的修饰符、自定义过滤器和指令、Vue实例上的方法、Vue中的生命周期、Axios应用async和await、vue-cli3.0实战、render方法详解和使用jsx语法
  • 封装自己的ElementUI组件 什么是组件和组件的应用、组件的属性和校验、组件之间的通信、EventBus应用、组件slot用法、封闭自己的树型组件、日历组件、异步加载的省市级联组件、基于element-ui/iview二次封装表格组件和树型组件、组件的单元测试和集成测试
  • 路由篇 VueRouter的基础应用、编程式导航、路由嵌套、路由守卫、路由元信息、实现动态权限菜单、按钮及权限认证、登录权限、手写实现VueRouter源码
  • vuex vuex应用(state、getter、mutation、action)、手写实现中的state、getter、commit、dispatch、actions/mutations、模块化
  • PWA manifest.json配置、service worker生命周期、fetch请求拦截、cache api以及缓存策略、Notification API、cache api以及缓存策略、Notification API、workbox应用、 Vue实战PWA
  • Vue SSR服务器端渲染 SSR原理和设计理念、集成koa实现服务器端渲染、webpack构建Vue SSR项目、集成路由及代码分割、集成VueSSR和Vuex实现数据同步
  • 项目优化 路由懒加载、页面预渲染、SSR原理和Nuxt实战、Vue骨架屏、Vue-devtools开发插件、Vue动画原理
  • Vue全家桶项目 Vue-cli3.0项目搭建、服务器构建(koa2+mongodb)、cube-ui组件化实战、路由配置和动画、如何Mock后台数据、数据获取和axios应用拦截器、基于JWT的注册登录权限管理、公共组件封装、上拉刷新、下拉加载、图片懒加载、课程购买、微信和支付宝支付、使用vuex实现购物车、项目布署和上线

对react的掌握

核心
  • React核心
  • 模块化和组件化
  • React的属性、校验和参数传递
  • React的状态和双向数据绑定
  • React中的单向数据流
  • 受控组件和非受控组件
  • React表单双向数据绑定
  • 新旧Context上下文环境
  • DOM获取之Ref
  • 新旧生命周期函数
  • children属性的使用
进阶
  • create-react-app原理分析
  • JSX原理和虚拟DOM原理
  • setState异步原理实现和事务实现
  • 使用Immutablejs和PureComponent优化性能
  • React动画
  • ErrorBoundary、Suspense和Fragment
  • React Hooks+Redux实战
  • React性能分析
  • React中的高阶组件和render props
  • React新一代的Fiber架构
  • 从零实现一款包含完整dom-diff算法的React
路由篇
  • 路由配置
  • 路由懒加载
  • 路由重定向
  • 路由之权限管理
  • 受保护的路由
  • 手写一个完整的React-router4路由库
redux篇
  • redux核心概念 action、reducer、store
  • 手写实现redux、react-redux、connected-react-router完整功能库
  • 手写redux-logger、redux-promise、redux-thunk、redux-saga、redux-actions、reselect、redux-persist完整类库
React服务器端渲染SSR
  • 客户端渲染VS服务器端渲染
  • React中的服务器端原理
  • 同构的原理和意义
  • SSR中使用路由跳转和redux
  • SEO优化和预渲染
  • Koa2+next.js服务器端渲染实战
mobx篇
  • observable、computed、autorun、when、reaction实战
  • 手写一个mobx类库
Ant-Design篇
  • Button、Modal、Loading、Notification、Message、List、Carousel等UI组件
  • 布局、表单和复杂表格组件
  • 手写Antdesign表单组件
Ant-DesignPro篇
  • nunjucks、yaml、mockjs、roadhog
  • umi配置静态和动态路由、权限和动画、UMI实现原理
  • dva创建应用、集成AntDesign、定义路由和UI组件、链接仓库、使用effects和reducers、手写实现dva
  • 使用AntDesignPro开发企业级后台系统
typescript
  • 开发环境、基本语法、面向对象编程、泛型、类型系统
  • 前端工程化TS应用、声明文件、TypeScript+React集成开发

对node的掌握

node核心模块
  • EventLoop和事件队列
  • process全局对象
  • commonjs原理解析
  • 深入字符编码
  • Buffer对象
  • fs文件模块
  • 压缩与解压缩
  • 加密与签名算法
  • Stream流的原理和应用
  • 多线程与集群
  • tcp和http服务器
  • 多语言、防盗链、正向和反向代码服务器
    Express&Koa
  • 路由配置、参数处理、使用中间件、模板、静态文件中间件、重定向、cookie和session
  • 手写原版express框架、手写原版koa2框架、JWT权限认证
    企业级开发框架Egg.js
  • 项目架构、配置路由、静态文件服务、模板引擎、远程接口服务、计划任务
  • 集成MYSQL、restful接口、sequelize持久化工具、国际化、扩展工具方法、中间件、运行环境、单元测试、服务器部署和运维
  • 自定义插件和框架
    单元测试
  • 测试用例和需求分析
  • 单元测试框架mocha
  • 爬虫利器Puppeteer实战
  • Jest+Enzyme实现React单元测试
    服务器布署
  • TCP/IP协议族网络模型、IP协议以及简单路由、TCP连接的本质、TCP三次握手和加次挥手、路由和网关、滑动容器和Nagle算法、HTTPS、网络命令、网络调优、wireshark抓包实战
  • 域名、备案、服务器、环境配置、安全设置、远程部署、发布与更新
  • 集群的负载均衡、PM2实战
    Nginx
  • nginx的安装和使用
  • 模块和基本配置
  • 正向反向代理等应用场景
  • CDN
  • 浏览器缓存
  • 跨域
  • 防盗链
    Docker
  • Docker介绍和安装
  • Dockerfile
  • 存储和镜像仓库
  • Dock实战
    jenkins
  • jenkins job
  • shell集成
  • 集成nginx和git
  • 持续集成和布署
  • travis gitlab ci
    MySQL
  • MYSQL安装与使用
  • MYSQL系统架构
  • 数据处理之增删改查
  • 数据类型和约束分页
  • 索引和慢查询性能分析
  • 数据库安全之防止SQL注入
  • 数据库设计ER图设计
  • 数据库事务、锁和日志隔离级别
  • 数据库设计之三大范式
  • 基于角色的权限访问控制（Role-Based Access Control）
    Mongodb
  • Mongodb安装和使用
  • Mongodb的系统架构
  • Mongodb高级查询
  • Mongodb索引
  • Mongodb安全与权限
  • mongoose模块之Schema
  • mongoose模块之Model
  • mongoose实战
    Redis
  • Redis安装和使用
  • 5种数据结构及使用场景
  • API的理解和使用
  • Redis客户端
  • 发布订阅
  • 事务
  • 备份和恢复

对算法的掌握

算法的基础知识
  • 输入、输出和数据级
  • 计算能力的变革
  • CPU、寄存器和内存
  • 二分查找
  • 插入排序
  • 冒泡排序
算法的衡量和优化
  • 时间复杂度和空间复杂度
  • 复杂度的本质
  • 合并排序
  • 递归函数复杂度分析
  • 递归表达式分析法
  • 递归数学归纳法分析
  • 主定理
排序算法
  • 排序算法介绍
  • 基于比较的排序算法
  • 合并排序优化
  • 快速排序
  • 快速排序复杂度和优化
  • 计数排序
  • 基数排序
  • 桶排序
  • 外部排序
递归
  • 递归的基本概念
  • 递归图形的绘制
  • 递归和穷举问题
  • 组合问题
  • 递归空间优化
  • 回溯算法
  • 重复子问题优化
  • 尾递归
  • 搜索问题(8皇后)
  • 深度优先搜索和广度优先搜索
数据结构
  • 数组
  • 双向链表
  • 反转单向链表
  • 堆
  • 栈
  • 队列
进阶算法
  • 动态规划的概念
  • LCS问题的子结构
  • 填表法
  • 构造结果

话说前端知识很杂很多，看着你怕了吗？哈哈，从现在起构建好自己的知识体系，一个个攻破它就够啦！