DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> Facebook團隊關於網頁緩存的再實踐
Facebook團隊關於網頁緩存的再實踐
編輯:SEO優化集錦     

網頁緩存 網站優化 Facebook 網站性能優化

譯者前言:

在8年之前,Yahoo團隊曾經對網頁中的緩存做了比較詳盡的研究,但是隨著互聯網的高速發展,研究數據發生了一些變化。這篇文章主要是Facebook的web團隊對現在緩存情況一些數據收集和研究。包括PC和移動端資源被緩存的時間以及資源在存在的時間。網頁緩存是性能優化很重要的因素,值得一讀。

正文:

網頁加載速度是每個網站都應該重視的因素。但是往往被大家忽略。緩存是一個提升網站訪問速度非常重要的因素(因為用戶在下次訪問的時候不需要重新計算或者下載已經緩存的資源)

我們團隊(facebook web團隊)最近針對目前facebook.com沒有緩存的現狀進行了一番討論,主要問題是:在facebook,.我們每天都會發布兩個版本,怎麼樣才能令緩存更有效率?怎麼樣的緩存策略才適合我們?

在找解決方案的時候, 我們發現雅虎性能優化研究博客上已經有了一篇關於性能研究的文章。

但是令我們非常吃驚的是:20%的頁面訪問是在空緩存的情況下進行的。但是這個研究結果距離現在有8年了,那個時代剛發布IE7,jquery也剛發布第一個版本,所以我們決定重新研究一下,看現在是不是有所改善。

重新研究:

在之前的研究當中,Yahoo在服務器創建了HTTP頭設置了圖片的過期時間和上次修改時間,如果圖片沒有發生改變,就用GET請求發送給服務器一個最後修改時間的信息,如果圖片沒有修改,就返回304(沒有修改)來替換200(請求成功)。因為服務器可以記錄浏覽器請求的請求狀態,所以Yahoo用服務器日志來統計緩存的用戶數。

像那樣的研究方法一樣,我們創建了一個既能發送圖片請求也能在數據庫當中記錄日志的PHP終點。這張圖片用http頭信息來控制浏覽器的緩存和其他通過代理產生的緩存。之後在用戶請求圖片的時候記錄這些信息。

這個圖片HTTP頭信息的設置是這樣的:

網頁緩存 網站優化 Facebook 網站性能優化

但是因為一些已知的BUG,我們在IE7和IE8中把兩個屬性替換成了下面這樣:

當浏覽器發送請求給圖片時候,將會發生兩件事情:

1。因為浏覽器從來沒有打開過這張圖片,所以沒有額外的頭信息,服務器將返回一個狀態碼:200 Success 接著返回圖片數據給浏覽器,之後浏覽器會緩存文件的HTTP頭信息當中的Last-Modified(文件最後修改時間)和ETag(被請求變量的實體值)

2。浏覽器檢查if-none-match或者if-modified-since頭信息,如果之前有打開過。將會不加載圖片數據直接返回Status:304 Not Modified(沒有更新)。同時我們把Last-Moidified頭信息用$header['if-modified-since']替換掉$now(),所以每次返回的內容都將是一樣的。

現在剩下問題是我們在哪裡應用這張圖片,最後我們決定在Facebook的搜索條下面包含一個img標簽,這樣每次facebook加載的時候都會渲染這張圖片。在整個頁面重新加載的時候,資源將會根據緩存的頭信息進行加載。這將是最好的方式來測試我們的想法。

在確保endpoint可以正常記錄請求、圖片標簽可以正常訪問了之後,我們正式開始了這次研究!

研究結果:

在數周的數據收集之後,我們決定來研究一下7天最後比較有價值的數據。數據的統計結果依舊讓我們感到吃驚:依舊有25.5%的請求是空緩存的。為了讓數據看起來更清晰,我們分隔了PC和手機的統計數據,但是數據依舊差不多:PC有24.8%而手機端有26.9%是空緩存的。這個結果不太符合我們預期,所以我們更加深入的研究了這個數據。

把PC端的浏覽器分開來統計可能更加清楚:

網頁緩存 網站優化 Facebook 網站性能優化

根據上面一周的數據來看:用戶用chrome和opera緩存的幾率更大。你可能注意到你這個圖表中並沒有firefox浏覽器的數據,那是因為firefox 31版本以及更早期的版本在我們的統計中有80%的緩存概率,但是在32版本和更高的版本當中有很明顯的下降。那是因為firefox的緩存策略和我們的統計方法有點沖突(http://www.janbambas.cz/new-firefox-http-cache-enabled/),

所以我們就干脆去掉了firefox浏覽器的數據統計。

好了,現在讓我們來看看移動端的數據:

網頁緩存 網站優化 Facebook 網站性能優化

可以看到,大部分浏覽器的緩存比例是在68%和84%之間。移動平台的數據差別還是挺大的,我們想可能都是比較低端的移動設備(https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/)。除此以外數據跟桌面端還是比較相似的。

下面這個圖分別是移動端和手機端空緩存用戶所占的比例:

網頁緩存 網站優化 Facebook 網站性能優化

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved