2020前端知识体系（图谱）

前言

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

GitHub地址： ，

期待您的 star。因个人能力与视野有限，欢迎大家提 PR 与 issue，一起改善，一起进步。

图谱

Todo List

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

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

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

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

编程基础

HTML(5)

CSS(3)

JavaScript(ES6+)

开发软件

编辑器和IDE

调试工具

切图

类库框架

工具库

开发库/框架

知识进阶

网络通信

• 通讯协议

  • / /
  • *： 、

• API风格

性能

• 性能指标

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

• 评估工具

安全

浏览器

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

工程开发

模块化

• SeaJS /
• /
• *：

版本管理

• Svn

依赖管理

语言增强

• CSS

• JavaScript

构建工具

转换器

CI/CD

代码质量

• 质量检测

  • / / /

• 单元测试

  • / /
  • / / / /

• E2E测试

编程思想

设计模式

• …

架构模式

• Script
• Code Blocks
• Code Behind
• *：

编程范型

程序设计

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

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

领域分支

可视化

移动Web

• Web to Native

游戏开发

便携式设备

社区发展

计算机基础

编译原理

• 词法
• 文法
• V8
• AST
• JIT
• *：

数据结构

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

算法

• 排序

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

• 检索

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

• *：

操作系统

• PC

  • Linux
  • Unix
  • Windows
  • Mac OS

• Mobile

  • Android
  • IOS

计算机网络

后端知识

Node

编程语言

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

网页服务器

数据库

• SQL

• NoSQL

数据缓存

软技能

学习能力

• 知识储备
• 知识分享

技术能力

• 解决问题

团队协作

• 沟通技巧

项目管理

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

人员管理

架构设计能力

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

参考文献