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

記得年初的時候我給自己制定了一個學(xué)習(xí)計(jì)劃，現(xiàn)在回顧來看完成度還不錯。但仍有些遺憾，一些技術(shù)點(diǎn)沒有時間去好好學(xué)習(xí)。

在學(xué)習(xí)中我發(fā)現(xiàn)，像文章這樣的知識往往是碎片化的，而前端涉及到的面很多，如果不將這些知識有效梳理，則無法形成體系、相互串聯(lián)。最后有一種東懂一塊，西了解一點(diǎn)的感覺。因此，我結(jié)合工作體會抽象出了一些前端基礎(chǔ)技術(shù)能力，并將這段時間學(xué)習(xí)或產(chǎn)出的一些不錯的內(nèi)容根據(jù)這些能力進(jìn)行整理，形成了一份前端技術(shù)清單（github 地址）。

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

由于個人精力有限，一些技術(shù)點(diǎn)的歸納可能有失偏頗，或者目前并未納入進(jìn)來，因此 github 上的清單內(nèi)容 也會不斷更新。目前只包含純前端基礎(chǔ)內(nèi)容，NodeJS 、客戶端泛前端、小程序、可視化等內(nèi)容先留著坑吧。

清單內(nèi)容↓↓↓

0. 年度報(bào)告

• 2018 前端工具調(diào)查報(bào)告
• 2018 JavaScript 調(diào)查報(bào)告

1. 基礎(chǔ)拾遺

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

1.1. JavaScript

• You-Dont-Know-JS [英]
• JavaScript 基礎(chǔ)運(yùn)行機(jī)制：
  • JS 引擎、運(yùn)行時與調(diào)用棧概述 [英]
  • V8 引擎簡介 [英]
  • 內(nèi)存管理與4中常見的泄漏 [英]
• Event Loop（面試?yán)锟倳幸活} Event Loop…）：
  • 從 Event Loop 規(guī)范探究 JavaScript 異步及瀏覽器更新渲染時機(jī)
  • 異步之 Event Loop [英]
  • NodeJS 中的 Event Loop、Timers 與 process.nextTick() [英]
  • Tasks、Microtasks、Queues 與Schedules [英]
• Web Workers 及其5個常見使用場景 [英]
• 如何避免 async/await 地獄 [英]
• “回調(diào)地獄”的解決思路匯總

1.2. CSS

• You-Need-to-Know-CSS
• CSS布局指南
• CSS 中的各類換行處理方式 [英]：處理經(jīng)典的換行問題
• 瀏覽器將rem轉(zhuǎn)成px時有精度誤差怎么辦？
• 精準(zhǔn)操控的滾動體驗(yàn)，淺談新標(biāo)準(zhǔn) Scroll Snap
• 如何完美實(shí)現(xiàn)一個非button元素的按鈕 [英]
• 巧用 CSS Grid 來創(chuàng)建橫向滾動容器 [英]
• 如何處理內(nèi)聯(lián)元素中的空隙 [英]
• CSS Stacking Context 里那些鮮為人知的坑

1.3. 瀏覽器

• 瀏覽器的工作原理
• 現(xiàn)代瀏覽器內(nèi)部是如何運(yùn)行的：
  • Chrome瀏覽器概覽
  • 瀏覽時發(fā)生了什么？
  • 渲染進(jìn)程的內(nèi)部工作原理
  • compositor是如何來提高交互性能的？
• 完整的頁面生命周期 API 介紹 [英]
• 四個新的觀察者：Intersection / Mutation / Resize / Performance (Observer)
• 渲染引擎工作方式及優(yōu)化建議 [英]
• 瀏覽器內(nèi)核渲染：重建引擎
• 跨域解決方案匯總

2. 工程化與工具

軟件規(guī)模的擴(kuò)大帶來了工程化的需求，前端也不例外。隨著 NodeJS 的出現(xiàn)，前端工程師可以使用熟悉的 JS 快速開發(fā)所需的工具。工具鏈生態(tài)的繁榮也是前端圈繁榮的一個寫照。

2.1. webpack

• webpack 中的 Chunk 關(guān)系圖算法 [英]
• webpack 進(jìn)階系列文章
• 編譯優(yōu)化：
  • 如何提升大型項(xiàng)目中 webpack 的性能 ?? [英]
  • 運(yùn)行時優(yōu)化：Separating a Manifest [英]
  • 在 webpack 中使用 <link rel=”prefetch/preload”> [英]
  • 如何更好使用 webpack tree-shaking
• 關(guān)于 webpack 編譯緩存的討論：
  • mzgoddard's comment
  • [spec: webpack 5] - A module disk cache between build processes

2.2. Gulp

• Gulp 4 簡介 [英]
• 基于Gulp的多頁面應(yīng)用實(shí)踐指南

2.3. Linter

• JS Linter 進(jìn)化史
• 為何要在項(xiàng)目匯總使用 ESLint [英]

2.4. 靜態(tài)類型（Typescript/Flow）

• Typescript 總體架構(gòu) [英]
• 為什么要在 JavaScript 中進(jìn)行靜態(tài)類型檢查：
  • 第一部分
  • 第二、三部分
  • 第四部分

2.5. Babel

• Babel 用戶手冊
• Babel 插件手冊

2.6. CSS預(yù)處理與模塊化

• CSS 進(jìn)化史 [英]
• CSS 模塊化方案系列

3. 性能優(yōu)化

性能優(yōu)化其實(shí)就是在理解瀏覽器的基礎(chǔ)上“因地制宜”，因此可以配合1.3節(jié)“瀏覽器”部分進(jìn)行理解。

強(qiáng)烈推薦把 Google Web 上性能優(yōu)化 Tab 中的文章都通讀一遍，其基本涵蓋了現(xiàn)代瀏覽器中性能優(yōu)化的所有點(diǎn)，非常系統(tǒng)。下面也摘錄了其中一些個人認(rèn)為非常不錯的篇幅。

3.1. 加載性能

• PRPL 模式 [英]
• 圖片懶加載完全指南 [英]
• 使用 Intersection Observer 來懶加載圖片 [英]
• 圖片與視頻懶加載的詳細(xì)指南 [英]
• 使用 Application Shell 架構(gòu)來實(shí)現(xiàn)秒開應(yīng)用 [英]

3.2. 運(yùn)行時性能

• 避免大型、復(fù)雜的布局和布局抖動 [英]
• 什么導(dǎo)致強(qiáng)制同步布局（reflow）？ [英]
• 如何診斷強(qiáng)制同步布局 [英]
• 無線性能優(yōu)化：Composite
• 如何不擇手段提升scroll事件的性能
• 使用 passive event listener 來提高滾動流暢性 [英]
• 節(jié)流和去抖（throttle & debounce）：
  • JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析
  • underscore 函數(shù)去抖的實(shí)現(xiàn)
• requestIdleCallback - 一個強(qiáng)大而神器的 API：
  • requestIdleCallback使用入門 [英]
  • Idle Until Urgent [英]：requestIdleCallback的妙用

3.3. 前端緩存

• Web 緩存簡介：以購買牛奶的為例 [英]
• 大話前端緩存 [英]
• 緩存（一）—— 緩存總覽：從性能優(yōu)化的角度看緩存
• 緩存（二）—— 瀏覽器緩存機(jī)制：強(qiáng)緩存、協(xié)商緩存
• 緩存（三）—— 數(shù)據(jù)存儲：cookie、Storage、indexedDB

3.4. 性能調(diào)試與實(shí)踐

• 使用 Chrome DevTools 提升頁面速度 [英]：Chrome DevTools實(shí)操講解
• 了解 DevTools 中的 Resource Timing
• 淘寶新勢力周H5性能優(yōu)化實(shí)戰(zhàn)
• 優(yōu)化打包策略來提升頁面加載速度
• Chrome DevTools 中你可能不知道的調(diào)試技巧
• 前端性能測量 [英]

3.5. 性能指標(biāo)

• 以用戶為中心的前端性能指標(biāo) [英]：前端性能指標(biāo)的來龍去脈
• 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
  • 衡量用戶體驗(yàn)的新標(biāo)準(zhǔn)
• TTFB (Time To First Byte)：
  • TTFB，以及頁面加載的時間節(jié)點(diǎn)
• FID (First Input Delay)：
  • First Input Delay
• Speed Index：
  • WebPagetest: Speed Index

4. 安全

很多安全風(fēng)險(xiǎn)老生常談，但是往往到出現(xiàn)問題時，才會被重視或者意識到。

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

4.1. XSS

• 如何防止XSS攻擊？

4.2. CSRF

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

4.3. CSP

• Content Security Policy 入門教程
• Content Security Policy (CSP) [英]

4.4. HTTPS

• 圖文還原 HTTPS 原理
• 淺談有贊全站 HTTPS 推進(jìn)

4.5. 安全實(shí)錄

• About rel=noopener [英]：打開一個新頁面是如何帶來安全隱患的
• 一種新型的“釣魚”方式 [英]
• 一個媒體文件請求引發(fā)的跨站風(fēng)險(xiǎn) [英]
• Mitigating Spectre [英]： Chrome 中的跨站安全問題

5. 自動化測試

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

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

5.1. 單元測試

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

5.2. 端到端測試 (E2E)

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

5.3. 其他

• 測試你的前端代碼（集成測試篇）[英]
• 測試你的前端代碼（可視化測試篇）[英]

6. 框架與類庫

如果說基礎(chǔ)知識是道，那框架與工具可能就是術(shù)；學(xué)習(xí)與理解它們，但千萬不要成為它們的奴隸。

6.1. React

• React 底層揭秘 [英]
• 你所需要知道的 React 細(xì)節(jié)
• React Fiber 架構(gòu)
• React 16 Fiber 源碼速覽
• React 是怎樣煉成的：React早期的進(jìn)化之路
• 從零開始實(shí)現(xiàn)一個React：
  • 1. JSX和虛擬DOM
  • 2. 組件和生命周期
  • 3. diff算法
  • 4. 異步的setState
• 「react技術(shù)?！箚雾搼?yīng)用實(shí)踐快速入門

6.2. Vue

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

6.3. Redux

• 重新設(shè)計(jì) Redux [英]：Rematch
• 如何用 GraphQL 來替代 Redux [英]
• 解讀 Redux 的設(shè)計(jì)思路與用法
• (Redux)應(yīng)用構(gòu)建的三個原則 [英]

6.4. RxJS

• ReactiveX 官網(wǎng)：寶石圖真的非常形象易讀
• 響應(yīng)式編程，是明智的選擇
• 圖解RxJS [英]
• 調(diào)試RxJS：Tooling [英]
• 調(diào)試RxJS：Logging [英]

7. 新技術(shù)/方向

前端領(lǐng)域新技術(shù)、新方向?qū)映霾桓F，這里匯總一些新技術(shù)方向；作為開發(fā)者需要多了解但是不要盲從

7.1. PWA

• PWA 學(xué)習(xí)與實(shí)踐系列
• Service Worker 入門簡介 [英]
• PWA 在 iOS 平臺上的特殊問題 [英]
• 在你的 PWA 中小心使用 iOS 的 meta 標(biāo)簽 [英]
• 餓了么的 PWA 升級實(shí)踐
• 離線指南
• Android 中的 WebAPKs [英]
• Pinterest 的 PWA 實(shí)踐 [英]
• 異步 HTTP Cookies API [英]：賦能Service Worker

7.2. CSS Houdini

• 認(rèn)識 Houdini 與 CSS Paint API [英]
• 用 Houdini 來拯救 CSS Polyfill [英]

7.3. Web Components

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

7.4. 微前端（Micro Frontends）

• 微前端主頁 [英]
• 微前端的那些事兒
• 技術(shù)雷達(dá)之「微前端」- 將微服務(wù)理念擴(kuò)展到前端開發(fā)

7.5. HTTP/2

• HTTP/2 幕后原理
• 全面介紹的 HTTP/2 [英]
• HTTP/2 主頁:
  • HTTP/2 協(xié)議 [英]
  • HPACK: HTTP/2 Header壓縮 [英]

7.6. WebAssembly

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

8. 業(yè)務(wù)相關(guān)

在業(yè)務(wù)中往往還有一些與“業(yè)務(wù)無關(guān)”的場景需求，不論是什么業(yè)務(wù)幾乎都會遇到；因此，在變與不變中，我們更需要去抽象出這些問題。

8.1. 數(shù)據(jù)打點(diǎn)上報(bào)

• 如何精確統(tǒng)計(jì)頁面停留時長
• 揭開JS無埋點(diǎn)技術(shù)的神秘面紗

8.2. 前端監(jiān)控

• 前端異常監(jiān)控解決方案研究
• 監(jiān)控平臺前端SDK開發(fā)實(shí)踐
• 把前端監(jiān)控做到極致
• 前端監(jiān)控系統(tǒng)探索總結(jié)

8.3. A/B測試

• Twitter的A/B測試實(shí)踐：
  • 一、為什么要測試以及測試的意義
  • 二、技術(shù)概述
  • 三、檢測和避免 A/B Test中 bucket不平衡問題
  • 四、A/B Test中使用多個控制的啟示
• Netflix A/B Test 實(shí)驗(yàn)平臺實(shí)踐 [英]
• 指導(dǎo)方法
  • 實(shí)驗(yàn)中容易遇到的七種問題 [英]
  • 實(shí)驗(yàn)的七個準(zhǔn)則 [英]
  • 小流量如何進(jìn)行AB測試
• 案例分享
  • 大眾點(diǎn)評AB測試框架Gemini
  • 新浪新聞客戶端AB測試與灰度發(fā)布
  • 天貓App A/B測試實(shí)踐
• 工具
  • AB測試樣本數(shù)量計(jì)算器
  • AB測試結(jié)果有效性分析工具

8.4. “服務(wù)端推”

• 各類“服務(wù)器推”技術(shù)原理與實(shí)例
• 長連接/websocket/SSE等主流服務(wù)器推送技術(shù)比較
• Comet：基于 HTTP 長連接的“服務(wù)器推”技術(shù)
• 深入 WebSockets、HTTP/2 SSE [英]
• WebSocket 應(yīng)用安全問題分析

8.5. 動效

• 動畫設(shè)計(jì)的12個原則?? [英]
• 貝塞爾曲線掃盲
• 動畫：從 AE 到 Web
• 最全最好用的動效落地方法：
  • 基礎(chǔ)知識
  • 落地方式

9. 不歸類的好文

開卷有益。

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