2020前端知识体系（图谱）

 

前言

随着前端的不断发展，各种框架概念层出不穷，初级希望能了解前端整个知识体系，加强对前端认知，有一定工作经验的前端工程师也希望能构建自己的知识体系，往更高的层次迈进。因此本人查阅多方资料，结合自己的了解认知，整理出如下的知识图谱，供大家讨论与参考。

GitHub地址： 2020 前端知识图谱，
期待您的 star。因个人能力与视野有限，欢迎大家提 PR 与 issue，一起改善，一起进步。

图谱

Todo List

• 为图谱对应的列表增添超链接，链接到知识点对应的更多内容的页面(建议文档渠道：官网、MDN、GitHub、wiki，中英文随意)

  •  编程基础
  •  开发软件
  •  类库框架
  •  知识进阶
  •  工程开发
  •  编程思想
  •  领域分支
  •  社区发展
  •  计算机基础
  •  后端知识
  •  软技能

• 增加二级图谱，进行更详细的拓展

  •  编程基础
  •  开发软件
  •  类库框架
  •  知识进阶
  •  工程开发
  •  编程思想
  •  领域分支
  •  社区发展
  •  计算机基础
  •  后端知识
  •  软技能

编程基础

HTML(5)

• 元素
• DOM
• 语义化

CSS(3)

• CSSOM
• 选择器
• 布局
• 交互
• 绘制

JavaScript(ES6+)

• 类型
• 原型链
• 作用域
• 闭包
• 事件
• 异步
• 正则表达式

开发软件

编辑器和IDE

• VIM
• Sublime Text3
• Notepad++
• WebStorm
• Visual Studio Code(强烈推荐)

调试工具

• Chrome DevTools
• Firebug
• Postman
• Fiddler
• Charles

切图

• Sketch
• PhotoShop
• PxCook

类库框架

工具库

• jQuery
• Zepto
• Bootstrap
• Prototype
• Underscore
• Lodash
• RxJS
• moment

开发库/框架

• Vue

  • Vuex
  • Vue-router
  • Vue-cli
  • Element UI

• React

  • Redux
  • React-router
  • create-react-app
  • Ant design

• Angular

• Ember

• Knockout

• Backbone

知识进阶

网络通信

• 通讯协议

  • HTTP1.0/1.1/2.0/3.0
  • HTTPS
  • TCP
  • UDP
  • WebSocket
  • *：HTTP1.0、HTTP1.1 和 HTTP2.0 的区别、TCP和UDP的区别

• API风格

  • RESTFul
  • RPC
  • GraphQL

性能

• 性能指标

  • 首次绘制（FP）
  • 首次内容绘制（FCP）
  • 首次有效绘制（FMP）
  • 每秒传输帧数（FPS）
  • 用户可交互时间
  • DNS解析时间
  • TCP连接时间
  • HTTP请求响应时间
  • *：以用户为中心的性能指标

• 评估工具

  • PageSpeed
  • WebPageTest
  • PhantomJS
  • Lighthouse
  • JSPerf
  • Chrome dev tools

安全

• XSS
• CSRF
• CSP
• Same-origin Policy

浏览器

• IE6/7/8/9/10/11 (Trident) / Edge (EdgeHTML)
• Firefox (Gecko)
• Chrome/Chromium (Blink)
• Safari (WebKit)
• Opera (Blink)
• *：can i use

工程开发

模块化

• CSS Module
• ES6 Module
• CommonJS
• SeaJS/CMD
• RequireJS/AMD
• *：AMD 和 CMD 的区别有哪些？

版本管理

• Git

  • Gitlab
  • Github

• Svn

  • TortoiseSVN

依赖管理

• npm
• Yarn
• Lerna

语言增强

• CSS

  • Less
  • Sass(Scss)
  • Stylus
  • Post css

• JavaScript

  • TypeScript
  • CoffeeScript
  • Flow

构建工具

• Webpack
• Gulp
• Grunt
• Rollup

转换器

• Babel
• Traceur

CI/CD

• Git webhooks
• Jenkins

代码质量

• 质量检测

  • JSLint/JSHint/TSLint/ESLint
  • StyleLint
  • Sonar

• 单元测试

  • Chai/Expect/Should
  • Unit/Mocha/QUnit/Jasmine/Jest
  • Karma
  • Sinon
  • Istanbul

• E2E测试

  • Nightwatch
  • Cypress

编程思想

设计模式

• 单例模式
• 工厂模式
• 观察者模式
• 发布订阅模式
• 代理模式
• 适配器模式
• 策略模式
• 命令模式
• …

架构模式

• Script
• Code Blocks
• Code Behind
• MVC
• MVP
• MVVM
• Flux
• *：你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解？

编程范型

• 面向对象编程(OOP)
• 面向切面编程(AOP)
• 函数式编程
• 响应式编程

程序设计

• 结构化程序

  • 自顶向下
  • 逐步求精
  • 模块化
  • 限制使用goto

• 面向对象程序

  • 单一功能原则（S）
  • 开放关闭原则（O）
  • 里氏替换原则（L）
  • 接口隔离原则（I）
  • 依赖反转原则（D）

领域分支

可视化

• SVG

  • D3
  • Raphaël
  • Snap

• Canvas 2D

  • Echarts
  • HighCharts

• WebGL

  • Three

移动Web

• WebView

  • Zepto
  • jQuery Mobile

• Web to Native

  • Weex
  • React Native
  • Flutter

• 小程序

• 响应式网页设计

游戏开发

• Cocos2d
• Egret Engine

便携式设备

• Glass
• Bracelet

社区发展

• SSR

• 大前端

• 微服务

• Serverless

• WebAssembly

• Less code/No code

计算机基础

编译原理

• 词法
• 文法
• V8
• AST
• JIT
• *：JavaScript 语法解析、AST、V8、JIT

数据结构

• 堆（Heap）
• 栈（Stack）
• 队列（Queue）
• 链表（Linked List）
• 数组（Array）
• 树（Tree）
• 集合（Set）
• 哈希表（Map）
• *：JavaScript 算法与数据结构

算法

• 排序

  • 冒泡排序
  • 选择排序
  • 插入排序
  • 快速排序
  • 希尔排序
  • 归并排序
  • 堆排序
  • 计数排序
  • 基数排序

• 检索

  • 线性搜索
  • 二分查找
  • 索引
  • 深度优先搜索（DFS）
  • 广度优先搜索（BFS）

• Diff

• *：JavaScript 算法与数据结构

操作系统

• PC

  • Linux
  • Unix
  • Windows
  • Mac OS

• Mobile

  • Android
  • IOS

计算机网络

• OSI七层模型

后端知识

Node

• Express
• Koa
• Egg

编程语言

• C/C++/Java/PHP/Ruby/Python/…

网页服务器

• Nginx
• Apache
• Tomcat

数据库

• SQL

  • MySQL
  • Oracle
  • SQL Server
  • PostgreSQL
  • DB2

• NoSQL

  • MongoDB
  • CouchDB
  • HBase

数据缓存

• Redis
• Memcached

软技能

学习能力

• 知识储备
• 知识分享

技术能力

• 解决问题

团队协作

• 沟通技巧

项目管理

• 业务理解
• 需求分析
• 项目评估

人员管理

架构设计能力

• 交互设计
• 可用性
• 扩展性
• 安全性
• 性能

参考文献

• 进军高级前端开发工程师必备的知识图谱
• 前端技能汇总