基本信息
原書名：Even Faster Web Sites: Performance Best Practices for Web Developers
原出版社： O'Reilly Media
作者：Steve Souders
譯者：口碑網前端團隊
叢書名： 電子工業出版社O'Reilly系列
出版社：電子工業出版社
ISBN：9787121105449
出版日期：2010 年4月
開本：16開
頁碼：231
版次：1-1
編輯推薦
《高性能網站建設指南》姊妹篇。
作者Steve Souders是Google Web性能布道者和Yahoo！前首席性能工程師。
在本書中，Souders與8位專家分享了提升網站性能的最佳實踐和實用建議
內容簡介
本書是《高性能網站建設指南》姊妹篇。作者steve souders是google web性能布道者和yahoo！前首席性能工程師。在本書中，souders與8位專家分享了提升網站性能的最佳實踐和實用建議，主要包括：理解ajax性能，編寫高效的javascript，創建快速回響的應用程式、無阻塞載入腳本， 跨域共享資源，無損壓縮圖片大小，使用塊編碼加快網頁渲染；避免或取代iframe的方法，簡化CSS選擇符，以及其他技術。
性能是任何一個網站成功的關鍵，然而，如今日益豐富的內容和大量使用ajax的web應用程式已迫使瀏覽器達到其處理能力的極限。steve souders是googleweb'哇能布道者和前yahoo!首席性能工程師，他在本書中提供了寶貴的技術來幫助你最佳化網站性能。
souders的上一本暢銷書《高性能網站建設指南》 (high performance web sites)震驚了web開發界，它揭示了在客戶端載入一個網頁的時間大約占用了總時耗的80％。在《高性能網站建設進階指南》 (even faster web sites)這本書中，souders與另外8位專家級特約作者提供了提升網站性能的最佳實踐和實用建議，主要包括以下3個關鍵領域。
·javascript——你將獲得忠告：理解ajax性能、編寫高效的javascript、創建快速回響的應用程式、無阻塞載入腳本等。
·網路——你將學到：跨域共享資源、無損壓縮圖片大小，以及使用塊編碼加快網頁渲染。
·瀏覽器——你將發現：避免或取代iframe的方法、簡化css選擇符，以及其他技術。
對於當前的富媒體網站和web 2．0應用程式來說，速度至關重要。在本書中，你將學習如何節省寶貴的網站載入時間，使網站更快地回響用戶的請求。
作譯者
Steve Souders在Google從事網路性能和開放源碼計畫方面的工作。他是yslow(Firebug性能分析擴展)的創造者，並且擔任Velocity(O'Reilly的網路性能和業務運營會議)的聯合主席。Steve經常在會議上或者高級別公司中發言，包括微軟、亞馬遜、MySpace、LinkedIn、Facebook。
目錄
致謝 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 降級到/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
譯者序
“信息網路的擴展正在為我們的星球建立一個新的神經系統”，而Web正是我們與這個系統對接的最重要平台。現在，信息與用戶量在Web平台上呈爆炸式增長，用戶與Web界面的互動越來越複雜，會話時間也越來越長，速度已經成為Web產品使用體驗好壞和市場成敗的最重要指標之一。在Google，網頁呈現速度慢500毫秒將丟失20%的流量；在Yahoo!，慢400毫秒將丟失5%~9%的流量；在Amazon，慢100毫秒將丟失1%的交易量……反之，網站速度越快，越有利於用戶匯聚、流量增長及交易量的上升。所以作為Web開發者，我們不會滿足現狀，要讓網頁變得更快更好。
本書作者Steve Souders在他上一部震驚業界的大作《高性能網站建設指南》中告訴我們，Web的80%~90%的性能由前端決定，並為提升Web性能設定了14條規則。本書中，Souders與8位Web開發界頂級大牛通力合作，一起向我們傳授讓網站速度更快的思想和原則，以及相應的技術和工具。它是上一部作品的進階之作，如果說上一部作品使Web開發者有機會實現高性能的網站以滿足當前用戶的需要，那么本書將幫助我們立足現在更著眼於未來，以實現超出用戶期望的速度體驗。
Web的高速發展讓開發者應接不暇，開發者應該把智慧、時間和精力放在用戶最需要的地方，因此在做性能最佳化時不能盲目行動、捉小放大，需要事前有效評估找到重點，事後建立監控和保證機制，把有規律的、重複的、精確的工作交給機器去做。9位大牛把眾多的思想、原則、方法和自動化工具融匯到這本書中，讓Web開發者有機會站在巨人的肩上，藉助於全球業界的最新成果，用自己的智慧、行動和堅持開發出令人讚嘆的Web產品來。
如果你稍加留心就會發現，這兩本書副標題的變化很有趣，第一本書的副標題是“前端工程師技能精髓”，而本書的是“Web開發者性能最佳化最佳實踐”。Web性能最佳化不只是前端工程師的工作，而是需要所有Web開發者協作完成。在實際工作中，如果沒有人關注Web性能，那么，不管我們作為Web開發者的哪種角色都應該挺身而出勇於擔當，不僅要擔當建設高速網站的責任，還要擔當Web性能最佳化的布道義務，團結一切可以團結的力量。這是我們所有Web開發者的使命。在口碑網我們已經開始這樣做了，前端工程師與對此有興趣的後端工程師和產品經理一起組建了一個虛擬的Web性能最佳化團隊，在完成工作之餘，一起學習、研究、分享、布道和推動性能最佳化項目。雖然剛剛開始，但是已經有了一些令人欣喜的成果，這就是團結的力量。
本書由口碑網前端團隊的鄢學昆鳥（三七）、鄭旭東（正旭）、劉志濤（鎢龍）、崔明達（靈佑）和姜凡（展炎）協作譯成。翻譯的過程也是自我學習、套用實踐和總結提升的過程，我們深感本書的博大精深，同時也感到自己知識面的淺薄狹窄。我們把在學習和實踐本書思想及方法過程中收穫的心得和相關資料作為譯註補充在譯文中，希望會對大家有所幫助。我們深信學習本書正是學習大牛思想、提升專業技能的最好途徑之一，把它的精華最精確地傳遞給每位讀者是我們現在的想法和最大動力。
感謝博文視點引進如此高品質的圖書，這讓中國的Web開發者可以從中受益，進而為更多用戶提供更快速的Web使用體驗。除了封面上列出的譯者外，還有很多人為翻譯這本書傾注了智慧和汗水。編輯徐定翔老師，包容了我們交稿的一次次延期，正是由於他的信任、幫助、支持和耐心指導才讓我們能有這樣一次邊學習、邊成長、邊共享的寶貴經歷。編輯白愛萍老師負責譯稿的統稿編加，她的專業、仔細和辛勤工作保證了我們閱讀本書時的良好體驗。可愛的同事林枝萍（般若）、高嘉峻（伯靈）、全鑫（泉心）、聞明（阿蘇）、沙峰（善朋）、曾煥數（合沙）、王維鋒（元天）、嚴斌鋒（邦彥）、何瑩瑩（冰浠）、周煉（靈落）等，給了我們熱情的建議和細心的校對，有效地提升了本書的品質。要特別感謝淘寶網前端團隊的趙澤欣（小馬）、王保平（玉伯）和鄭葉飛（圓心）3位同學，他們在百忙之中幫我們校對重要章節，解決疑難問題。如果沒有家人和同伴的支持，是很難做好翻譯的，在此向所有關心和支持我們的朋友表示衷心的感謝！
本書中有6個章節是由以下幾位作者完成的。
Dion Almaer是Ajax社區的先驅Ajaxian com的創建人之一，目前在Mozilla領導一個新團隊研發基於Web的開發者工具（譯註1），他已為之努力多年。在這本書里他與老搭檔Ben Galbraith再次合作，無論是之前在Ajaxian還是在現在的Mozilla（譯註2），他倆一直合作得很愉快。自Gopher協定發布以來，Dion編寫過相當多的Web應用程式，經常在世界各地演講，發表了大量文章並出版過一本書。當然你也可以去閱讀他的部落格，那兒有更多內容，你甚至能了解他的生活及對世界的思考。
Douglas Crockford出生於明尼蘇達州，6個月後因無法忍受當地的嚴寒而被家人帶離該州。 Douglas自發現計算機這好玩意兒後就拋棄了原本很有前途的電視機研發職業。他愛好廣泛、博學多才，涉足過學習系統、小型商務系統、辦公自動化、遊戲、互動音樂、多媒體、移動娛樂、社會化系統和程式語言等多個領域。出人意料的是他還發明了史上最爛程式語言——Tilton。他最為人知的貢獻是發掘了JavaScript的精華部分，這非常重要，卻也讓人意想不到。他的另一重大貢獻是發現數據交換格式JSON（JavaScript Object Notation）。最近他正致力於將網路變成安全可靠的軟體分發平台，並已著手實施這一計畫。
Ben Galbraith是Mozilla開發者工具的聯合總監，也是Ajaxian com的創建人。Ben對商業和技術一直都極感興趣，6歲那年就寫出了他的第一個電腦程式，10歲開創第一個商業項目，12歲投身於IT業。他在世界範圍內開展了數百次的技術演講，組織過多場技術研討會，並與他人合著圖書超過6本。Ben的職業生涯也相當精彩豐富，從商業管理到技術工作，從CEO到CIO到CTO到首席軟體設計師，從醫療到出版到媒體到製造業到廣告到軟體產業，角色眾多、從業甚廣。現在他和妻子及5個孩子住在加州的Palo Alto。
Tony Gentilcore是Google公司的軟體工程師，Google首頁和搜尋結果頁能快速呈現在用戶面前就是他的傑作。他認為編寫Web性能工具和研究相關技術是件非常愉悅的事。Tony也是廣受歡迎的Firefox擴展Fasterfox的開發者。
Dylan Schiemann是SitePen com的CEO，也是Dojo工具包的編寫者之一，還是開放網路（Open Web）的技術和分析專家。Dojo是一個開源的用於快速構建Web站點和套用的JavaScript工具包。在他的引導下，SitePen從一個小型研發公司成長為如今業界領先的開發工具供應商，擁有眾多資深軟體工程師，為用戶提供專業的諮詢服務、一流的培訓及外包業務。Dylan致力於研發的堅定信念已使SitePen成為諸如Dojo、cometD、Direct Web Remoting (DWR)和Persevere等開拓性開源Web開發工具包和框架的主要貢獻者和創作者。在SitePen之前，他還為Renkoo、Informatica、Security FrameWorks和Vizional Technologies等公司開發過Web套用。他還是Comet Daily，LLC的合夥創始人及Dojo基金董事會成員和Aptana諮詢委員會成員。Dylan在加州大學洛杉磯分校獲物理化學碩士學位，在蒂爾大學取得數學學士學位。
Stoyan Stefanov是Yahoo！前端工程師，主要關注Web套用的性能。他也是性能擴展工具——YSlow2 0的架構設計師和Smush it圖像最佳化工具研發者之一。Stoyan同時還是演說家、作家（Packt出版社出版了他的《Object-Oriented JavaScript》） Nicole Sullivan是一位Web技術的布道者、前端性能最佳化顧問和CSS專家。她創建了開源項目——面向對象的CSS（Object-Oriented CSS），它解決了如何規劃CSS以應對成千上萬的訪問者的難題。她還與W3C合作重新設計其測試版，也是Smush it圖像最佳化工具的研發者。她對CSS、Web標準和可擴展的大型商業網站前端架構充滿激情。Nicole在世界各地的會議上發表關於性能最佳化的演講，最近的會議是The Ajax Experience、ParisWeb 和 Web Directions North。她的部落格是
Nicholas C Zakas是《Professional JavaScript for Web Developers》（第二版，Wrox出版社，中文版《JavaScript高級程式設計》）的作者，也是《Professional Ajax》（第二版，Wrox出版社，中文版《Ajax高級程式設計》）的合著作者。Nicholas是Yahoo!主頁的首席前端工程師並參與了YUI的開發。他的部落格地址是
前言
警惕（vigilant）：警覺地關注，主要是為了避免危險。
任何人閱讀了本書或前一本書《高性能網站建設指南》，都會理解網站速度緩慢的危害性：飽受挫折的用戶、負面的品牌認知、膨脹的運營開支及縮水的財務收益。我們必須不斷努力使網站更快。當我們取得進步的時候，同時也意味著開始落後了。我們必須處處留心，每一次修復Bug、增加新功能和升級系統都可能對網站的速度產生影響。我們必須時時關注，今天實現的性能提升很可能明天就會失效。因此，必須保持警惕。
守夜（Vigil）：節日的前一刻仍然保持警覺。
根據vigil的拉丁語義，守夜意味著我們應該保持警覺直到慶祝真正開始。網站的確可以變得更快，甚至飛快，我們可以為自己關心和專注所獲得的成果慶祝。這是真的！使網站速度更快是可以實現的。本書介紹的技術已經讓一些風靡全球的網站的載入時間減少了60%，它們同樣也將造福小型網站，而最終是用戶從中受益。
蜘蛛俠（vigilante）：自我任命的正義使者。
作為開發者，我們有責任去捍衛用戶的利益。你應該在自己的網站上充當性能的布道者，實施這些技術，並與同事分享這本書，為更快的用戶體驗而戰。如果你的公司沒有人專門負責性能，那么任命自己來擔當這種角色吧。性能蜘蛛俠——聽起來很不錯。
本書的組織
How This Book Is Organized
這本書是對我第一本書《高性能網站建設指南》（O'Reilly出版）的跟進。在那本書中，我為Web性能提升設定了14條規則：
l規則1：儘量減少HTTP請求。
l規則2：使用CDN。
l規則3：添加expires頭。
l規則4：採用Gzip壓縮組件。
l規則5：將樣式表放在頂部。
l規則6：將腳本放在底部。
l規則7：避免CSS表達式。
l規則8：使用外部的JavaScript和CSS。
l規則9：減少DNS查詢。
l規則10：精簡JavaScript。
l規則11：避免重定向。
媒體評論
“《高性能網站建設進階指南》，有最新的研究成果，能激發你的智慧，讓網站快如閃電。我喜歡這本書的風格——許多主題的作者都是在該領域進行過深入研究的最受尊敬的權威專家。我們團隊中每個人都需要有一本。”
——Bill Scott，Netflix總監和UI工程師
