前端性能優化--緩存

Eastboat 發布于2019-07-31 10:07 / 1203人閱讀

摘要：緩存控制設置緩存存儲的最大周期，超過這個時間緩存被認為過期單位秒。

Cache-Control

Cache-Control：緩存控制

max-age

s-maxage

private

public

no-cache

no-store

max-age

設置緩存存儲的最大周期，超過這個時間緩存被認為過期(單位秒)。與Expires相反，時間是相對于請求的時間，

優先級高于Expires

s-maxage

覆蓋max-age 或者 Expires 頭，但是僅適用于共享緩存(比如各個代理)，并且私有緩存中它被忽略

只能用于public,如CDN

優先級高于max-age

]

private

表明響應只能被單個用戶緩存，不能作為共享緩存（即代理服務器不能緩存它）,可以緩存響應內容

自己的服務器

public

表明響應可以被任何對象（包括：發送請求的客戶端，代理服務器，等等）緩存。

CDN,可以被多個用戶請求

no-cache

在釋放緩存副本之前，強制高速緩存將請求提交給原始服務器進行驗證

這個文件不管怎么樣,都會向服務器發起請求,去服務器哪邊詢問,這個文件有沒有在緩存策略里

no-store

緩存不應存儲有關客戶端請求或服務器響應的任何內容。

不會使用任何緩存策略

Expires

緩存過期時間,用來指定資源的到期時間,是服務器端的具體的時間點

告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據,而不用再次請求

max-age的優化級高于expires,當有max-age的時候,會無視expires

當在有效時間內,如果服務器端的文件已經發生改變,但是瀏覽器端無法感知

Last-Modified/If-Modified-Since

Last-Modified 是一個響應首部，其中包含源頭服務器認定的資源做出修改的日期及時間。它通常被用作一個驗證器來判斷接收到的或者存儲的資源是否彼此一致。由于精確度比 ETag 要低，所以這是一個備用機制。包含有 If-Modified-Since 或 If-Unmodified-Since 首部的條件請求會使用這個字段。

基于客戶端和服務端協商的緩存機制

Last-Modified ----response header

If-Modified-Since----request header

需要與cache-control共同使用

max-age的優先級高于Last-Modified

缺點:

某些服務端不能獲取精確的修改時間

文件修改時間改了,但文件內容卻沒有變

效果

勾上disable cache

第一次請求,狀態碼200,response header里有返回Last-Modified

不勾disable cache

刷新,狀態碼304,request header里有If-Modified-Since

因為客戶端發送過來的的Modified與服務端的Modified一樣,所以使用緩存

Etag/If-None-Match

ETagHTTP響應頭是資源的特定版本的標識符。這可以讓緩存更高效，并節省帶寬，因為如果內容沒有改變，Web服務器不需要發送完整的響應。而如果內容發生了變化，使用ETag有助于防止資源的同時更新相互覆蓋（“空中碰撞”）

文件內容的hash值

etag--response header

if-none-match -- request header

要與cache-control共同使用

效果

清掉緩存

第一次請求，服務器返回etag

可以使用緩存

再次請求，客戶端向服務器發送if-none-match

因為2個值一樣，所以返回304，讓瀏覽器讀取本地的資源

分級緩存策略

流程圖

云服務器 GPU云服務器前端性能優化前端開發性能優化緩存優化性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/43289.html

前端性能優化

摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。優化向：單頁應用多路由預渲染指南 Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

Dean 2019-08-21 18:19 評論0 收藏0
實踐中的電商前端優化

摘要：前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點，特別是針對的優化。如果你對前端性能優化有自己的想法，歡迎騷擾我。前端優化已經是一個被寫爛的題材了。雖千萬人吾往矣，這里我僅分享我的一些實踐經驗。歡迎一起交流歡迎關注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

Michael_Ding 2019-08-29 11:30 評論0 收藏0
實踐中的電商前端優化

摘要：前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點，特別是針對的優化。如果你對前端性能優化有自己的想法，歡迎騷擾我。前端優化已經是一個被寫爛的題材了。雖千萬人吾往矣，這里我僅分享我的一些實踐經驗。歡迎一起交流歡迎關注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

Dongjie_Liu 2019-08-22 10:42 評論0 收藏0
實踐中的電商前端優化

摘要：前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點，特別是針對的優化。如果你對前端性能優化有自己的想法，歡迎騷擾我。前端優化已經是一個被寫爛的題材了。雖千萬人吾往矣，這里我僅分享我的一些實踐經驗。歡迎一起交流歡迎關注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

lakeside 2019-08-01 15:53 評論0 收藏0
淺談網站性能之前端性能優化

摘要：淺談網站性能之前端性能優化性能優化的目的無非是減少用戶流量消耗，提升用戶首屏體驗，提升用戶訪問速度，讓用戶專注內容本身。前端性能優化減少請求數量基本原理在瀏覽器與服務器進行通信時，主要是通過進行通信。最近項目慢慢走上正軌，需求趨于平穩，這才想起需要對整站進行性能優化。經過一段時間的學習，結合現在項目的實際性能情況，發現確實有許多地方可以進行優化。于是就開始了我的前端性能優化之旅。以下...

Winer 2019-08-20 11:04 評論0 收藏0