亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

緩存為王

系統 2098 0

前面我寫了一篇 快速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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦?。?!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 欧美日韩视频在线第一区 | 奇米影视亚洲狠狠色777不卡 | 毛片啪啪视频 | 日日夜夜伊人 | 亚洲精品在线播放视频 | 91精品国产高清久久久久久io | 久久成人国产精品免费 | 亚洲精品片 | 日本在线亚州精品视频在线 | 五月婷久久 | 久久性生活片 | 91视频专区 | 奇米影视久久777中文字幕 | 久久国产精品99精品国产 | 香蕉久久高清国产精品免费 | www.中文字幕在线观看 | 色爱区综合激情五月综合激情 | 欧美日韩精品一区二区在线线 | 免费看一毛一级毛片视频 | 亚洲综合五月天 | 在线欧洲成人免费视频 | 999毛片免费观看 | 米奇精品一区二区三区在线观看 | 国产精品一区二区手机看片 | 一区二区三区网站在线免费线观看 | 亚洲欧洲日产国码久在线观看 | 国产成人亚洲精品 | 91精品国产手机 | 在线一级毛片 | 国产成人高清一区二区私人 | 三级西施 | 91网红福利精品区一区二 | 骚黄视频| 91福利在线免费观看 | 国产黄色影院 | 久久久久久久亚洲精品一区 | 久草视屏 | 四虎影院www| 99国产精品久久久久久久成人热 | 国产21区| 毛片在线视频观看 |