2019 前端知识图谱

前言

随着前端的不断发展，各类框架概念层出不穷，初级但愿能了解前端整个知识体系，增强对前端认知，有必定工做经验的前端工程师也但愿能构建本身的知识体系，往更高的层次迈进。所以本人查阅多方资料，结合本身的了解认知，整理出以下的知识图谱，供你们讨论与参考。

GitHub地址： 2019 前端知识图谱， 期待您的 star。因我的能力与视野有限，欢迎你们提 PR 与 issue，一块儿改善，一块儿进步。

图谱

Todo List

• 为图谱对应的列表增添超连接，连接到知识点对应的更多内容的页面

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

编程基础

HTML(5)

• 元素
• DOM
• 语义化

CSS(3)

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

JavaScript(ES6+)

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

开发软件

编辑器和IDE

• VIM
• Sublime Text3
• Notepad++
• WebStorm
• Visual Studio Code

调试工具

• Chrome Dev Tools
• Firebug
• Postman
• Fiddler
• Dragonfly
• 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
  • UDP
  • WebSocket

• API风格

  • RESTFul
  • RPC
  • GraphQL

性能

• 性能指标

  • 首次绘制（FP）
  • 首次内容绘制（FCP）
  • 首次有效绘制（FMP）
  • 每秒传输帧数（FPS）
  • 用户可交互时间
  • DNS解析时间
  • TCP链接时间
  • HTTP请求响应时间

• 评估工具

  • Page Speed
  • 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)

工程开发

模块化

• CSS Module
• ES6 Module
• CommonJS
• SeaJS/CMD
• RequireJS/AMD

版本管理

• Git

  • Gitlab
  • Github

• Svn

  • TortoiseSVN

依赖管理

• npm
• Yarn
• Lerna

语言加强

• CSS

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

• JavaScript

  • TypeScript
  • CoffeeScipt
  • Flow

构建工具

• Webpack
• Gulp
• Grunt
• Rollup

转换器

• Babel
• Traceur

CI/CD

• Git web hook
• 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

编程范型

• 面向对象编程（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

数据结构

• 堆（Heap）
• 栈（Stack）
• 队列（Queue）
• 链表（Linked List）
• 数组（Array）
• 树（Tree）
• 集合（Set）
• 哈希表（Map）

算法

• 排序

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

• 检索

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

• Diff

操做系统

• 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

软技能

学习能力

• 知识储备
• 知识分享

技术能力

• 解决问题

团队协做

• 沟通技巧

项目管理

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

人员管理

架构设计能力

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

参考文献

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