2020年你需要了解的前端知识体系

前言:

2019年还不到半个月就会过去，2020年即将到来，技术日新月异，前端更是比女孩子的心思变的还快，所以如何应对不断的技术变化与变革，是每个技术人员最关心的事情。有句话说的好，万变不离其宗，所以形成自己的体系，至少要有体系思维，才能再不断的变化中，以不变应万变，去挑战未来的不确定性，做到胸有成竹，心中坦荡，宠若不惊。以下的前端知识体系也许是你需要的，接下来将从脑图谱和文档结构进行编排

前端知识体系图谱

Todo List

• 为图谱对应的列表增添超链接，链接到知识点对应的更多内容的页面(建议文档渠道：官网、MDN、GitHub、wiki，中英文随意)
  • 编程基础
  • 开发软件
  • 类库框架
  • 知识进阶
  • 工程开发
  • [X] 编程思想
  • [X] 领域分支
  • [X] 社区发展
  • [X] 计算机基础
  • [X] 后端知识
  • 软技能
  • Js中文网 – 前端进阶资源教程 https://www.javascriptc.com/
• 增加二级图谱，进行更详细的拓展
  • 编程基础
  • 开发软件
  • 类库框架
  • 知识进阶
  • 工程开发
  • 编程思想
  • 领域分支
  • 社区发展
  • 计算机基础
  • 后端知识
  • 软技能

编程基础

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 算法与数据结构

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

操作系统

• 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

软技能

学习能力

• 知识储备
• 知识分享

技术能力

• 解决问题

团队协作

• 沟通技巧

项目管理

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

人员管理

架构设计能力

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

参考文献

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

作者：dragonking
链接：https://juejin.im/post/5dfa360c5188251258387c28