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

緩存為王

系統 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條評論
主站蜘蛛池模板: 亚洲精品国产第一综合99久久 | 五月花激情网 | 国内精品自在自线在免费 | 四虎影视884a精品国产四虎 | 亚洲成人国产 | 伊人亚洲| 精品国产成人三级在线观看 | 国产一区二区精品久久小说 | 一区二区福利视频 | 一区二区中文字幕 | 国产麻豆精品高清在线播放 | 中文字幕福利 | 久久香蕉综合精品国产 | 中文字幕色综合久久 | 欧美专区亚洲 | 亚洲精品一区二区三区在线观看 | 成年人福利网站 | 一级成人黄色片 | 91精品国产美女福到在线不卡 | 不卡一区二区在线观看 | 成人精品综合免费视频 | 欧美成人性色xxxx视频 | 伊人色视频| 激情综合五月 | 特黄aaaaaaaaa及毛片 | 日本欧美一区二区三区 | 欧美成人高清视频 | 欧美中文网 | 国产精品免费视频播放 | 欧美精品香蕉在线观看网 | 亚洲综合日韩中文字幕v在线 | 久久精品国1国二国三在 | 久久最新| 午夜骚 | 又黑又粗又硬欧美视频在线观看 | 国产一区在线视频观看 | 久青草网站 | 美女很黄很黄免费 | 日本1区2区| 伊人免费视频网 | 黄在线观看网站 |