2018你成長了麼？一份給你的前端技術清單

AlienZHOU發表於2018-11-04
前端

2018 眼看就要過去了，今年的你相較去年技術上有怎樣的收穫呢？

記得年初的時候我給自己制定了一個學習計劃，現在回顧來看完成度還不錯。但仍有些遺憾，一些技術點沒有時間去好好學習。

在學習中我發現，像文章這樣的知識往往是碎片化的，而前端涉及到的面很多，如果不將這些知識有效梳理，則無法形成體系、相互串聯。最後有一種東懂一塊，西瞭解一點的感覺。因此，我結合工作體會抽象出了一些前端基礎技術能力，並將這段時間學習或產出的一些不錯的內容根據這些能力進行整理，形成了一份前端技術清單（github 地址）。

不論你是正在自學前端遇到了瓶頸，還是對某些技術熟練掌握但某些還未涉足，都希望這份清單能對你有所幫助。

由於個人精力有限，一些技術點的歸納可能有失偏頗，或者目前並未納入進來，因此 github 上的清單內容 也會不斷更新。目前只包含純前端基礎內容，NodeJS 、客戶端泛前端、小程式、視覺化等內容先留著坑吧。

清單內容↓↓↓

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）

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. 不歸類的好文

開卷有益。

相關文章