破而後立 -- 看Google如何超越網頁性能優化

還是網站性能優化的話題,大家都知道YSlow34條,前陣子我分享了[url=http://limu.iteye.com/blog/755628]在Yslow 34 Rules之後 -- 網站性能優化思路和進展[/url],我将網站性能優化的思路分浏覽器和HTTP兩大塊,簡單畫了畫.主要說明我們做優化先要知道我們真正要的是什麼?肯定不隻是YSlow高分而已.

[img]http://dl.iteye.com/upload/attachment/344960/3be9520f-d6e6-352b-8948-53b88f7261b1.png[/img]

接下來分享了[url=http://limu.iteye.com/blog/765173]Facebook的BigPipe技術分析[/url],說明在Rules被預設遵守的情況下,如何求得更勁爆的優化結果?那就明确自己想要的,然後結合自己的站點精耕細作.如是才有"大水管子"這樣幾近神作的優化方案産生.

今天忍不住說說Google.當然不是說[url=http://code.google.com/speed/page-speed/]PageSpeed[/url]這個"山寨更牛掰"的YSlow.說說當網頁性能優化碰到Google這個睥睨天下的主兒會有怎樣的火花.

我們将網頁性能優化分為浏覽器和HTTP兩部分.浏覽器慢怎麼辦?HTTP慢怎麼辦?這兩個問題Google的答案是:新做個浏覽器!新制定一個網絡通信協定!破而後立,真正的突破了固有的浏覽器和HTTP範疇,可以實作的就太多了.

[b]新浏覽器Chrome[/b]:

大家會覺得,破掉了意義有多大,chrome浏覽器2年多了覆寫量又有多少?但從另一個角度看Chrome的出現最大程度的帶動了JavaScript引擎的提速.現在如果不重寫JS引擎,讓JS運作速度接近或超過Chrome,好意思Release一個浏覽器的新版本麼?記憶猶新的是在v8釋出之後,[url=http://www.cnbeta.com/articles/64083.htm]微軟Sliverlight未來的競争對手迅速從flash轉向JavaScript.[/url],這絕對是我這類Jser喜歡看到的消息.

Chrome是一個如此活躍的浏覽器,如今已經有了7的穩定版,8的測試版,9的開發版...依托這個平台Google可以不再依賴Gear這種給别人打更新檔的模式,迅速的将其想法實作.比如HTML5,比如後面介紹的幾項革新.

[b]新協定SPDY[/b]

[url=http://dev.chromium.org/spdy/spdy-whitepaper]SPDY(http://dev.chromium.org/spdy/)[/url],Google研發的新一代網絡通信協定.Google宣稱SPDY比HTTP快兩倍.SPDY的核心是一個在網絡間傳輸内容的應用層協定，其特點是即便在多重資料流傳輸時依然擁有極小的延遲，請求分優先級，可對HTTP報頭做壓縮。

多重資料流:相當于協定原生支援的[url=http://yuiblog.com/blog/2008/10/17/loading-yui/]combo[/url].很好的解決了連結過多的問題.同時也相當于原生的Streaming的支援,[url=http://limu.iteye.com/blog/765173]BigPipe[/url]和[url=http://www.ibm.com/developerworks/cn/web/wa-lo-comet/]Comet[/url]都是基于Streaming.

請求優先級:現在越來越多的頁面靠大量的外聯JS和異步Ajax支援.而目前XHR,JS和圖檔都是通過一樣的HTTP載入,特别是XHR和JSONP異步的腳本加載請求常常會和圖檔請求并發,那麼互相之間的必然存在浏覽器資源競争.在淘寶搜尋結果頁的最近一次優化的一個目标就是通過請求順序的重排,一定程度緩解頁面加載時圖檔請求對JSONP請求的嚴重影響.優化前問題在IE6下尤其明顯,4k的JSONP請求,在HTTP的接收資料階段竟然用了400ms.SPDY在協定級别優先級定義可以完美的解決這個問題.

HTTP報頭壓縮:彌補了Gzip不能壓縮HTTP頭的遺憾.

是以我們看到我們面向HTTP做的很多優化,SPDY都考慮到并提供了更好的解決方案.而SPDY是否能讓資訊在傳輸過程中被攔截,解析,過濾變得更難是另一個讓人感興趣的話題.

[b]新的視訊圖像格式WebM,WebP[/b]

[url=http://www.guao.hk/posts/vp8-open-sourced-and-google-introducing-webm-open-web-media-project.html]WebM[/url]包括:VP8：高品質的視訊編碼，以BSD式的免費授權形式提供給所有人使用.Vorbis：開源并已經被廣泛部署使用的音頻編碼.一個基于Matroska子集的視訊容器.[url=http://adactio.com/articles/1704/]HTML5通過标簽嵌套的方式讓網頁各種視訊格式之間優雅降級[/url],WebM的推廣不成問題.

[url=http://www.guao.hk/posts/google-offers-jpeg-alternative-for-faster-web.html]WebP[/url]比JPEG多壓縮40%容量的圖檔格式,與WebM同樣開源.關于WebP的推廣,我想甚至可以參照Gzip的模式,當浏覽器accept-webp的時候,server端把webp發回去.在圖檔CDN源可以在第一次接到accept-webp請求時把jpeg轉換為webp并緩存起來.

如何做網頁性能優化?Chrome,SPDY,WebM,WebP等等就是[url=http://it.sohu.com/20101026/n276518099.shtml]手握全球6.4%流量的巨頭[/url]給出的答案.肯定還有很多我還不知道,但這些已足夠激動人心..