頂級網站技術長高度：前端工程進階大師指南

侯策

曾先後就職於法國ENGIE集團、百度等知名互聯網企業，具有豐富的開發經驗和團隊管理經驗。曾擔任GIAC全球互聯網架構大會演講嘉賓，FDCon2019中國前端開發者千人峰會演講嘉賓。

第一部分
JavaScript 基礎強化

01 一網打盡this，對執行上下文說Yes
this 到底指向誰
實戰例題分析
開放例題分析
歸納

02 「老司機」也會在閉包上翻車
基礎
例題分析
歸納

03 我們不背誦API，只實現API
jQuery offset 方法實現
陣列reduce 方法的實現
實現compose 方法的幾種方案 
apply、bind 進階實現
歸納

04 JavaScript 高頻考點及基礎題庫
JavaScript 資料類型及其判斷
JavaScript 資料類型及其轉換
JavaScript 函數參數傳遞 
cannot read property of undefined
問題解決方案
type.js 原始程式解讀
歸納

第二部分
JavaScript 語言進階

05 非同步不可怕，「死記硬背」+ 實作拿下
非同步流程初體驗
紅綠燈任務控制
請求圖片進行預先載入
setTimeout 相關考驗
巨任務和微任務
歸納

06 你以為我真的想讓你手寫Promise 嗎
從「Promise 化」一個API 談起
Promise 初見雛形 
Promise 實現狀態增強
Promise 非同步實現增強 
Promise 細節增強 
Promise then 的鏈式呼叫 
鏈式呼叫的初步實現
鏈式呼叫的增強實現
Promise 穿透實現
Promise 靜態方法和其他方法實現
歸納
07 物件導向和原型——永不過時的話題
實現new 沒有那麼容易 
如何優雅地實現繼承
jQuery 中的物件思想 
類別繼承和原型繼承的區別
物件導向在實戰場景中的應用
歸納

08 究竟該如何學習與時俱進的ES
增加新特性的必要性
學習新特性的正確「姿勢」
新特性可以做些什麼有趣的事
Babel 編譯對程式做了什麼 
歸納

第三部分
不可忽視的HTML 和CSS

09 前端面試離不開的「面子工程」
如何了解HTML 語義化
BFC 背後的版面配置問題 
透過多種方式實現置中
歸納

10 進擊的HTML 和CSS
進擊的HTML 
不可忽視的Web components 
行動端HTML5 注意事項歸納 
CSS 變數和主題切換優雅實現 
CSS Modules 理論和實戰 
歸納

11 響應式版面配置和Bootstrap的實現分析
上帝角度—響應式版面配置轉換方案
真實線上轉換案例分析
Bootstrap 光柵實現想法 
橫向螢幕轉換及其他細節問題
面試題：% 相對於誰
深入：flex 版面配置和傳統版面配置的效能比較
歸納

第四部分
前端架構

12 觸類旁通多種架構
響應式架構基本原理
範本編譯原理介紹
發佈/ 訂閱模式簡單應用
MVVM 融會貫通
揭秘虛擬DOM
歸納

13 你真的懂React 嗎
神奇的JSX 
你真的了解非同步的this.setState嗎
原生事件和React 合成事件 
請不要再背誦diff 演算法了 
element diff 的那些事 
加上key 就一定「效能最佳」嗎 
歸納

14 揭秘React 真諦：元件設計
單一職責沒那麼簡單
元件通訊和封裝
組合性是靈魂
副作用和（準）純元件
元件可測試性
元件命名是意識和態度問題
歸納

15 揭秘React 真諦：資料狀態管理
資料狀態管理之痛
Redux 到底怎麼用 
Redux 的「罪與罰」 
我們到底需要怎樣的資料狀態管理
歸納

16 React 的現狀與未來
React 現狀分析
從React Component 看React 發展史
顛覆性的React hook 
值得關注的其他React 特性 
歸納

17 同構應用中你所忽略的細節
包裝環境區分
注水和脫水
請求認證處理
樣式問題處理
meta tags 繪製 
404 處理
安全問題
效能最佳化
歸納

18 透過架構和類別庫，我們該學會什麼
React 和Vue：神仙打架 
新版本發佈的思考
從架構再談基礎
歸納

第五部分
前端專案化

19 深入淺出模組化
模組化簡單概念
模組化發展歷程
ES 原生時代
未來趨勢和思考
歸納

20 webpack 工程師和前端工程師
webpack 到底將程式編譯成了什麼
webpack 工作基本原理 
探秘並撰寫webpack loader 
探秘並撰寫webpack plugin 
webpack 和Rollup
綜合運用
歸納

21 前端專案化背後的專案小組織設計
大型前端專案的組織設計
使用Lerna 實現monorepo 
分析一個專案遷移案例
依賴關係簡介
複雜依賴關係分析和處理
使用yarn workspace 管理依賴關係
歸納

22 程式標準工具及技術設計
自動化工具巡禮
工具背後的技術原理和設計
自動化標準與團隊建設
歸納

第六部分
效能最佳化

23 效能監控和錯誤收集與上報效能監控指標
FMP 的智慧獲取演算法
效能資料取得
錯誤訊息收集
效能資料和錯誤訊息上報
無侵入和效能人性化的方案設計
歸納

24 如何解決效能最佳化問題
開放例題實戰
程式例題實戰
歸納

25 以React 為例，談談架構和效能
架構的效能到底指什麼
React 的虛擬DOM diff
提升React 應用效能的建議
React 效能設計亮點
從Vue 3.0 動靜結合的Dom diff談起
歸納

第七部分
程式設計思維和演算法

26 揭秘前端設計模式
設計模式到底是什麼.
設計模式原則
設計模式的3 大類型和23種策略
歸納

27 無處不在的資料結構
資料結構和學習方法概覽
堆疊和佇列
鏈結串列
鏈結串列實現
樹
圖
雜湊表
雜湊表的實現
歸納

28 古老又新潮的函數式
函數式和高品質函數
柯里化分析
偏函數
歸納

29 那些年常考的前端演算法
前端和演算法
演算法的基本概念
V8 引擎中排序方法的奧秘和演進
快速排序和插入排序
排序的穩定性
Timsort 實現
實戰
演算法學習
歸納

30 分析一道常見面試題
題意分析
想法與解答
再談流程控制和中介軟體
歸納

第八部分
網路知識

31 快取誰都懂，一問都發呆
快取概念與分類
流程圖
快取和瀏覽器操作
快取相關面試題目
快取實戰
實現一個驗證快取的輪子
歸納

32 HTTP 的深思
HTTP 的誕生
HTTP 的現狀和痛點
HTTP 2.0 的未來已經到來 
從即時通訊系統看HTTP 發展
相關深度面試題目
歸納

33 不可忽視的前端安全：單頁應用驗證設計
單頁應用驗證簡介
單頁應用驗證實戰
採用Authentication cookie實現驗證
混合使用JWT 和cookie進行驗證
歸納

A 結束語
融入社區
自我修養
寫在最後