多乐彩大赢家|多乐彩一天开多少期

首頁>資訊中心 > 干貨分享 > 編程視角 > 一篇文章理解Web緩存

一篇文章理解Web緩存

發布時間:2018-08-25 01:29:48來源:嘉華金蛛
最近把前端緩存重新整理了一下,從整體的層面上把前端所有能用的緩存方案梳理了一遍。同時,對于http緩存,使用了表格的方案,使得原先晦澀難記的特性變得清晰明了。特記錄于此,若有什么欠缺,也望不吝指出。

1. 前端緩存概述

前端緩存主要是分為HTTP緩存和瀏覽器緩存。其中HTTP緩存是在HTTP請求傳輸時用到的緩存,主要在服務器代碼上設置;而瀏覽器緩存則主要由前端開發在前端js上進行設置。下面會分別具體描述。

wra

2. 前端緩存分類
2.1 HTTP緩存

    整體流程:HTTP緩存都是從第二次請求開始的。
    第一次請求資源時,服務器返回資源,并在respone header頭中回傳資源的緩存參數;第二次請求時,瀏覽器判斷這些請求參數,擊中強緩存就直接200,否則就把請求參數加到request header頭中傳給服務器,看是否擊中協商緩存,擊中則返回304,否則服務器會返回新的資源。

HTTP緩存分為強緩存和協議緩存,它們的區別如下:
dsvf

    200 from disk or 200 from memory :
    強緩存的200也有兩種情況:200 from disk和200 from memory。現在我沒有找到明確的文檔來描述這種區別的發生條件。知乎這個問題中提到了一些情景,可以自行取用。

2.1.1 強緩存

sfa

2.1.2 協商緩存

協商緩存都是成對出現的。
asD

2.1.3 最佳優化策略-消滅304

    最佳優化策略:因為協商緩存本身也有http請求的損耗,所以最佳優化策略是要盡可能的將靜態文件存儲為較長的時間,多利用強緩存而不是協商緩存,即消滅304。

但是給文件設置一個很長的Cacha-Control也會帶來其他的問題,最主要的問題是靜態內容更新時,用戶不能及時獲得更新的內容。這時候就要使用hash的方法對文件進行命名,通過每次更新不同的靜態文件名來消除強緩存的影響。

    Hash命名:
    http://xxx.com/main.5eas34fa.js
    http://xxx.com/main.js?5eas34fa
    http://xxx.com/5eas34fa/main.js

2.2 瀏覽器緩存
2.2.1 本地存儲小容量

Cookie主要用于用戶信息的存儲,Cookie的內容可以自動在請求的時候被傳遞給服務器。
LocalStorage的數據將一直保存在瀏覽器內,直到用戶清除瀏覽器緩存數據為止。
SessionStorage的其他屬性同LocalStorage,只不過它的生命周期同標簽頁的生命周期,當標簽頁被關閉時,SessionStorage也會被清除。
sfc

2.2.2 本地存儲大容量

WebSql和IndexDB主要用在前端有大容量存儲需求的頁面上,例如,在線編輯瀏覽器或者網頁郵箱。

wDF

2.2.3 應用緩存與PWA

應用緩存全稱為Offline Web Application,它的緩存內容被存在瀏覽器的Application Cache中。它也是一個被W3C標準廢棄的功能,主要是通過manifest文件來標注要被緩存的靜態文件清單。但是在緩存靜態文件的同時,也會默認緩存html文件。這導致頁面的更新只能通過manifest文件中的版本號來決定。而且,即使我們更新了version,用戶的第一次訪問還是會訪問到老的頁面,只有下一次再訪問才能訪問到新的頁面。所以,應用緩存只適合那種常年不變化的靜態網站。如此的不方便,也是被廢棄的重要原因。

PWA全稱是漸進式網絡應用,主要目標是實現web網站的APP式功能和展示。盡管PWA也有manifest文件,但是與應用緩存卻完全不同。不同于manifest簡單的將文件通過是否緩存進行分類,PWA用manifest構建了自己的APP骨架。另外,PWA用Service Worker來控制緩存的使用。這一塊的內容較多,在這里就不詳細展開了。

saf

2.2.4 往返緩存

往返緩存又稱為BFCache,是瀏覽器在前進后退按鈕上為了提升歷史頁面的渲染速度的一種策略。BFCache會緩存所有的DOM結構,但是問題在于,一些頁面開始時進行的上報或者請求可能會被影響。這個問題現在主要會出現在微信h5的開發中。

去除BFCache有多種方法,但不是本文的重點,想了解的同學可以看《瀏覽器往返緩存(Back/Forward cache)問題的分析與解決》
總結

本文梳理了前端所有可能涉及的緩存,希望能從整體層面建立起系統的緩存知識體系。限于篇幅,每一部分的描述都比較簡略,僅起到拋磚引玉之用。
相關熱詞搜索: web前端工程師
分享:
我要評論:

就業喜報

張*富深圳市日彤天創意品牌有限公司8500

李*霖永衡網絡8000

葉*深圳金龍集團金脈通科技有限公司12000

劉*深圳市聚一策劃公司6000

張*鵬東莞市永衡網絡科技有限公司7500

張*麗深圳市主意堂形象策劃有限公司9000

李*強瀚雅裝飾設計有限公司7500

劉*勇深圳市班緹娜服飾有限公司8000

韓*東深圳特速一元購12000

李*深深圳市家家文化傳播有限公司8500

黃*嬋深圳市伊美姿美業文化傳播有限公司9000

李*深圳市家家順8000

郭*權樂猴兒童用品13000

陳*譽米目米信息7600

李*金飛絲電子有限公司9000

申請免費線下基礎班試聽名額
姓名
電話
課程

推薦閱讀

多乐彩大赢家 重庆时时分析软件是不骗人的 天津时时彩最多多少期连号 20选5复式中奖计算器 时时1期计划软件手机下载 澳门五分彩app 秒速时时走势图计划 pc28二维码下载 江苏时时走势 深圳风采历史开奖结果 快乐时时