前端技能圖譜2021（持續更新）

🔥🔥前端技能圖譜2021（更新中）

以下是工作中對前端技術圖譜的梳理，定期進行優化和迭代。

我信奉長期主義，堅持不懈的對前端進行廣度和深度的探索和精進。

所以就有了這個腦圖，通過結構梳理和定期輸出，倒逼輸入。

非常希望大家和我一起討論，如果有關於相關技能有趣的文章和觀點，歡迎在issue中留言。

如果感興趣，可以點個star關注一下這個倉庫的更新。

另外，下面的圖我整理了很久，傳上來糾結要不要全圖加水印，加了感覺看着很別扭，就沒加。希望大家引用的時候，署名來源就可以啦！感謝！

瞄一瞄這

前端技能圖譜，是對大前端知識框架的梳理

專欄 

博客園：我的大部分技術文章都發在這優前程之前嘗試過掘金，感覺用的不方便就棄更了，以后會專注博客園

公眾號：優前程（優秀的前端工程師，優前程，有前程），掃描下方二維碼關注，會分享一些思考

另外上面的思維導圖，也有不全面的，大家可以在此基礎上貢獻，需要xmind源文件的，可以在公眾號私信我，我都會看的，只是可能忙的時候不能及時回應。

內容

HTML/CSS

1. PC站與H5移動站最佳適配方案
2. 公用flex類
3. 常用css相關筆記
4. 前端CSS的基本素養
5. JavaScript DOM編程藝術 筆記（一）
6. JavaScript DOM編程藝術 筆記（二）語句操作
7. JavaScript DOM編程藝術 筆記（三）函數
8. JavaScript DOM編程藝術 筆記（四)

JavaScript

1. 判斷空對象，空數組（可用於容錯處理）
2. javascript jquery console調試方法說明
3. 搞懂閉包JavaScript的GC機制
4. js執行過程之上下文對象(Context)
5. 搞懂Event Loop
6. 宏任務和微任務，同步異步，promis，await執行順序
7. ES6解構過程添加一個默認值和賦值一個新的值
8. ES6變量聲明方法 & 解構賦值
9. ES6函數
10. js 加密、解密算法類庫
11. moment日期處理類庫
12. js對時間戳的處理 獲取時間，昨天，今天，明天，時間不同格式
13. 當天時間小案例--時間戳，獲取年月日星期時分秒
14. selectTree 改造
15. 用JS獲取地址欄參數的方法（超級簡單)
16. eazyui 或bootstrap table表格里插入圖片，點擊查看大圖
17. JavaScript用策略模式消除if else 和 switch

網絡原理

1. Http 協議
2. 比較 GET 與 POST
3. 一文讀懂計算機底層網絡原理，包括TCP、UDP、header，什么是包、幀、段等關鍵問題

前端框架

React

1. 關於react提問以及解答
2. React中構造函數constractor，為什么要用super（props）
3. 深入理解React組件傳值（組合和繼承）
4. 初學者React入門概覽
5. React生命周期函數（迭代合並：react 16.3）
6. react，ES6的括號問題
7. Dva框架從初識到上手
8. React Hooks
9. 前后端分離，前端發送過來的請求是服務器的ip還是用戶的ip

Router

1. ReactRouter中HashRouter和BrowserRouter的區別

UI庫

1. antd從v3到v4
2. antd國際化
3. ant design TreeSelect支持搜索，切換value和title屬性
4. form表單調接口校驗 比如后台驗證用戶名是否存在
5. React結合AntD的upload組件寫頭像上傳

圖表庫

1. echarts各個配置項詳細說明總結
2. React中用EChart寫面積圖

Bootstrap

1. Bootstrap table表格組件神器

前端工程化

1. 前端工程化總結
2. 前端業務

規范化

1. 代碼整潔之道
2. 前端JavaScript編碼規范 和react編碼規范
3. 前端工作規范 ……

自動化

1. 雲效創建項目應用以及流水線的說明文檔
2. git stash詳解
3. 【本博客所有關於git文章迭代匯總】git操作(暫存，回退，綁定遠程等)，看這一篇就夠了
4. 2021入門Webpack，看這篇就夠了：Webpack.config.js 解析
5. 前端腳手架CLI生成模版命令工具（包括，npm包的發布，腳手架的搭建，注意事項，優化等）

組件化

1. 前端工程化&&自動化部署&&model抽離

模塊化

1. 架構-微服務-中台
2. 前端架構設計：層次設計

計算機原理探究

1. 計算機科學模型-思維導圖
2. 了解計算機操作系統
3. 瀏覽器渲染原理，以及重繪和回流（重排），基於他們的性能優化

學習與面試

1. 前端學習 永不止步
2. 前端參考書籍
3. 從零開始學習web前端技術路線圖
4. 推薦職業規划書籍《你的降落傘是什么顏色》
5. 面試相關：簡歷和面試過程
6. 金三銀四跳槽旺季，如何寫好簡歷？ ……

工具使用

1. Chrome - JavaScript調試技巧總結（瀏覽器調試JS）
2. 精選！15個必備的 VSCode 插件（前端類）
3. Axure 原型圖
4. Windows CMD命令大全
5. 同步和異步詳解
6. macbook通過虛擬機連接遠程linux
7. 蘋果電腦開不了機，mac時間機器備份加速，以及識別不到u盤的方法

……

Seo

……

算法

……