Steve Souders現在Google工作,負責Web性能和開源組織。他是Firebug的性能分析擴展YSlow的創建者,也是O’Reilly Web性能與運作會議Velocity的聯閤主席。Steve經常在技術會議和諸如Microsoft、Amazon、MySpace、
LinkedIn和Facebook這樣的知名高科技公司發錶演講。
特約作者:
Dion Almaer, Douglas Crockford,
Ben Galbraith, Tony Gentilcore,
Dylan Schiemann, Stoyan
Stefanov, Nicole Sullivan, and
Nicholas C. Zakas
緻謝 I
前言 III
第1章:理解Ajax性能 1
1.1 權衡 1
1.2 優化原則 2
1.3 Ajax 4
1.4 瀏覽器 4
1.5 哇! 5
1.6 JavaScript 6
1.7 總結 6
第2章:創建快速響應的Web應用 7
2.1 怎樣纔算足夠快 9
2.2 測量延遲時間 10
2.2.1 當延遲變得很嚴重時 12
2.3 綫程處理 12
2.4 確保響應速度 13
2.4.1 Web Workers 14
2.4.2 Gears 14
2.4.3 定時器 16
2.4.4 內存使用對響應時間的影響 17
2.4.5 虛擬內存 18
2.4.6 內存問題的疑難解答 18
2.5 總結 19
第3章:拆分初始化負載 21
3.1 全部加載 21
3.2 通過拆分來節省下載量 22
3.3 尋找拆分 23
3.4 未定義標識符和競爭狀態 24
3.5 個案研究:Google日曆 25
第4章:無阻塞加載腳本 27
4.1 腳本阻塞並行下載 27
4.2 讓腳本運行得更好 29
4.2.1 XHR Eval 29
4.2.2 XHR注入 31
4.2.3 Script in Iframe 31
4.2.4 Script DOM Element 32
4.2.5 Script Defer 32
4.2.6 document.write Script Tag 33
4.3 瀏覽器忙指示器 33
4.4 確保(或避免)按順序執行 35
4.5 匯總結果 36
4.6 最佳方案 38
第5章:整閤異步腳本 41
5.1 代碼示例:menu.js 42
5.2 競爭狀態 44
5.3 異步加載腳本時保持執行順序 45
5.3.1 技術1:硬編碼迴調(Hardcoded Callback) 46
5.3.2 技術2:Window Onload 47
5.3.3 技術3:定時器(Timer) 48
5.3.4 技術4:Script Onload 49
5.3.5 技術5:降級使用script標簽(Degrading Script Tags) 50
5.4 多個外部腳本 52
5.4.1 Managed XHR 52
5.4.2 DOM Element和Doc Write 56
5.5 綜閤解決方案 59
5.5.1 單個腳本 59
5.5.2 多個腳本 60
5.6 現實互聯網中的異步加載 63
5.6.1 Google分析和Dojo 63
5.6.2 YUI Loader 65
第6章:布置行內腳本 69
6.1 行內腳本阻塞並行下載 69
6.1.1 把行內腳本移至底部 70
6.1.2 異步啓動執行腳本 71
6.1.3 使用script的defer屬性 73
6.2 保持CSS和JavaScript的執行順序 73
6.3 風險:把行內腳本放置在樣式錶之後 74
6.3.1 大部分下載都不阻塞行內腳本 74
6.3.2 樣式錶阻塞行內腳本 75
6.3.3 問題確曾發生 77
第7章:編寫高效的JavaScript 79
7.1 管理作用域 79
7.1.1 使用局部變量 81
7.1.2 增長作用域鏈 83
7.2 高效的數據存取 85
7.3 流控製 88
7.3.1 快速條件判斷 89
7.3.2 快速循環 93
7.4 字符串優化 99
7.4.1 字符串連接 99
7.4.2 裁剪字符串 100
7.5 避免運行時間過長的腳本 102
7.5.1 使用定時器掛起 103
7.5.2 用於掛起的定時器模式 105
7.6 總結 107
第8章:可伸縮的Comet 109
8.1 Comet工作原理 109
8.2 傳輸技術 111
8.2.1 輪詢 111
8.2.2 長輪詢 112
8.2.3 永久幀 113
8.2.4 XHR流 115
8.2.5 傳輸方式的前景 116
8.3 跨域 116
8.4 在應用程序上的執行效果 118
8.4.1 連接管理 118
8.4.2 測量性能 119
8.4.3 協議 119
8.5 總結 120
第9章:超越Gzip壓縮 121
9.1 這為什麼很重要 121
9.2 問題的根源 123
9.2.1 快速迴顧 123
9.2.2 罪魁禍首 123
9.2.3 流行的烏龜竊聽者實例 124
9.3 如何幫助這些用戶 124
9.3.1 設計目標:最小化未壓縮文件的尺寸 125
9.3.2 引導用戶 129
9.3.3 對Gzip的支持進行直接探測 130
第10章:圖像優化 133
10.1 兩步實現簡單圖像優化 134
10.2 圖像格式 135
10.2.1 背景 135
10.2.2 不同圖像格式的特性 137
10.2.3 PNG的更多資料 139
10.3 自動無損圖像優化 141
10.3.1 優化PNG格式的圖像 142
10.3.2 剝離JPEG的元數據 143
10.3.3 將GIF轉換成PNG 144
10.3.4 優化GIF動畫 144
10.3.5 Smush.it 145
10.3.6 使用漸進JPEG格式來存儲大圖像 145
10.4 Alpha透明:避免使用AlphaImageLoader 146
10.4.1 Alpha透明度的效果 147
10.4.2 AlphaImageLoader 149
10.4.3 AlphaImageLoader的問題 150
10.4.4 漸進增強的PNG8 Alpha透明 151
10.5 優化Sprite 153
10.5.1 超級Sprite VS.模塊化Sprite 154
10.5.2 高度優化的CSS Sprite 155
10.6 其他圖像優化方法 155
10.6.1 避免對圖像進行縮放 155
10.6.2 優化生成的圖像 156
10.6.3 Favicons 157
10.6.4 Apple觸摸圖標 158
10.7 總結 159
第11章:劃分主域 161
11.1 關鍵路徑 161
11.2 誰在劃分主域 163
11.3 降級到HTTP/1.0 165
11.4 域劃分的擴展話題 168
11.4.1 IP地址和主機名 168
11.4.2 多少個域 168
11.4.3 如何劃分資源 168
11.4.4 新型瀏覽器 169
第12章:盡早刷新文檔的輸齣 171
12.1 刷新文檔頭部的輸齣 171
12.2 輸齣緩衝 173
12.3 塊編碼 175
12.4 刷新輸齣和Gzip壓縮 176
12.5 其他障礙 177
12.6 刷新輸齣時的域阻塞 178
12.7 瀏覽器:最後的障礙 178
12.8 不藉助PHP進行刷新輸齣 179
12.9 刷新輸齣問題清單 180
第13章:少用iframe 181
13.1 開銷最高的DOM元素 181
13.2 iframe阻塞onload事件 182
13.3 使用iframe並行下載 184
13.3.1 腳本位於iframe之前 184
13.3.2 樣式錶位於iframe之前 185
13.3.3 樣式錶位於iframe之後 186
13.4 每個主機名的連接 187
13.4.1 iframe中的連接共享 187
13.4.2 跨標簽頁和窗口的連接共享 188
13.5 總結使用iframe的開銷 190
第14章:簡化CSS選擇符 191
14.1 選擇符的類型 191
14.1.1 ID選擇符 192
14.1.2 類選擇符 193
14.1.3 類型選擇符 193
14.1.4 相鄰兄弟選擇符 193
14.1.5 子選擇符 193
14.1.6 後代選擇符 193
14.1.7 通配選擇符 194
14.1.8 屬性選擇符 194
14.1.9 僞類和僞元素 194
14.2 高效CSS選擇符的關鍵 194
14.2.1 最右邊優先 195
14.2.2 編寫高效的CSS選擇符 195
14.3 CSS選擇符性能 197
14.3.1 復雜的選擇符影響性能(有時) 197
14.3.2 應避免使用的CSS選擇符 200
14.3.3 迴流時間 201
14.4 在現實中測量CSS選擇符 202
附錄:性能工具 205
索引 221
· · · · · · (
收起)
性能是任何一個網站成功的關鍵,然而,如今日益豐富的內容和大量使用Ajax的Web應用程序已迫使瀏覽器達到其處理能力的極限。Steve Souders是Google Web性能布道者和前Yahoo!首席性能工程師,他在本書中提供瞭寶貴的技術來幫助你優化網站性能。
Souders的上一本暢銷書《高性能網站建設指南》(High Performance Web Sites)震驚瞭Web開發界,它揭示瞭在客戶端加載一個網頁的時間大約占用瞭總時耗的80%。在《高性能網站建設進階指南》(Even Faster Web Sites)這本書中,Souders與另外8位專傢級特約作者提供瞭提升網站性能的最佳實踐和實用建議,主要包括以下3個關鍵領域:
• JavaScript——你將獲得忠告:理解Ajax性能、編寫高效的JavaScript、創建快速響應的應用程序、無阻塞加載腳本等。
• 網絡——你將學到:跨域共享資源、無損壓縮圖片大小,以及使用塊編碼加快網頁渲染。
• 瀏覽器——你將發現:避免或取代iframe的方法、簡化CSS選擇符,以及其他技術。
對於當前的富媒體網站和Web 2.0應用程序來說,速度至關重要。在本書中,你將學習如何節省寶貴的網站加載時間,使其更快地響應用戶的請求。