前言

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

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

软技能

学习能力

• 知识储备
• 知识分享

技术能力

• 解决问题

团队协作

• 沟通技巧

项目管理

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

人员管理

架构设计能力

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

参考文献

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

2020前端知识体系（图谱）相关推荐

1. 前端知识体系-全栈系列（图谱+大纲）

   源文件地址: https://download.csdn.net/download/gongch0604/86860161 前端知识体系(图谱) 前端工程化体系 node 主流技术栈 大纲 React ...

2. 历时8个月，10w字！前端知识体系+大厂面试笔记（工程化篇）

   前言 本文是10w字 前端知识体系+大厂面试总结 的 第三篇 其余3篇为基础知识篇.算法篇.前端框架和浏览器原理篇,如果还没有阅读,建议了解下 工程化目的是为了提升团队的开发效率.提高项目的质量 例如 ...

3. 前端劝退之前端知识体系（前端面试体系）

   关注公众号 前端开发博客,领27本电子书 回复加群,自助秒进前端群 写文的目的主要是梳理下知识,能对复习有点帮助就行,本文主要针对前端知识体系相关,涉及的内容有: 浏览器 计算机网络 前端基础(htm ...

4. web前端知识体系大全

   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

5. （一）梳理前端知识体系，搞定大厂必考面试题

   梳理前端知识体系,搞定大厂必考面试题 常见面试题 JS基础知识 变量类型和计算 原型和原型链 作用域和闭包 异步和单线程 运行环境 HTTP协议 总结 常见面试题 JS基础知识 变量类型和计算 typ ...

6. Web前端知识体系精简

   Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

7. layui 如何动态加载局部页面_从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

   前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

8. 针对WEB前端新人的前端知识体系

   现在谈到WEB前端的技术结构.知识体系,都会搞出一个非常大.枝叶非常多且细的相当宏大的思维导图,就像这种的,这种大而全的图示对新人来讲,太大了,不好掌握,而且容易在其中迷失.我想今天和大家谈一下针对新 ...

9. Web前端知识体系梳理，值得收藏！

   前言 现在是信息时代,经过 web1.0 时期.web2.0 时期到现在的移动互联网时期,信息获取越来越高效,坐着不动就会有大量的新闻.博客.资讯向你推荐而来. 作为一名靠谱的程序员,你免不了要查阅大 ...

最新文章

1. 【python学习】——读取csv文件
2. windows下python 版本opencv 安装
3. vue 中二维码的使用和工具比较
4. 计算机视觉（CV）中HOG算法的主要步骤
5. 关于贝叶斯公式的解释，通俗易懂（转载）
6. 使用流量分析系统进行资产梳理
7. (美国)数字设备公司 DEC
8. portraiture2022插件安装使用教程
9. 卡内基梅隆计算机金融,卡耐基梅隆大学计算金融项目申请要求是什么？
10. 启动springboot项目APPLICATION FAILED TO START
11. 转：Mybatis与JDBC批量插入数据库哪个更快
12. yujin_ocs/yocs_velocity_smoother速度平滑velocity_smoother_nodelet源码解读
13. 学生成绩管理系统 002
14. C++中时间记录的常用操作
15. android 触摸屏干扰,如何解决电容触摸屏的抗干扰问题？
16. 地理坐标系与投影坐标系的区别以及投影变换与定义投影的区别
17. java自动化测试语言高级之发送邮件
18. 利用 RDP Wrapper 实现 Android 平板变身 Windows 平板
19. 硬盘、Ｕ盘起死回生的方法：文件系统显示为RAW文件系统，总共字节为0，可用字节为0且无法读取 的解决办法
20. 有没有html代码听力的软件吗,有哪些英语听力训练的软件？

热门文章

1. DFC own Administrator permission
2. 5.22非常虚伪的集训总结
3. CRC32 tools in Ubuntu /fedora
4. 什么样的护眼灯适合孩子用？真正适合孩子的护眼台灯
5. 护眼灯作用大不大？Led护眼灯的好处都有什么
6. 怎么看懂UML中的类图？
7. 《量子信息与量子计算简明教程》第三章·量子纠缠状态及其应用 (上)
8. NOIP2016模拟 星际争霸(二分)
9. 产品研发管理的系统解决方案
10. 计算机游戏动漫制作自我鉴定,动画制作专业自我鉴定范文