年終回顧，爲你彙總一份「前端技術清單」

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

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

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

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

因爲我的精力有限，一些技術點的概括可能有失偏頗，或者目前並未歸入進來，所以 github 上的清單內容也會不斷更新。目前只包含純前端基礎內容，NodeJS 、客戶端泛前端、小程序、可視化等內容先留着坑吧。前端

清單內容↓↓↓vue

0. 年度報告

1. 基礎拾遺

溫故而知新，不知則習之，是以牢固根基。html5

1.1. JavaScript

1.2. CSS

1.3. 瀏覽器

2. 工程化與工具

軟件規模的擴大帶來了工程化的需求，前端也不例外。隨着 NodeJS 的出現，前端工程師可使用熟悉的 JS 快速開發所需的工具。工具鏈生態的繁榮也是前端圈繁榮的一個寫照。java

2.1. webpack

webpack 中的 Chunk 關係圖算法 [英]
webpack 進階系列文章
編譯優化：
關於 webpack 編譯緩存的討論：
- mzgoddard's comment
- [spec: webpack 5] - A module disk cache between build processes

2.2. Gulp

2.3. Linter

2.4. 靜態類型（Typescript/Flow）

Typescript 整體架構 [英]
爲何要在 JavaScript 中進行靜態類型檢查：

2.5. Babel

2.6. CSS預處理與模塊化

3. 性能優化

性能優化其實就是在理解瀏覽器的基礎上「因地制宜」，所以能夠配合1.3節「瀏覽器」部分進行理解。node

強烈推薦把 Google Web 上性能優化 Tab 中的文章都通讀一遍，其基本涵蓋了現代瀏覽器中性能優化的全部點，很是系統。下面也摘錄了其中一些我的認爲很是不錯的篇幅。react

3.1. 加載性能

3.2. 運行時性能

避免大型、複雜的佈局和佈局抖動 [英]
什麼致使強制同步佈局（reflow）？ [英]
如何診斷強制同步佈局 [英]
無線性能優化：Composite
如何不擇手段提高scroll事件的性能
使用 passive event listener 來提升滾動流暢性 [英]
節流和去抖（throttle & debounce）：
- JavaScript 函數節流和函數去抖應用場景辨析
- underscore 函數去抖的實現
requestIdleCallback - 一個強大而神器的 API：
- requestIdleCallback使用入門 [英]
- Idle Until Urgent [英]：requestIdleCallback的妙用

3.3. 前端緩存

3.4. 性能調試與實踐

3.5. 性能指標

以用戶爲中心的前端性能指標 [英]：前端性能指標的前因後果
DOMContentLoaded:
- 你不知道的 DOMContentLoaded
- Deciphering the Critical Rendering Path [英]
FP (First Paint)：
- Chrome的First Paint
FCP (First Contentful Paint)：
- First Contentful Paint Explained [英]
- First Contentful Paint [英]
FMP (First Meaningful Paint)：
- Chrome 中的 First Meaningful Paint
- Time to First Meaningful Paint
TTI (Time to interactive)：
- Time to Interactive Explainer
- 衡量用戶體驗的新標準
TTFB (Time To First Byte)：
- TTFB，以及頁面加載的時間節點
FID (First Input Delay)：
- First Input Delay
Speed Index：
- WebPagetest: Speed Index

4. 安全

不少安全風險老生常談，可是每每到出現問題時，纔會被重視或者意識到。

4.1. XSS

如何防止XSS攻擊？

4.2. CSRF

如何防止CSRF攻擊？
Site Isolation [英]：Chrome的新特性

4.3. CSP

4.4. HTTPS

4.5. 安全實錄

About rel=noopener [英]：打開一個新頁面是如何帶來安全隱患的
一種新型的「釣魚」方式 [英]
一個媒體文件請求引起的跨站風險 [英]
Mitigating Spectre [英]： Chrome 中的跨站安全問題

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

開卷有益。

Recursion? We don't need no stinking recursion!：如何將一些遞歸改成循環（尾遞歸優化）
Turning your web traffic into a Super Computer：經過 Web Worker 和 WebSocket 來將全世界的電腦鏈接成超級計算機
Designing very large (JavaScript) applications：高屋建瓴，適合閱讀與思考