2020前端知識體系（圖譜）

前言

隨着前端的不斷髮展，各種框架概念層出不窮，初級希望能瞭解前端整個知識體系，加強對前端認知，有一定工作經驗的前端工程師也希望能構建自己的知識體系，往更高的層次邁進。因此本人查閱多方資料，結合自己的瞭解認知，整理出如下的知識圖譜，供大家討論與參考。

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

軟技能

學習能力

• 知識儲備
• 知識分享

技術能力

• 解決問題

團隊協作

• 溝通技巧

項目管理

• 業務理解
• 需求分析
• 項目評估

人員管理

架構設計能力

• 交互設計
• 可用性
• 擴展性
• 安全性
• 性能

參考文獻

• 進軍高級前端開發工程師必備的知識圖譜
• 前端技能彙總