webkit的主資源與派生資源

咱們使用瀏覽器上網時，首先會在地址欄輸入一個網址，瀏覽器會依據網址向服務器發送資源請求，服務器解析請求，並將相關數據資源傳回給瀏覽器，這些數據資源包括Page的描述文檔、圖片、Javascript腳本、CSS等。此後，瀏覽器引擎會對數據進行解碼、解析、排版、繪製等操做，最終呈現出完整的頁面。

前端性能優化中，減小HTTP請求能夠提升頁面的響應速度。

瀏覽器在第一次訪問頁面時向服務器請求資源，並緩存起來，下次再訪問時會判斷在緩存中是否已有該資源且有沒有更新過，若是已有該資源且未更新過，則直接從瀏覽器緩存中讀取。原理：經過HTTP 請求頭中的 If-Modified-Since（If-No-Match） 和響應頭中的Last-Modified（ETag）來實現，HTTP請求把 If-Modified-Since（If-No-Match）傳給服務器，服務器將其與Last-Modified（ETag）對比，若相同，則文件沒有被改動過，則返回304，直接瀏覽器緩存中讀取資源便可。

問題：雖然該方法減小了已緩存資源的下載時間，但仍然發起了一次http請求。

解決：已緩存資源再也不發起http請求，即HTTP的Expires和Cache-Control。對一個網站而言，CSS、JavaScript、圖片等靜態資源更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都須要的，若是將這些文件緩存在瀏覽器中，能夠極好的改善性能。經過設置http頭中的cache-control和expires的屬性，可設定瀏覽器緩存，將靜態內容設爲永不過時，或者很長時間後才過時。

 

一、Cache-Control

Cache-Control屬性是在服務器端配置的，不一樣的服務器有不一樣的配置，apache、nginx、IIS、tomcat等配置都不盡相同。

以Apache爲例，在http.conf中作以下配置：

 

<filesMatch 」.(jpg|jpeg|png|gif|ico)$」>
    Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch 」.(css|js)$」>
    Header set Cache Control max-age=2628000,public
</filesMatch>

問題：瀏覽器緩存的資源，若又想更新資源，如何實現？

解決：經過修改該資源的名稱來實現。修改了資源名稱，瀏覽器會當作不一樣的資源。

 

二、Expires

Expires屬性也是在服務端配置的，具體的配置也根據服務器而定。

問題：可能存在客戶端時間跟服務端時間不一致的問題。

解決：建議Expires結合Cache-Control一塊兒使用。

 

三、測試實例：

1) 未使用expires和cache-control的測試demo：

打開網址：http://stevesouders.com/hpws/expiresoff.php (發送請求了，返回的是304)

2) 使用expires和cache-control的測試demo：

打開網址：http://stevesouders.com/hpws/expireson.php(連請求都沒有發送)

在過去，Webkit資源分紅兩類，一類是主資源，好比HTML頁面，或者下載項，一類是派生資源，好比HTML頁面中內嵌的圖片或者腳本、樣式表連接，分別對應代碼中兩個類：MainResourceLoader和SubresourceLoader。這兩類資源的加載過程很有不一樣，好比對資源加載失敗的處理，主資源下載失敗會有報錯提示，而派生資源如圖片下載失敗，每每只顯示一個佔位符。因此網絡加載模塊分別設計了MainResourceLoader和SubresourceLoader來處理它們。它們的公共基類ResourceLoader主要完成兩種資源加載都須要進行的操做，如在資源加載過程當中，反饋加載狀態的回調等。

WebCore 把要加載的資源分紅兩類，一類是主資源，好比 HTML 頁面，或者下載項，一類是派生資源，好比 HTML 頁面中內嵌的圖片或者腳本連接。這兩類資源對於回調的處理有很大的不一樣，好比，一樣是下載失敗，主資源可能須要向用戶報錯，派生資源好比頁面中的一張圖下載失敗，可能就是圖不顯示或者顯示代替說明文字而已，不向用戶報錯。所以有了 MainResourceLoader 和 SubresourceLoader 之分。

WebCore 把要加載的資源分紅兩類，一類是主資源，好比 HTML 頁面，或者下載項，一類是派生資源，好比 HTML 頁面中內嵌的圖片或者腳本連接。這兩類資源對於回調的處理有很大的不一樣，好比，一樣是下載失敗，主資源可能須要向用戶報錯，派生資源好比頁面中的一張圖下載失敗，可能就是圖不顯示或者顯示代替說明文字而已，不向用戶報錯。所以有了 MainResourceLoader 和 SubresourceLoader 之分。它們的公共基類 ResourceLoader 則完成一些兩種資源下載都須要完成的操做，好比經過回調將加載進程告知上層應用。

主資源的加載是馬上發起的，而派生資源則可能會爲了優化網絡，在隊列中等待( 這裏的馬上發起是 loader 層面的，不是 Network 層面的 ) 。 ResourceScheduler 這個類就是用來管理資源加載的調度。主要調度對象就是派生資源，會根據 host 來影響資源加載的前後順序。

主資源和派生資源的加載還有一個區別，主資源目前是沒有緩存的，而派生資源是有緩存機制的。這裏的緩存指的是 Resouce Cache ，用於保存原始數據（好比CSS ， JS 等），以及解碼過的圖片數據，經過 Resource Cache 能夠節省網絡請求和圖片解碼的時候。不一樣於 Page Cache ， Page Cache 存的是 DOM 樹和 Render 樹的數據結構，用來在前進後退的時候快速顯示頁面。

注：自從WebKit有了PageCache（主資源也能夠緩存）的功能之後。WebKit資源加載已經不區分MainResourceLoader和SubresourceLoader，統一由CachedResourceLoader加載資源，而區分主資源和派生資源則是經過CachedResource類裏面Type類型：

enum Type {

MainResource,

ImageResource,

CSSStyleSheet,

Script,

FontResource,

RawResource

};

能夠看到加載主資源的時候，Type類型就爲MainResource。因爲目前咱們使用的WebKit代碼已經使用了比較新的代碼，因此本章後面介紹的流程都與過去的流程不同了。

正如概述所說，比較新的WebKit代碼主資源已經加入了緩存機制，因此統一由CachedResourceLoader加載資源。

WebKit派生資源包含的類型主要以下：

Javascript腳本（CachedScript）；

CSS樣式文本（CachedCSSStyleSheet）；

圖片（CachedImage）；

字體（CachedFont）；

XSL樣式表（CachedXSLStyleSheet）；

能夠說除了主資源剩下的網絡資源都是派生資源。派生資源的WebKit中都有對應的類實現，它們有着共同的基類（CachedResource），下面是類圖：

WebKit在加載主資源後，主資源會被解碼，而後進行解析，生成DOM樹。在解析的過程當中，若是遇到派生資源的標籤，會建立相應的HTMLElement類。

由memoryCache和diskCache產生的瀏覽器緩存機制的思考

 

今天在作項目的優化的時候，使用chrome開發者工具的network發現了細節：

雖然這兩個看起來都是從緩存中讀取，但仍是有一些不同的！

webkit資源的分類

webkit的資源分類主要分爲兩大類：主資源和派生資源

http狀態碼

200 from memory cache

不訪問服務器，直接讀緩存，從內存中讀取緩存。此時的數據時緩存到內存中的，當kill進程後，也就是瀏覽器關閉之後，數據將不存在。

可是這種方式只能緩存派生資源。

200 from disk cache

不訪問服務器，直接讀緩存，從磁盤中讀取緩存，當kill進程時，數據仍是存在。

這種方式也只能緩存派生資源

304 Not Modified

訪問服務器，發現數據沒有
更新，服務器返回此狀態碼。而後從緩存中讀取數據。

可是這裏有困惑，怎麼判斷from memory cache仍是304

三級緩存原理

1. 先去內存看，若是有，直接加載
2. 若是內存沒有，擇取硬盤獲取，若是有直接加載
3. 若是硬盤也沒有，那麼就進行網絡請求
4. 加載到的資源緩存到硬盤和內存

因此咱們能夠來解釋這個現象

圖片爲例：

訪問-> 200 -> 退出瀏覽器
再進來-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

http header

max-age

web中的文件被用戶訪問(請求)後的存活時間,是個相對的值,相對Request_time(請求時間)

Expires

Expires指定的時間根據服務器配置可能有兩種：

1. 文件最後訪問時間
2. 文件絕對修改時間

若是max-age和Expires同時存在，則被Cache-Control的max-age覆蓋

last-modified

WEB 服務器認爲對象的最後修改時間，好比文件的最後修改時間，動態頁面的最後產生時間

ETag

對象（好比URL）的標誌值，就一個對象而言，文件被修改，Etag也會修改

Cache-Control

簡單理解，強緩存

最後結論

見圖片（來源自網絡）

cache control：max-age=0 表示 須要向服務器端發送請求，provisional headers are shown 表示向服務器的請求被瀏覽器攔截了，並無發送請求

連接： https://www.jianshu.com/p/444f3b7fcc63 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。