年終回顧，為你彙總一份「前端技術清單」
摘要： 一入前端深似海。
Fundebug經授權轉載，版權歸原作者所有。
學習文章的知識往往是碎片化的。而前端涉及到的面很廣，這些知識如果不進行有效梳理，則無法相互串聯、形成體系。因此，我結合工作體會將抽象出了一些前端基礎能力，並將看過、寫過的一些不錯的文章進行整理，形成了一份（純）前端技術清單。
不論你是正在自學前端，還是對前端某些技術熟練掌握但某些還未涉足，我都希望這份清單能幫助你 review 一些前端的基礎能力。
0. 年度報告
1. 基礎拾遺
溫故而知新，不知則習之，是以牢固根基。
1.1. JavaScript
1.2. CSS
1.3. 瀏覽器
2. 工程化與工具
軟體規模的擴大帶來了工程化的需求，前端也不例外。隨著 NodeJS 的出現，前端工程師可以使用熟悉的 JS 快速開發所需的工具。工具鏈生態的繁榮也是前端圈繁榮的一個寫照。
2.1. webpack
2.2. Gulp
2.3. Linter
2.4. 靜態型別（Typescript/Flow）
- 為什麼要在 JavaScript 中進行靜態型別檢查：
2.5. Babel
2.6. CSS預處理與模組化
3. 效能優化
效能優化其實就是在理解瀏覽器的基礎上“因地制宜”，因此可以配合1.3節“瀏覽器”部分進行理解。
強烈推薦把 Google Web 上效能優化 Tab 中的文章都通讀一遍，其基本涵蓋了現代瀏覽器中效能優化的所有點，非常系統。下面也摘錄了其中一些個人認為非常不錯的篇幅。
3.1. 載入效能
3.2. 執行時效能
3.3. 前端快取
3.4. 效能除錯與實踐
3.5. 效能指標
4. 安全
很多安全風險老生常談，但是往往到出現問題時，才會被重視或者意識到。
4.1. XSS
4.2. CSRF
4.3. CSP
4.4. HTTPS
4.5. 安全實錄
5. 自動化測試
自動化測試是軟體工程的重要部分之一，但卻極容易被忽視。
5.1. 單元測試
5.2. 端到端測試 (E2E)
5.3. 其他
6. 框架與類庫
如果說基礎知識是道，那框架與工具可能就是術；學習與理解它們，但千萬不要成為它們的奴隸。
6.1. React
6.2. Vue
6.3. Redux
6.4. RxJS
7. 新技術/方向
前端領域新技術、新方向層出不窮，這裡彙總一些新技術方向；作為開發者需要多瞭解但是不要盲從
7.1. PWA
7.2. CSS Houdini
7.3. Web Components
7.4. 微前端（Micro Frontends）
7.5. HTTP/2
7.6. WebAssembly
8. 業務相關
在業務中往往還有一些與“業務無關”的場景需求 —— 不論是什麼業務幾乎都會遇到；因此，在變與不變中，我們更需要去抽象出這些問題。
8.1. 資料打點上報
8.2. 前端監控
8.3. A/B測試
8.4. “服務端推”
8.5. 動效
9. 不歸類的好文
開卷有益。
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了8億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
您的使用者遇到BUG了嗎？
體驗Demo 免費使用