前端性能揭秘

定　價：￥100.00

作　者：	佘錦鑫（當(dāng)軒）
出版社：	電子工業(yè)出版社
叢編項：
標(biāo)　簽：	暫缺

購買這本書可以去

ISBN：	9787121442407	出版時間：	2022-09-01	包裝：	平裝-膠訂
開本：	16開	頁數(shù)：		字?jǐn)?shù)：

內(nèi)容簡介

　　本書主要介紹用于指導(dǎo)前端性能優(yōu)化工作的通用優(yōu)化方法，從網(wǎng)絡(luò)、瀏覽器、構(gòu)建工具、跨端技術(shù)和CDN 等方面介紹不同技術(shù)、系統(tǒng)對性能的影響，同時幫助讀者了解如何有效優(yōu)化性能。本書從性能的度量、分析和實驗這三個方面開始介紹。首先介紹性能優(yōu)化的一些通用方法，然后將性能作為一個切面幫助讀者了解與前端技術(shù)棧和性能有關(guān)的知識。從這個切面觀察，這些系統(tǒng)的工作原理等知識被賦予了另外一層意義，通過這種聯(lián)系把工作原理真正運用到工作中，在性能優(yōu)化方面發(fā)揮重要作用。本書面向的讀者為具有一定經(jīng)驗的 Web 開發(fā)工程師，以及對前端開發(fā)或 Web 開發(fā)有一定了解的開發(fā)人員。同時，假定讀者能夠進(jìn)行簡單的網(wǎng)頁開發(fā)，并且具備相關(guān)的基礎(chǔ)知識。

作者簡介

　　佘錦鑫，花名當(dāng)軒。畢業(yè)于江南大學(xué)理學(xué)院，阿里巴巴前前端技術(shù)專家，曾負(fù)責(zé)阿里巴巴國際站性能優(yōu)化，講師、開源愛好者?，F(xiàn)就職于網(wǎng)易云音樂，對Web性能、跨端、可視化搭建等領(lǐng)域有較深入的理解。

圖書目錄

第 1 篇從 Vite 起步
第 1 章從實踐開始 ··························· 2
1.1 Hello World ···························· 2
1.2 現(xiàn)實開發(fā)的例子 ······················· 7
1.3 小結(jié) ································· 15
第 2 篇性能優(yōu)化方法論
第 2 章度量 ································· 18
2.1 科學(xué)的方法 ·························· 19
2.2 初識 Performance API ··············· 21
2.3 均值、分位數(shù)和秒開率 ············· 23
2.4 度量首屏 ···························· 27
2.5 度量流暢度 ·························· 30
2.6 Core Web Vitals ····················· 34
2.6 小結(jié) ·································· 41
第 3 章分析 ································· 42
3.1 分析方法 ···························· 43
3.2 常用的過程指標(biāo) ····················· 48
3.3 Performance API 詳解 ··············· 51
3.4 分階段性能分析 ···················· 58
3.5 小結(jié) ································· 59
第 4 章實驗 ································· 60
4.1 優(yōu)化不是照搬軍規(guī) ·················· 61
4.2 用實驗驗證優(yōu)化 ···················· 63
4.3 用實驗改進(jìn)優(yōu)化 ···················· 69
4.4 小結(jié) ································· 71
第 5 章工具 ································· 72
5.1 DevTools ···························· 73
5.2 WebPageTest ························ 81
5.3 小結(jié) ································· 87
第 3 篇網(wǎng)絡(luò)協(xié)議與性能
第 6 章 TTFB 為什么這么長 ··············· 90
6.1 TTFB 的合理值 ····················· 91
6.2 如何優(yōu)化 TTFB ····················· 95
6.3 小結(jié) ·································· 99
第 7 章建立連接為什么這么慢 ·········· 100
7.1 建立連接應(yīng)該耗時多久 ············ 101
7.2 如何優(yōu)化建立連接的耗時 ········· 103
7.3 小結(jié) ································ 105
第 8 章 Fetch 之前瀏覽器在干什么 ····· 106
8.1 重定向 ······························ 107
8.2 瀏覽器打開耗時 ··················· 112
8.3 如何優(yōu)化 beforeFetch 耗時 ········ 114
8.4 小結(jié) ································ 117
第 9 章 HTTPS 協(xié)議比 HTTP 協(xié)議
9.1 HTTPS 協(xié)議為什么安全 ··········· 119
9.2 HTTPS 協(xié)議如何吊銷證書 ········· 125
9.3 HTTPS 協(xié)議更慢嗎 ················ 129
9.4 小結(jié) ································· 130
第 10 章 HTTP/2、HTTP/3 和性能 ······ 131
10.1 HTTP/2 和性能 ···················· 131
10.2 為什么還需要 HTTP/3 ············ 144
10.3 小結(jié) ······························· 148
第 11 章壓縮和緩存 ······················ 150
11.1 傳輸速度和壓縮速度如何兼得 ···· 151
11.2 HTTP 緩存什么時候會失效 ······ 154
11.3 小結(jié) ······························· 157
第 4 篇瀏覽器與性能
第 12 章瀏覽器和性能 ···················· 160
12.1 第一次渲染時都發(fā)生了什么 ····· 161
12.2 為什么 DOM 操作很慢 ··········· 168
12.3 小結(jié) ······························· 172
第 13 章異步任務(wù)和性能 ················· 173
13.1 事件循環(huán)機制 ····················· 174
13.2 宏任務(wù)和微任務(wù) ·················· 176
13.3 Promise 的 polyfill 性能 ··········· 178
13.4 requestAnimationFrame ··········· 180
13.5 小結(jié) ······························· 181
第 14 章內(nèi)存為什么會影響性能 ········· 182
14.1 內(nèi)存 ······························· 182
14.2 內(nèi)存泄漏 ·························· 188
14.3 小結(jié) ······························· 191
第 15 章使用 ServiceWorker 改善
15.1 ServiceWorker 概述 ··············· 194
15.2 使用 ServiceWorker 進(jìn)行緩存 ···· 196
15.3 API 提前加載 ····················· 204
15.4 ServiceWorker 冷啟動 ············ 205
15.5 小結(jié) ······························· 207
第 16 章字體對性能的影響 ·············· 208
16.1 字體導(dǎo)致的布局偏移 ············· 208
16.2 如何避免字體帶來的布局偏移 ···· 210
16.3 小結(jié) ······························· 214
第 5 篇前端工程與性能
第 17 章構(gòu)建工具和性能 ················· 218
17.1 為什么需要打包 ·················· 219
17.2 構(gòu)建工具可以做什么 ············· 226
17.3 小結(jié) ······························· 237
第 18 章服務(wù)器端渲染和性能 ··········· 239
18.1 SSR 和同構(gòu) ······················· 241
18.2 SSR 的性能優(yōu)化 ·················· 241
18.3 小結(jié) ······························· 246
第 6 篇跨端技術(shù)與 CDN
第 19 章 WebView 和性能 ················ 248
19.1 WebView 和 Native 的區(qū)別 ······· 249
19.2 WebView 的通信成本 ············ 254
19.3 React Native 的懶加載有何
19.4 React Native 如何減小打包
19.5 API 并行請求 ····················· 271
19.6 小結(jié) ······························· 274
第 20 章 CDN 和性能 ····················· 275
20.1 什么是 CDN ······················· 275
20.2 如何提升緩存命中率 ············· 278
20.3 動態(tài)加速 ·························· 281
20.4 自動 polyfill ······················· 284
20.5 邊緣計算和性能 ·················· 288
20.6 小結(jié) ······························· 291