在Web 變得越來(lái)越復(fù)雜的時(shí)代,解決Web 性能問(wèn)題正當(dāng)時(shí)。本書旨在幫助讀者創(chuàng)建更加快速的網(wǎng)站,內(nèi)容涵蓋Web 性能的基礎(chǔ)知識(shí)、性能評(píng)估工具、CSS 優(yōu)化、圖像優(yōu)化、字體優(yōu)化、JavaScript 相關(guān)的內(nèi)容、Brotli 壓縮算法、資源提示、配置緩存策略、HTTP/2,等等。
1.全面講解Web性能工具和技術(shù),讓種種Web性能問(wèn)題迎刃而解;
2.注重實(shí)戰(zhàn),結(jié)合豐富示例,助你創(chuàng)建快速靈活的網(wǎng)站,提升用戶體驗(yàn)。
對(duì)于網(wǎng)站來(lái)說(shuō),精巧的功能、時(shí)尚的設(shè)計(jì)和良好的營(yíng)銷策略固然重要,但如果訪問(wèn)者認(rèn)為網(wǎng)站速度慢,那么它依然是失敗的。由于網(wǎng)絡(luò)環(huán)境不可預(yù)測(cè),而且現(xiàn)在的網(wǎng)站比以往任何時(shí)候都龐大,所以需要通過(guò)提升速度來(lái)在競(jìng)爭(zhēng)中脫穎而出。
本書是創(chuàng)建快速網(wǎng)站的指南,指導(dǎo)你如何以正確的方式創(chuàng)建高性能網(wǎng)站。書中介紹了如何加快向用戶交付站點(diǎn)資源的速度、提高渲染速度、減少網(wǎng)站占用空間;探討了HTTP/2等能夠大幅提升網(wǎng)站速度的技術(shù);闡述了如何構(gòu)建一個(gè)自動(dòng)化的工作流以完成常見的優(yōu)化任務(wù),同時(shí)提高開發(fā)效率。
如果你是Web開發(fā)人員,想創(chuàng)建快速靈活的網(wǎng)站,或者提升已有網(wǎng)站的性能,打造更佳的用戶體驗(yàn),那么本書不失為一個(gè)理想的選擇。
杰里米·瓦格納(Jeremy Wagner)
Web性能咨詢師、Web前端開發(fā)者,在多家機(jī)構(gòu)和大公司積累了十余年經(jīng)驗(yàn)。撰寫過(guò)大量Web性能方面的圖書和文章,還經(jīng)常在各種Web開發(fā)會(huì)議上發(fā)表演講。
第 1 章 理解Web 性能 1
1.1 理解Web 性能 1
1.1.1 Web 性能和用戶體驗(yàn) 1
1.1.2 Web 瀏覽器如何與Web 服務(wù)器通信 2
1.1.3 Web 頁(yè)面如何加載 4
1.2 上手準(zhǔn)備 5
1.2.1 安裝Node.js 和Git 6
1.2.2 下載并運(yùn)行客戶的網(wǎng)站 6
1.2.3 模擬網(wǎng)絡(luò)連接 7
1.3 檢查客戶網(wǎng)站 8
1.4 優(yōu)化客戶網(wǎng)站 10
1.4.1 縮小資源 11
1.4.2 使用服務(wù)器壓縮 13
1.4.3 壓縮圖像 16
1.5 最終性能測(cè)試 18
1.6 小結(jié) 19
第 2 章 使用評(píng)估工具 20
2.1 使用Google PageSpeed Insights 進(jìn)行評(píng)估 20
2.1.1 評(píng)估網(wǎng)站性能 20
2.1.2 使用Google Analytics 進(jìn)行批量報(bào)告 23
2.2 使用基于瀏覽器的評(píng)估工具 24
2.3 檢查網(wǎng)絡(luò)請(qǐng)求 25
2.3.1 查看計(jì)時(shí)信息 25
2.3.2 查看HTTP 請(qǐng)求和響應(yīng)頭 27
2.4 渲染性能檢查工具 29
2.4.1 理解瀏覽器如何渲染網(wǎng)頁(yè) 29
2.4.2 使用Google Chrome 的Performance 面板 30
2.4.3 識(shí)別問(wèn)題事件:jank 是元兇 32
2.4.4 用JavaScript 在時(shí)間線中標(biāo)記點(diǎn) 37
2.4.5 其他瀏覽器中的渲染分析器 38
2.5 在Chrome 中對(duì)JavaScript 進(jìn)行基準(zhǔn)測(cè)試 39
2.6 模擬和監(jiān)控設(shè)備 40
2.6.1 在桌面Web 瀏覽器中模擬設(shè)備 41
2.6.2 在Android 設(shè)備上遠(yuǎn)程調(diào)試網(wǎng)站 42
2.6.3 在iOS 設(shè)備上遠(yuǎn)程調(diào)試網(wǎng)站 43
2.7 創(chuàng)建自定義網(wǎng)絡(luò)節(jié)流配置 44
2.8 小結(jié) 45
第3 章 優(yōu)化CSS 47
3.1 直入主題,保持DRY 47
3.1.1 簡(jiǎn)寫CSS 47
3.1.2 使用CSS 淺選擇器 50
3.1.3 挑選淺選擇器 51
3.1.4 LESS 和SASS 預(yù)編譯器:簡(jiǎn)單就是美 52
3.1.5 不要重復(fù)自己 53
3.1.6 實(shí)現(xiàn)DRY 53
3.1.7 使用csscss 查找冗余 54
3.1.8 分割CSS 56
3.1.9 自定義框架下載 57
3.2 移動(dòng)優(yōu)先即用戶優(yōu)先 58
3.2.1 移動(dòng)優(yōu)先與桌面優(yōu)先 58
3.2.2 Mobilegeddon 算法 61
3.2.3 使用Google 的移動(dòng)友好指南 62
3.2.4 驗(yàn)證網(wǎng)站的移動(dòng)友好性 63
3.3 對(duì)CSS 進(jìn)行性能調(diào)整 63
3.3.1 避免使用 @import 聲明 63
3.3.2 @import 串行請(qǐng)求 64
3.3.3
并行請(qǐng)求 64
3.3.4 在中放置CSS 65
3.3.5 防止無(wú)樣式內(nèi)容閃爍 65
3.3.6 提高渲染速度 66
3.3.7 使用更快的選擇器 66
3.3.8 構(gòu)建和運(yùn)行基準(zhǔn)測(cè)試 67
3.3.9 檢查基準(zhǔn)測(cè)試結(jié)果 68
3.3.10 盡可能使用flexbox 69
3.3.11 對(duì)比盒子模型和flexbox 樣式 69
3.3.12 檢查基準(zhǔn)測(cè)試結(jié)果 70
3.4 使用CSS 過(guò)渡 71
3.4.1 使用CSS 過(guò)渡 71
3.4.2 觀察CSS 過(guò)渡性能 73
3.4.3 使用will-change 屬性優(yōu)化過(guò)渡 74
3.5 小結(jié) 75
第4 章 理解關(guān)鍵CSS 76
4.1 關(guān)鍵CSS 及其解決的問(wèn)題 76
4.1.1 理解折疊 76
4.1.2 理解渲染阻塞 77
4.2 關(guān)鍵CSS 的原理 78
4.2.1 加載首屏樣式 79
4.2.2 加載首屏以外內(nèi)容的樣式 79
4.3 實(shí)現(xiàn)關(guān)鍵CSS 80
4.3.1 配置并運(yùn)行菜譜網(wǎng)站 81
4.3.2 識(shí)別和分離首屏CSS 82
4.3.3 加載首屏以外內(nèi)容的CSS 88
4.4 權(quán)衡收益 89
4.5 提升可維護(hù)性 91
4.6 多頁(yè)網(wǎng)站的注意事項(xiàng) 91
4.7 小結(jié) 92
第5 章 響應(yīng)式圖像 94
5.1 為什么要考慮圖像傳輸 94
5.2 理解圖像類型及其應(yīng)用 96
5.2.1 使用光柵圖像 96
5.2.2 使用SVG 圖像 99
5.2.3 選擇圖像格式 100
5.3 CSS 中的圖像傳輸 101
5.3.1 使用媒體查詢?cè)贑SS 中適配顯示器 101
5.3.2 通過(guò)媒體查詢適配高DPI 顯示器 104
5.3.3 在CSS 中使用SVG 背景圖像 106
5.4 在HTML 中傳輸圖像 106
5.4.1 圖像的全局max-width規(guī)則 107
5.4.2 使用srcset 107
5.4.3 使用
元素 110
5.4.4 使用Picturefill 提供polyfill支持 114
5.4.5 在HTML 中使用SVG 116
5.5 小結(jié) 117
第6 章 圖像的進(jìn)一步處理 118
6.1 使用圖像雪碧圖 118
6.1.1 準(zhǔn)備工作 119
6.1.2 生成雪碧圖 119
6.1.3 使用生成的雪碧圖 121
6.1.4 使用雪碧圖時(shí)的考量 122
6.1.5 使用Grumpicon 回退到光柵圖像雪碧圖 123
6.2 縮小圖像 124
6.2.1 使用imagemin 優(yōu)化光柵圖像 125
6.2.2 優(yōu)化SVG 圖像 129
6.3 使用WebP 編碼圖像 131
6.3.1 使用imagemin 編碼有損WebP 圖像 132
6.3.2 使用imagemin 編碼無(wú)損WebP 圖像 133
6.3.3 支持不支持WebP 的瀏覽器 134
6.4 懶加載圖像 136
6.4.1 配置標(biāo)記 137
6.4.2 編寫懶加載程序 138
6.4.3 考慮不支持JavaScript 的用戶 144
6.5 小結(jié) 146
第7 章 更快的字體 148
7.1 明智地使用字體 149
7.1.1 選擇字體和字體變體 149
7.1.2 構(gòu)建你自己的@font-face級(jí)聯(lián) 151
7.2 壓縮EOT 和TTF 字體格式 154
7.3 取字體子集 156
7.3.1 手動(dòng)生成字體子集 156
7.3.2 使用unicode-range 屬性傳輸字體子集 160
7.4 優(yōu)化字體加載 166
7.4.1 理解字體加載的問(wèn)題 166
7.4.2 使用CSS font-display屬性 168
7.4.3 使用字體加載API 169
7.4.4 使用Font Face Observer作為回退 173
7.5 小結(jié) 175
第8 章 保持JavaScript 的簡(jiǎn)潔與快速 176
8.1 影響腳本加載行為 176
8.1.1 合理放置