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

軟技能

學習能力

• 知識儲備
• 知識分享

技術能力

• 解決問題

團隊協做

• 溝通技巧

項目管理

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

人員管理

架構設計能力

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

參考文獻

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