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