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

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

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

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

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

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

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

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