前面我寫了一篇 快速web app的關鍵 是使用Ajax、優化Javascript和更好的緩存。
- 使用Ajax 可以減少網絡流量到只有少量的JSON請求。
- 優化Javascript (異步下載腳本、分組DOM修改、對UI進程作出讓步等)允許請求可以并行然后快速渲染。
- 更好的緩存 意味著web app的大部分資源是存儲在本地,然后并不會再有任何http請求了。
理解每種技術在哪里發揮作用很重要。使用Ajax,例如,不會讓頁面初始化加載更快(而且常常會不小心讓它更慢),但是后面的“頁面”(用戶操作) 會更爽。另一方面,優化Javascript,會讓初始頁面和后面的頁面都更快,更好的緩存則位于中間:第一次訪問不快,但后面的訪問會更快。同時,即便 在用戶關掉瀏覽器之后再一次返回你的網站時初始化頁面也會更快——這樣性能優勢要勝過瀏覽器會話(sessions)。
?
這些網站性能優化并不是互斥的——你應該都使用!但我(或者你也)想知道哪一個才有最大的效果呢?所以我進行了一次測試來測量這些不同的因素。我想要看看它們在實際網站中的效果,所以我使用了 WebPagetest ,這里我可以很方便的在Alexa排名前1000的網站中做一些測試。由于并沒有辦法讓一個網站直接“Ajax化”,所以我決定專注與網絡使用的時間。最后,我做了下面4項測試:
- 基準 ——用IE9和一個模擬的DSL連接速度(1.5Mbps下載、384Kbps上傳,50ms RTT)來運行Alexa排名前1000的網站。每個URL加載3次取中間值(基于頁面加載時間)作為最終結果。只看“第一次”(無緩存)的頁面加載。
- 快速網絡 ——除了使用一個模擬的FIOS網絡(20Mbps下載,5Mbps上行,4ms RTT)以外和基準測試一致。
- 無JavaScript ——同基準測試一樣,只是這次在 RESTful API 上使用了“noscript”選項。效果和在瀏覽器中禁用JavaScript一致。這并不是一個對“優化JavaScript”的完美替代,因為所有的 JavaScript產生的HTTP請求都被跳過了,另一方面,所有在noscript標簽里面的資源——如果有的話——又被加了進來。我們后面會對比 HTTP請求數。
- 緩存模式 ——除了在“重復模式”下瀏覽以外其它和基準測試一致。這個測試用來看在今天給到緩存頭(caching headers)的優勢的最佳情況。然而并不是任何東西都可以緩存的,所以還是會有些網絡請求發生。
哪個測試會產生最快的頁面加載時間呢?思考一下然后寫下你的猜測。我在開始測試前也猜測了一下,然后結果是我猜錯了。。。
?
結果:
這個表顯示了中間值和每個測試的window.onload時間的第95個百分位。基準測試的中間加載時間是7.65秒(95百分位是24.88)。每個優化都非常明顯的讓頁面加載快了。下面是它們的對比:
- 緩存模式是測試中最快的,3.46秒(95百分位是12.00).
- 快速網絡是第二快的,4.13秒 (95百分位是13.28).
- 無JavaScript第三,4.74秒(95百分位是15.76).
我很驚訝無JavaScript竟然不是最快的。禁用JavaScript移除在下載資源時可能發生的阻塞行為。盡管IE9中腳本和其它大部分資源一起并行下載(請看 Browserscope ),它們也會引起阻塞字體文件或者其它邊界情況。更重要地,禁用JavaScript減少了請求數量——從基準測試的90個降到59個,總請求大小也從927kb降到577kb。
快速網絡的提升也超出了我的期待。請求的數量和帶寬大小和基準測試一致,但是加載時間的中間值竟快了46%,從7.65秒降到4.13秒。這表明網絡環境(連接速度和延遲)會有明顯的影響。(難怪創建一個快速的移動網絡體驗很難。)
緩存贏得測試的關鍵是,請求數從90降到了32。有58個請求是從本地緩存讀取的——而沒有任何HTTP流量。HTTP Archive的關于
Alexa 前1000名網站的 max-age
表 顯示,59%的請求被配置了緩存(max-age > 0)。它們中的大部分有比較短的不超過10分鐘的緩存時間,但是由于“重復瀏覽”是立刻進行的,所以它們是從緩存中讀取的——所以它確實是一個最佳案例 了。90的59%是53。另外的5個請求貌似由于啟發式緩存(
heuristic caching
)而被從緩存中丟掉了。
盡管結果很意外,但我很高興緩存被證明是如此有效的讓網站更快的因素(或許也是最有效的因素)。我最近開始關注緩存。這是一個重要的開端——提高認識我們面前的謊言的機會。
?
僅僅使用今天的緩存頭部,資源請求數量就減少了64%。但也只是“重復瀏覽”是立即進行的。如果我們等待了一天,19%的緩存就過期了,又會產生 17個新的If-Modified-Since請求。貌似那5個啟發式緩存也會產生新的請求。所以我們需要換個方向讓更多的資源緩存更長的時間。然后,要 得到快速加載資源的優勢的話我們需要調查預讀資源——甚至在瀏覽器請求它們之前——的方法。
PS:表示不太懂文中的“第95個百分點”(95th percentile),求高人解答~~
?
文章譯自:
Cache is King
中文原文:
緩存為王
請尊重版權,轉載請注明來源,多謝~~
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
