第一部分 JavaScript基礎強化
01 一網(wǎng)打盡this，對執(zhí)行上下文說Yes　　 2
this到底指向誰 2
實戰(zhàn)例題分析 3
開放例題分析 12
總結 13
02 “老司機”也會在閉包上翻車　　 14
基本知識 14
例題分析 32
總結 35
03 我們不背誦API，只實現(xiàn)API　　 36
jQuery offset方法實現(xiàn) 36
數(shù)組reduce方法的實現(xiàn) 40
實現(xiàn)compose方法的幾種方案 45
apply、bind進階實現(xiàn) 48
總結 52
04 JavaScript高頻考點及基礎題庫　　 53
JavaScript數(shù)據(jù)類型及其判斷 53
JavaScript數(shù)據(jù)類型及其轉換 57
JavaScript函數(shù)參數(shù)傳遞 60
cannot read property of undefined問題解決方案 61
type.js源碼解讀 63
總結 65

第二部分 JavaScript語言進階
05 異步不可怕，“死記硬背”+實踐拿下　　 68
異步流程初體驗 68
紅綠燈任務控制 74
請求圖片進行預先加載 76
setTimeout相關考查 79
宏任務和微任務 82
總結 85
06 你以為我真的想讓你手寫Promise嗎　　 86
從“Promise化”一個API談起 86
Promise初見雛形 88
Promise實現(xiàn)狀態(tài)完善 91
Promise異步實現(xiàn)完善 93
Promise細節(jié)完善 97
Promise then的鏈式調(diào)用 100
鏈式調(diào)用的初步實現(xiàn) 101
鏈式調(diào)用的完善實現(xiàn) 106
Promise穿透實現(xiàn) 115
Promise靜態(tài)方法和其他方法實現(xiàn) 116
總結 120
07 面向對象和原型——永不過時的話題　　 121
實現(xiàn)new沒有那么容易 121
如何優(yōu)雅地實現(xiàn)繼承 123
jQuery中的對象思想 130
類繼承和原型繼承的區(qū)別 133
面向對象在實戰(zhàn)場景中的應用 134
總結 136
08 究竟該如何學習與時俱進的ES　　 137
添加新特性的必要性 137
學習新特性的正確“姿勢” 139
新特性可以做些什么有趣的事 141
Babel編譯對代碼做了什么 145
總結 150

第三部分 不可忽視的HTML和CSS
09 前端面試離不開的“面子工程”　 152
如何理解HTML語義化 152
BFC背后的布局問題 155
通過多種方式實現(xiàn)居中 162
總結 167
10 進擊的HTML和CSS　　 168
進擊的HTML 168
不可忽視的Web components 171
移動端HTML5注意事項總結 171
CSS變量和主題切換優(yōu)雅實現(xiàn) 174
CSS Modules理論和實戰(zhàn) 178
總結 184
11 響應式布局和Bootstrap的實現(xiàn)分析　　 185
上帝視角——響應式布局適配方案 185
真實線上適配案例分析 187
Bootstrap柵格實現(xiàn)思路 192
橫屏適配及其他細節(jié)問題 194
面試題：%相對于誰 195
深入：flex布局和傳統(tǒng)布局的性能對比 197
總結 200

第四部分 前端框架
12 觸類旁通多種框架　　 202
響應式框架基本原理 202
模板編譯原理介紹 211
發(fā)布/訂閱模式簡單應用 214
MVVM融會貫通 215
揭秘虛擬DOM 216
總結 226
13 你真的懂React嗎　　 227
神奇的JSX 227
你真的了解異步的this.setState嗎 232
原生事件和React合成事件 234
請不要再背誦diff算法了 236
element diff的那些事兒 237
加上key就一定“性能最優(yōu)”嗎 238
總結 239
14 揭秘React真諦：組件設計　　 240
單一職責沒那么簡單 240
組件通信和封裝 246
組合性是靈魂 248
副作用和（準）純組件 250
組件可測試性 254
組件命名是意識和態(tài)度問題 257
總結 258
15 揭秘React真諦：數(shù)據(jù)狀態(tài)管理　　 259
數(shù)據(jù)狀態(tài)管理之痛 259
Redux到底怎么用 262
Redux的“罪與罰” 268
我們到底需要怎樣的數(shù)據(jù)狀態(tài)管理 270
總結 272
16 React的現(xiàn)狀與未來　　 273
React現(xiàn)狀分析 273
從React Component看React發(fā)展史 274
顛覆性的React hook 277
值得關注的其他React特性 282
總結 284
17 同構應用中你所忽略的細節(jié)　　 285
打包環(huán)境區(qū)分 285
注水和脫水 287
請求認證處理 292
樣式問題處理 293
meta tags渲染 295
404處理 296
安全問題 297
性能優(yōu)化 297
總結 298
18 通過框架和類庫，我們該學會什么　　 299
React和Vue：神仙打架 299
新版本發(fā)布的思考 302
從框架再談基礎 304
總結 304

第五部分 前端工程化
19 深入淺出模塊化　　 306
模塊化簡單概念 306
模塊化發(fā)展歷程 307
ES原生時代 314
未來趨勢和思考 316
總結 318
20 webpack工程師和前端工程師　　 319
webpack到底將代碼編譯成了什么 319
webpack工作基本原理 327
探秘并編寫webpack loader 330
探秘并編寫webpack plugin 336
webpack和Rollup 341
綜合運用 342
總結 344
21 前端工程化背后的項目組織設計　　 345
大型前端項目的組織設計 345
使用Lerna實現(xiàn)monorepo 347
分析一個項目遷移案例 350
依賴關系簡介 353
復雜依賴關系分析和處理 354
使用yarn workspace管理依賴關系 356
總結 359
22 代碼規(guī)范工具及技術設計　　 360
自動化工具巡禮 360
工具背后的技術原理和設計 367
自動化規(guī)范與團隊建設 376
總結 378

第六部分 性能優(yōu)化
23 性能監(jiān)控和錯誤收集與上報　　 380
性能監(jiān)控指標 380
FMP的智能獲取算法 383
性能數(shù)據(jù)獲取 384
錯誤信息收集 390
性能數(shù)據(jù)和錯誤信息上報 401
無侵入和性能友好的方案設計 404
總結 405
24 如何解決性能優(yōu)化問題　　 406
開放例題實戰(zhàn) 406
代碼例題實戰(zhàn) 410
總結 416
25 以React為例，談談框架和性能　　 417
框架的性能到底指什么 417
React的虛擬DOM diff 418
提升React應用性能的建議 419
React性能設計亮點 426
從Vue 3.0動靜結合的Dom diff談起 427
總結 436

第七部分 編程思維和算法
26 揭秘前端設計模式　　 438
設計模式到底是什么 438
設計模式原則 439
設計模式的3大類型和23種套路 440
總結 441
27 無處不在的數(shù)據(jù)結構　　 442
數(shù)據(jù)結構和學習方法概覽 442
棧和隊列 443
鏈表 446
鏈表實現(xiàn) 448
樹 454
圖 461
散列表（哈希表） 467
散列表的實現(xiàn) 472
總結 474
28 古老又新潮的函數(shù)式　　 475
函數(shù)式和高質量函數(shù) 475
柯里化分析 479
偏函數(shù) 485
總結 488
29 那些年�？嫉那岸怂惴ā　� 489
前端和算法 489
算法的基本概念 490
V8 引擎中排序方法的奧秘和演進 491
快速排序和插入排序 491
排序的穩(wěn)定性 498
Timsort實現(xiàn) 499
實戰(zhàn) 500
算法學習 513
總結 518
30 分析一道常見面試題　　 519
題意分析 519
思路與解答 521
再談流程控制和中間件 523
總結 534

第八部分 網(wǎng)絡知識
31 緩存誰都懂，一問都發(fā)蒙　　 536
緩存概念與分類 536
流程圖 538
緩存和瀏覽器操作 539
緩存相關面試題目 539
緩存實戰(zhàn) 540
實現(xiàn)一個驗證緩存的輪子 551
總結 554
32 HTTP的深思　　 555
HTTP的誕生 555
HTTP的現(xiàn)狀和痛點 555
HTTP 2.0未來已來 557
從實時通信系統(tǒng)看HTTP發(fā)展 559
相關深度面試題目 560
總結 561
33 不可忽視的前端安全：單頁應用鑒權設計　　 562
單頁應用鑒權簡介 562
單頁應用鑒權實戰(zhàn) 565
采用Authentication cookie實現(xiàn)鑒權 567
混合使用JWT和cookie進行鑒權 568
總結 571
結束語 572