進軍高級前端開發工程師必備的知識圖譜

1、前沿

全文（含腦圖）爲我的總結的關於高級前端開發工程師必備的技術能力，歡迎補充。全文結構以下：
前沿：寫在正文前的一些話。
腦圖：基於知識圖譜的腦圖，看知識圖譜暈的能夠欣賞腦圖。
知識圖譜：腦圖沒法下手的，參照一下知識圖譜。

2、腦圖

PS：建議單擊圖片，點擊圖片下方的查看原圖，放大圖片後，再進行腦圖的查看

3、知識圖譜

• 1.核心技術

  • 1.1 HTML(5)

  • 1.2 JavaScript

    • ES6
    • Vue
    • React
    • Angular

  • 1.3 CSS(3)

    • 佈局

      • 基礎佈局
      • 雙飛翼佈局
      • 聖盃佈局
      • Flex佈局
      • Grid佈局
    • CSS3D
    • 矩陣
    • 高性能渲染
    • Houdini

• 2.擴展技術

  • 2.1 後端（至少一種）

    • Node.js

      • 核心API
      • Express
      • Koa
      • Egg
      • 微服務
      • C/C++
    • PHP
    • Go
    • Java

  • 2.2 移動端

    • AMP
    • PWA
    • Flutter

  • 2.3 圖形學

    • SVG
    • Canvas
    • Cocos2d
    • WebGL
    • Three.js
  • 2.4 TypeScript
  • 2.5 瀏覽器特性/兼容性

• 3.工程開發

  • 3.1 預編譯工具

    • Less
    • Sass
    • PostCss

  • 3.2 構建工具

    • Webpack
    • Grunt
    • Gulp

  • 3.3 性能優化

    • FCP
    • FMP
    • 客戶端渲染
    • 服務端渲染
    • 雅虎軍規
    • ...

  • 3.4 版本管理

    • Git

  • 3.5 高級調試

    • 斷點
    • Timeline
    • Profiles

  • 3.6 自動化測試

    • Karma
    • Mocha
    • Jest

  • 3.7 可用性/安全

    • 加密
    • 混淆
    • ...

• 4.編程思想

  • 4.1 編程範式

    • 面向對象編程
    • 函數式編程
    • 響應式編程
    • 面向切面編程
    • ...

  • 4.2 設計模式（至少掌握最熱門的前5種）

    • 1.單例模式
    • 2.代理模式
    • 3.命令模式
    • 4.發佈訂閱模式
    • 5.職責鏈模式
    • ...

  • 4.3 設計法則

    • 單一職責原則
    • 開放封閉原則
    • 李氏置換原則
    • 接口獨立原則
    • 依賴致使原則

  • 4.4 架構模式

    • MVC
    • MVP
    • MVVM
    • Flux
    • ...

  • 4.5 算法

    • Diff算法

    • 排序算法

      • 冒泡排序
      • 選擇排序
      • 插入排序
      • 希爾排序
      • 歸併排序
      • 快速排序
      • ...

    • 檢索算法

      • 二分法
      • ...

  • 4.6 編程原理

    • v8
    • libv
    • ...

• 5.能力

  • 5.1 學習能力
  • 5.2 技術能力

  • 5.3 專長（在專業領域解決問題）

    • 前端
    • 後端
    • 移動端
    • 圖形學
    • 算法
    • ...

  • 5.4 認知能力

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

  • 5.5 經驗

    • 項目經驗
    • 使用經驗（問題解決方案）
    • （跨）領域經驗
    • 管理經驗

  • 5.6 架構能力（核心：判斷和取捨）

    • 性能
    • 可用性
    • 伸縮性
    • 擴展性
    • 安全性

更新日期：2019年1月