　　網站做得再好，如果慢到無法訪問也是毫無意義的。在Google，網頁呈現速度慢500 毫秒將丟失20%的流量；在Yahoo!，慢400 毫秒將丟失5%~9%的流量；在，慢100 毫秒將丟失1%的交易量……反之，網站速度越快，越有利於用戶匯聚、流量增長及交易量的上升。而優化網站性能的方法有很多，前端優化就是一條省時省力的捷徑。
　　如果我們可以將後端響應時間縮短一半，整體響應時間隻能減少5%~10%。而如果關注前端性能，同樣是將其響應時間減少一半，則整體響應時間可以減少40%~45%。
　　《高性能網站建設指南：前端工程師技能精髓》告訴我們從“前端”入手改善網站性能簡單明瞭。在對後端大動乾戈之前，按照本書的14條“軍規”，從前端入手改善性能，會有意想不到的驚人效果。

內容簡介

　　《高性能網站建設指南：前端工程師技能精髓》結閤Web 2.0以來Web開發領域的全新形勢和特點，介紹瞭網站性能問題的現狀、産生的原因，以及改善或解決性能問題的原則、技術技巧和很好實踐。重點關注網頁的行為特徵，闡釋優化Ajax、CSS、JavaScript、Flash和圖片處理等要素的技術，全麵涵蓋瀏覽器端性能問題的方方麵麵。在《高性能網站建設指南：前端工程師技能精髓》中，作者給齣瞭14條具體的優化原則，每一條原則都配以範例佐證，並提供瞭在綫支持。全書內容豐富，主要包括減少HTTP請求、Edge Computing技術、Expires Header技術、gzip組件、CSS和JavaScript很好實踐、主頁內聯、Domain最小化、JavaScript優化、避免重定嚮的技巧、刪除重復JavaScript的技巧、關閉ETags的技巧、Ajax緩存技術和最小化技術等。

作者簡介

　　劉彥博，軟件開發工程師，目前任職於微軟（中國）有限公司，擁有近十年的軟件開發經驗和近三年的“全棧工程師”經曆，目前專注於Windows Azure相關應用開發。

精彩書評

　　★即便僅使用Steve這些規則中的20%，網站性能也會顯著提升。有瞭這本書，你的網站真的沒有任何藉口拖遝緩行瞭。
　　——Joe Hewitt，Firebug debugger開發者，Mozilla的DOM Inspector

　　★Steve Souders做瞭一件瞭不起的事情，他提煉齣一套簡明、可操作的工程步驟來改善網站性能，使這項工作不再無從下手，神秘莫測。
　　——Eric Lawrence，微軟公司Fiddler Web Debugger的開發者

　　★作為Zillow.com網站的壓力與性能測試的負責人，我一直在和團隊裏的開發員和性能維護人員談，要求他們使用Steve在本書中總結的規則。大傢都在問怎樣纔弄到這本書。我覺得對於所有的網站開發者和性能工程師而言，這本應該是必讀圖書。
　　——Nate Moch

　　★對於所有網站開發者而言，本書都是一個重要的指導手冊。Steve在書中的建議直接且有效，能讓網站運行速度得到顯著提升。
　　——Tony Chor，微軟公司Internet Explorer團隊Group Program經理

Table of contents
推薦序 xiii
前言 xv
緒言A 前端性能的重要性 1
跟蹤Web頁麵性能 1
時間花在哪兒瞭？ 3
性能黃金法則 4
緒言B HTTP概述 6
壓縮 7
條件GET請求 7
Expires 8
Keep-Alive 8
更多信息 9
第1章規則1――減少HTTP請求 10
圖片地圖 10
CSS Sprites 11
內聯圖片 13
閤並腳本和樣式錶 15
小結 16
第2章規則2――使用內容發布網絡 18
內容發布網絡 19
節省 20

第3章規則3――添加Expires頭 22
Expires頭 22
Max-Age和mod_expires 23
空緩存VS完整緩存 24
不僅僅是圖片 25
修訂文件名 27
示例 28
第4章規則4――壓縮組件 29
壓縮是如何工作的 29
壓縮什麼 30
節省 31
配置 31
代理緩存 33
邊緣情形 34
壓縮的實際效果 35
第5章規則5――將樣式錶放在頂部 37
逐步呈現 37
sleep．cgi 38
白屏 39
樣式內容的閃爍 43
前端工程師應該做什麼？ 43
第6章規則6――將腳本放在底部 45
腳本帶來的問題 45
並行下載 46
腳本阻塞下載 48
最差情況：將腳本放在頂部 49
最佳情況：將腳本放在底部 49
正確地放置 50
第7章規則7――避免CSS錶達式 51
更新錶達式 52
圍繞問題展開工作 52
小結 54

第8章規則8――使用外部JavaScript和CSS 55
內聯VS外置 55
典型的對比結果 58
主頁 58
兩全其美 59
第9章規則9――減少DNS查找 63
DNS緩存和TTL 63
瀏覽器的視角 66
減少DNS查找 68
第10章規則10――精簡JavaScript 69
精簡 69
混淆 70
節省 70
示例 72
錦上添花 73
第11章規則11――避免重定嚮 76
重定嚮的類型 76
重定嚮是如何損傷性能的 77
重定嚮之外的其他選擇 79
第12章規則12――刪除重復腳本 85
重復腳本――確有其事 85
重復腳本損傷性能 86
避免重復腳本 87
第13章規則13――配置ETag 89
ETag是什麼？ 89
ETag帶來的問題 91
Etag――用還是不用 93
現實世界中的ETag 94
第14章規則14――使Ajax可緩存 96
Web 2．0、DHTML和Ajax 96
異步與即時 98
優化Ajax請求 99
現實世界中的Ajax緩存 99

第15章析構十大網站 103
頁麵大小、響應時間、YSlow等級 103
如何進行測試 105
Amazon 107
AOL 110
CNN 114
eBay 116
Google 120
MSN 123
MySpace 127
Wikipedia 130
Yahoo! 132
YouTube 135
索引 139

前言/序言

　　O’Reilly Media, Inc.介紹
　　O’Reilly Media通過圖書、雜誌、在綫服務、調查研究和會議等方式傳播創新知識。自1978年開始，O’Reilly一直都是前沿發展的見證者和推動者。超級極客們正在開創著未來，而我們關注真正重要的技術趨勢——通過放大那些“細微的信號”來刺激社會對新科技的應用。作為技術社區中活躍的參與者，O’Reilly的發展充滿瞭對創新的倡導、創造和發揚光大。
　　O’Reilly為軟件開發人員帶來革命性的“動物書”；創建第一個商業網站（GNN）；組織瞭影響深遠的開放源代碼峰會，以至於開源軟件運動以此命名；創立瞭Make雜誌，從而成為DIY革命的主要先鋒；公司一如既往地通過多種形式締結信息與人的紐帶。O’Reilly的會議和峰會集聚瞭眾多超級極客和高瞻遠矚的商業領袖，共同描繪齣開創新産業的革命性思想。作為技術人士獲取信息的選擇，O’Reilly現在還將先鋒專傢的知識傳遞給普通的計算機用戶。無論是通過書籍齣版、在綫服務或者麵授課程，每一項O’Reilly的産品都反映瞭公司不可動搖的理念——信息是激發創新的力量。
　　業界評論
　　“O’Reilly Radar博客有口皆碑。”
　　——Wired
　　“O’Reilly憑藉一係列（真希望當初我也想到瞭）非凡想法建立瞭數百萬美元的業務。”
　　——Business 2.0
　　“O’Reilly Conference是聚集關鍵思想領袖的絕對典範。”
　　——CRN
　　“一本O’Reilly的書就代錶一個有用、有前途、需要學習的主題。”
　　——Irish Times
　　“Tim是位特立獨行的商人，他不光放眼於最長遠、最廣闊的視野並且切實地按照Yogi Berra的建議去做瞭：‘如果你在路上遇到岔路口，走小路（岔路）。’迴顧過去Tim似乎每一次都選擇瞭小路，而且有幾次都是一閃即逝的機會，盡管大路也不錯。”
　　——Linux Journal
　　譯者序
　　同樣的網絡環境，看著彆人的網站“唰”地一下就展現齣來，你是否和我一樣，心急如焚，盼望著早一點攢齣一筆錢，給服務器加點內存？或者你已經挽起袖子，開始研究數據庫優化？又或者你在暗自思量著可以把哪些設計模式或編碼技巧運用在自己的後颱代碼裏，盼望以此帶來性能上的巨幅提升？
　　哦，彆激動，很多時候事情並沒有你想象的這麼嚴重。
　　我們知道，一次Web應用程序請求，就是從瀏覽器發齣一些參數到你的服務器，然後服務器上的程序對請求進行處理，再生成瀏覽器可以識彆的內容（HTML、腳本、CSS、圖片、Flash……），最後由瀏覽器將這些內容展現給訪問者。人們將這一過程劃分為“後端”和“前端”兩個部分。
　　“後端”用於分析用戶請求、執行數據查詢並對結果進行組織，形成瀏覽器可以呈現的內容；“前端”負責將後端生成的內容通過網絡發送給客戶端瀏覽器。人的思維往往會進入一種誤區，認為“後麵的”、“背後的”東西都是神秘的、偉大的，影響力非凡。所以很多書以“某某內幕”為題，很多程序員以精通“底層開發”或“後端開發”為榮；同樣的，當網站齣現問題時，我們第一時間想到的也是如何優化“後端”。
　　本書從一開始就幫我們端正瞭在網站性能方麵的看法，帶我們走齣誤區。然後，從各個方麵通過正例和反例的對比，讓我們看到“前端”對網站性能的影響是如此巨大，而從“前端”入手改善現狀是那麼的簡單明瞭。在對後端大動乾戈之前，你的確應該按照本書的建議，首先從前端入手，改善性能，這樣必將事半功倍。
　　當然，本書最大的價值在於，作者通過一係列“步驟”詳細地闡明瞭如何通過修改前端來改善網站性能，而這些方法需要經過大量實踐纔能掌握並總結成文。我們應該感謝作者能夠將他多年來在網站性能方麵積纍下來的經驗總結成文，並以圖書的形式分享給各位讀者。而我，很榮幸能有機會將這樣好的作品帶給中國讀者。
　　感謝電子工業齣版社博文視點公司的各位朋友，謝謝你們給瞭我這樣一個機會，能把這本書帶給中國讀者；也感謝你們能夠體諒我在翻譯工作中犯下的錯誤和拖延的時間。感謝在網絡上留下技術文章的英雄們，有瞭你們的文章內容作參考，我對術語的把握更加容易瞭。在翻譯的過程中，我盡可能地仔細斟酌。但術語的使用、語言的風格等很難與原著保持精確一緻，也很難滿足所有人的口味，還望廣大讀者體諒。另外，任何一本書都可能齣現錯誤，本書也不例外。如果你發現本書有讓你不滿意的地方，或者是齣現瞭錯誤，除瞭聯係齣版社之外，還可以通過發郵件到與我聯係，或在我的博客留言，我將為大傢提供非官方的技術支持。
　　劉彥博
　　北京
　　本書贊譽
　　即便僅使用Steve這些規則中的20%，網站性能也會顯著提升。有瞭這本書，你的網站真的沒有任何藉口拖遝緩行瞭。
　　——Joe Hewitt，Firebug debugger開發者，Mozilla的DOM Inspector
　　Steve Souders做瞭一件瞭不起的事情，他提煉齣一套簡明、可操作的工程步驟來改善網站性能，使這項工作不再無從下手，神秘莫測。
　　——Eric Lawrence，微軟公司Fiddler Web Debugger的開發者
　　作為Zillow.com網站的壓力與性能測試的負責人，我一直在和團隊裏的開發員和性能維護人員談，要求他們使用Steve在本書中總結的規則。大傢都在問怎樣纔弄到這本書。我覺得對於所有的網站開發者和性能工程師而言，這本應該是必讀圖書。
　　——Nate Moch,
　　對於所有網站開發者而言，本書都是一個重要的指導手冊。Steve在書中的建議直接且有效，能讓網站運行速度得到顯著提升。
　　——Tony Chor，微軟公司Internet Explorer團隊Group Program經理
　　推薦序
　　Foreword
　　你很幸運能夠拿到這本書。更重要的是，你的網站用戶會很幸運。Steve在這本開天闢地的書中分享瞭14項技術，哪怕隻實現瞭這些技術中的很少幾項，你的網站也會立即變快。你的用戶會感謝你。
　　這是為什麼呢？作為一個前端工程師，你擁有巨大的能力和責任。你是用戶的最後一道防綫。你做齣的決定直接影響他們的體驗。我相信我們大量的工作之一就是照顧用戶並給他們所需要的——快速的網站。這本書是一個創建快樂用戶（和老闆）的工具箱。最好的結果是，一旦恰當地使用這些技術——很多情況下，這隻是一次性投入——你將長期從中獲得收益。
　　這本書將改變你進行性能優化的方式。在Steve開始為我們Yahoo!的Platform Engineering團隊研究性能之際，我還一直認為性能主要是後端問題。但他卻錶明前端問題可能消耗掉整體時間的80%。我想前端性能無非就是對圖片進行優化和堅持使用外部CSS和JavaScript，但你手中的這本書卻證明實際要做的工作遠不止這些。
　　我將他的成果應用於很多網站。發現大量已經很快的網站還可以再快將近一倍。他的方法論是可靠的，他的數據有效而且具有擴展性，他的成果是強有力的。
　　前端工程學這門學科還很年輕，但你手中的這本書將是這項技術趨於成熟的過程中的重要一步。通過創建更好和更快（也更具享受性）的界麵和體驗，我們將共同提高對Web的期望。
　　為更快的上網衝浪歡呼吧！
　　——Nate Koechley
　　高級前端工程師
　　Yahoo! User Interface（YUI）團隊，
　　平颱開發，Yahoo! Inc.
　　聖弗朗西斯科
　　前言
　　Preface
　　八年級的時候，我在曆史課上感受到工業革命的巨大威力。人們用以識彆和突破製造業瓶頸的技術迷住瞭我。在我的印象裏，最好的進步是可調整的踏闆工具，它使得身高不同的工人都能輕鬆地夠到傳送帶——一項簡單的投資提高瞭工人的效率。
　　30年過去瞭，我很樂於將本書中的最佳實踐比作19世紀的踏闆工具。這些最佳實踐加強瞭現有流程。它們需要前期投資，但開銷很小——尤其是與收益相比。而且一旦閤理地運用瞭這些改進，它們將在整個開發過程中持續提升性能。我希望你能發現，這些用於建設高性能網站的規則能夠為你和你的用戶帶來利益。