前面我寫了一篇 快速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
中文原文： 緩存為王
請尊重版權，轉載請注明來源，多謝~~