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

摘要： 摘要：一入前端深似海。 原文：前端技術清單 作者：alienzhou 學習文章的知識往往是碎片化的。而前端涉及到的面很廣，這些知識如果不進行有效梳理，則無法相互串聯、形成體系。因此，我結合工作體會將抽象出了一...

摘要：一入前端深似海。

• 原文：ofollow,noindex">前端技術清單
• 作者：alienzhou

學習文章的知識往往是碎片化的。而前端涉及到的面很廣，這些知識如果不進行有效梳理，則無法相互串聯、形成體系。因此，我結合工作體會將抽象出了一些前端基礎能力，並將看過、寫過的一些不錯的文章進行整理，形成了一份（純）前端技術清單。

不論你是正在自學前端，還是對前端某些技術熟練掌握但某些還未涉足，我都希望這份清單能幫助你 review 一些前端的基礎能力。

0. 年度報告

• 2018 前端工具調查報告
• 2018 JavaScript 調查報告

1. 基礎拾遺

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

1.1. JavaScript

• You-Dont-Know-JS [英]
• JavaScript 基礎執行機制：
  • JS 引擎、執行時與呼叫棧概述 [英]
  • V8 引擎簡介 [英]
  • 記憶體管理與4中常見的洩漏 [英]
• Event Loop（面試裡總會有一題 Event Loop…）：
  • 從 Event Loop 規範探究 JavaScript 非同步及瀏覽器更新渲染時機
  • 非同步之 Event Loop [英]
  • NodeJS 中的 Event Loop、Timers 與process.nextTick() [英]
  • Tasks、Microtasks、Queues 與Schedules [英]
• Web Workers 及其5個常見使用場景 [英]
• 如何避免 async/await 地獄 [英]
• “回撥地獄”的解決思路彙總

1.2. CSS

• You-Need-to-Know-CSS
• CSS佈局指南
• 在 (S)CSS 中實現主題功能的 4½ 種方法 [英]
• CSS 中的各類換行處理方式 [英] ：處理經典的換行問題
• 瀏覽器將rem轉成px時有精度誤差怎麼辦？
• 精準操控的滾動體驗，淺談新標準 Scroll Snap
• 如何完美實現一個非button 元素的按鈕 [英]
• 巧用 CSS Grid 來建立橫向滾動容器 [英]
• 如何處理內聯元素中的空隙 [英]
• CSS Stacking Context 裡那些鮮為人知的坑

1.3. 瀏覽器

• 瀏覽器的工作原理
• 現代瀏覽器內部是如何執行的：
  • Chrome瀏覽器概覽
  • 瀏覽時發生了什麼？
  • 渲染程序的內部工作原理
  • compositor是如何來提高互動效能的？
• 完整的頁面生命週期 API 介紹 [英]
• 四個新的觀察者：Intersection / Mutation / Resize / Performance (Observer)
• 渲染引擎工作方式及優化建議 [英]
• 瀏覽器核心渲染：重建引擎
• 跨域解決方案彙總

2. 工程化與工具

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

2.1. webpack

• webpack 中的 Chunk 關係圖演算法 [英]
• webpack 進階系列文章
• 編譯優化：
  • 如何提升大型專案中 webpack 的效能  [英]
  • 執行時優化：Separating a Manifest [英]
  • 在 webpack 中使用 [英]
  • 如何更好使用 webpack tree-shaking
• 關於 webpack 編譯快取的討論：
  • mzgoddard’s comment
  • [spec: webpack 5] - A module disk cache between build processes

2.2. Gulp

• Gulp 4 簡介 [英]
• 基於Gulp的多頁面應用實踐指南

2.3. Linter

• JS Linter 進化史
• 為何要在專案彙總使用 ESLint [英]

2.4. 靜態型別（Typescript/Flow）

• TypeScript/wiki/Architectural-Overview" target="_blank" rel="nofollow,noindex">Typescript 總體架構 [英]
• 為什麼要在 JavaScript 中進行靜態型別檢查：
  • 第一部分
  • 第二、三部分
  • 第四部分

2.5. Babel

• Babel 使用者手冊
• Babel 外掛手冊

2.6. CSS預處理與模組化

• CSS 進化史 [英]
• CSS 模組化方案系列

3. 效能優化

效能優化其實就是在理解瀏覽器的基礎上“因地制宜”，因此可以配合1.3節“瀏覽器”部分進行理解。

強烈推薦把Google Web 上效能優化 Tab 中的文章都通讀一遍，其基本涵蓋了現代瀏覽器中效能優化的所有點，非常系統。下面也摘錄了其中一些個人認為非常不錯的篇幅。

3.1. 載入效能

• PRPL 模式 [英]
• 圖片懶載入完全指南 [英]
• 使用 Intersection Observer 來懶載入圖片 [英]
• 圖片與視訊懶載入的詳細指南 [英]
• 使用 Application Shell 架構來實現秒開應用 [英]

3.2. 執行時效能

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

3.3. 前端快取

• Web 快取簡介：以購買牛奶的為例 [英]
• 大話前端快取 [英]
• 快取（一）—— 快取總覽：從效能優化的角度看快取
• 快取（二）—— 瀏覽器快取機制：強快取、協商快取
• 快取（三）—— 資料儲存：cookie、Storage、indexedDB

3.4. 效能除錯與實踐

• 使用 Chrome DevTools 提升頁面速度 [英] ：Chrome DevTools實操講解
• 瞭解 DevTools 中的 Resource Timing
• 淘寶新勢力周H5效能優化實戰
• 優化打包策略來提升頁面載入速度
• Chrome DevTools 中你可能不知道的除錯技巧
• 前端效能測量 [英]

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
  • QttKT-JK8HI/view?hl=zh-cn#heading=h.k50nnyhtptq0" target="_blank" rel="nofollow,noindex">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. 安全

很多安全風險老生常談，但是往往到出現問題時，才會被重視或者意識到。

• 8大前端安全問題上篇
• 8大前端安全問題下篇
• 概念講解：編碼、加密、雜湊與混淆 [英]
• 常見 Web 安全攻防總結

4.1. XSS

• 如何防止XSS攻擊？

4.2. CSRF

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

4.3. CSP

• Content Security Policy 入門教程
• HTTP/CSP" target="_blank" rel="nofollow,noindex">Content Security Policy (CSP) [英]

4.4. HTTPS

• 圖文還原 HTTPS 原理
• 淺談有贊全站 HTTPS 推進

4.5. 安全實錄

• Aboutrel=noopener [英] ：開啟一個新頁面是如何帶來安全隱患的
• 一種新型的“釣魚”方式 [英]
• 一個媒體檔案請求引發的跨站風險 [英]
• Mitigating Spectre [英] ： Chrome 中的跨站安全問題

5. 自動化測試

自動化測試是軟體工程的重要部分之一，但卻極容易被忽視。

• 2018 前端自動化測試綜述 [英]
• 測試你的前端程式碼（介紹篇）[英]

5.1. 單元測試

• 測試你的前端程式碼（單元測試篇）[英]
• Fakes、Mocks 以及 Stubs 概念明晰
• 測試覆蓋（率）到底有什麼用？

5.2. 端到端測試 (E2E)

• 測試你的前端程式碼（E2E 測試篇）[英]
• 什麼是一個好的 E2E 測試？[英]
• 平衡單元測試和端到端測試
• 對過多的 E2E 測試說“不” [英]

5.3. 其他

• 測試你的前端程式碼（整合測試篇）[英]
• 測試你的前端程式碼（視覺化測試篇）[英]

6. 框架與類庫

如果說基礎知識是道，那框架與工具可能就是術；學習與理解它們，但千萬不要成為它們的奴隸。

6.1. React

• React 底層揭祕 [英]
• 你所需要知道的 React 細節
• React Fiber 架構
• React 16 Fiber 原始碼速覽
• React 是怎樣煉成的 ：React早期的進化之路
• 從零開始實現一個React：
  • 1. JSX和虛擬DOM
  • 2. 元件和生命週期
  • 3. diff演算法
  • 4. 非同步的setState
• 「react技術棧」單頁應用實踐快速入門

6.2. Vue

• 深入淺出 - vue變化偵測原理
• Vue 模板編譯原理

6.3. Redux

• 重新設計 Redux [英] ：Rematch
• 如何用 GraphQL 來替代 Redux [英]
• 解讀 Redux 的設計思路與用法
• (Redux)應用構建的三個原則 [英]

6.4. RxJS

• ReactiveX 官網 ：寶石圖真的非常形象易讀
• 響應式程式設計，是明智的選擇
• 圖解RxJS [英]
• 除錯RxJS：Tooling [英]
• 除錯RxJS：Logging [英]

7. 新技術/方向

前端領域新技術、新方向層出不窮，這裡彙總一些新技術方向；作為開發者需要多瞭解但是不要盲從

7.1. PWA

• PWA 學習與實踐系列
• Service Worker 入門簡介 [英]
• PWA 在 iOS 平臺上的特殊問題 [英]
• 在你的 PWA 中小心使用 iOS 的 meta 標籤 [英]
• 餓了麼的 PWA 升級實踐
• 離線指南
• Android 中的 WebAPKs [英]
• Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05" target="_blank" rel="nofollow,noindex">Pinterest 的 PWA 實踐 [英]
• 非同步 HTTP Cookies API [英] ：賦能Service Worker

7.2. CSS Houdini

• 認識 Houdini 與 CSS Paint API [英]
• 用 Houdini 來拯救 CSS Polyfill [英]

7.3. Web Components

• Web Components 基本概念和用法
• Web Components 指南 [英]
• Shadow DOM 使用簡介
• HTMLUnknownElement 與 HTML5 自定義元素的故事

7.4. 微前端（Micro Frontends）

• 微前端主頁 [英]
• 微前端的那些事兒
• 技術雷達之「微前端」- 將微服務理念擴充套件到前端開發

7.5. HTTP/2

• HTTP/2 幕後原理

• 全面介紹的 HTTP/2 [英]

• HTTP/2 主頁

  :

  • HTTP/2 協議 [英]
  • HPACK: HTTP/2 Header壓縮 [英]

7.6. WebAssembly

• WebAssembly 官網
• WebAssembly 現狀與實戰
• WebAssembly 系列：
  • 一、生動形象地介紹 WebAssembly
  • 二、JavaScript Just-in-time (JIT) 工作原理
  • 三、編譯器如何生成彙編
  • 四、WebAssembly 工作原理
  • 五、為什麼 WebAssembly 更快？
  • 六、WebAssembly 的現在與未來

8. 業務相關

在業務中往往還有一些與“業務無關”的場景需求 —— 不論是什麼業務幾乎都會遇到；因此，在變與不變中，我們更需要去抽象出這些問題。