資訊專欄INFORMATION COLUMN
摘要：增量更新是目前大部分團隊采用的緩存更新方案，能讓用戶在無感知的情況獲取最新內(nèi)容。那我們需要考慮的就是如何確保加載的是最新的了，其他的靜態(tài)資源就充分利用瀏覽器緩存以減少網(wǎng)絡請求提高性能。
增量更新是目前大部分團隊采用的緩存更新方案，能讓用戶在無感知的情況獲取最新內(nèi)容。具體實現(xiàn)方式通常是（一般我們通過構(gòu)建工具來實現(xiàn)，比如webpack）：
構(gòu)建產(chǎn)出文件hash(如：index.d94f83fac22c203b788c.css)
更新html文件里靜態(tài)資源的引用URL
由于其他資源是由html文件直接或間接引用才可以被加載，如果html里的靜態(tài)資源URL更新了，那請求的肯定就是最新資源了。那我們需要考慮的就是如何確保加載的html是最新的了，其他的靜態(tài)資源就充分利用瀏覽器緩存以減少網(wǎng)絡請求提高web性能。瀏覽器緩存實質(zhì)就是HTTP緩存，而HTTP緩存分為強緩存和協(xié)商緩存。
強緩存強緩存不會發(fā)送請求，直接從瀏覽器加載資源。是否命中強緩存根據(jù)HTTP Response頭部Expires、Cache-Control（max-age）來判斷。
Expires通過返回一個過期時間來判斷是否過期，在此時間之前瀏覽器直接從緩存加載資源。但其缺點是返回的過期時間為服務器時間，而比較是同客戶端時間比較，如果服務端和客戶端存在時間誤差就不準了。
max-age返回的時間過期時間跨度，比如max-age=3600告訴瀏覽器接下來的1小時內(nèi)使用緩存。這樣就解決了Expires時間誤差導致的問題。
強緩存命中優(yōu)先判斷max-age，max-age優(yōu)先級大于Expires，判斷流程如下：
Etag和If-None-Match Etag的值是根據(jù)一定算法生成的字符串，用以判斷文件是否更改，類似于文件hash。在第一次訪問時，服務會返回該文件的Etag值，在之后的訪問通過在請求頭增加If-None-Match參數(shù)，把Etag的值帶過去，服務器通過比較Etag的值來判斷是否需要重新返回最新資源（200 or 304）。
Last-Modified和If-Modified-Since Last-Modified為該資源文件的最后修改時間。同樣在第一次返回，之后通過If-Modified-Since帶過去，服務器通過比較值來判斷是否需要返回最新資源。
如果 If-None-Match 和 If-Modified-Since 都有，則必須一次性都發(fā)給服務器，沒有優(yōu)先級，實際中比較ETag就夠了。如果請求頭里沒有，則每次都會返回最新的資源200
緩存判斷流程為了確保html每次都是最新的，我們這里不能使用強緩存。可以在服務器（nginx、tomact）設置訪問html文件時Cache-Control為no-cache。（這個需要在服務器配合設置，前端是處理不了的）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53761.html
摘要：但在產(chǎn)品模式下，我們非常有必要在的屬性里的里配置一個來變向的為靜態(tài)資源注入版本號，如下，以便上線之后頁面可以引入版本更新后的代碼。通過給靜態(tài)資源注入值來作為版本號的好處主要有兩個實現(xiàn)策略。 前言 webpack，作為一個處理模塊加載、資源依賴管理、構(gòu)建化的工具，已經(jīng)逐漸成為了前端工程化領(lǐng)域的新貴。其創(chuàng)造性的把每個靜態(tài)資源歸為一個 module（模塊）并能被其強大的 loader 所加載...
摘要：端優(yōu)談談關(guān)于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發(fā)送，從而達到對頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應用多路由預渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應用。在一個單頁應用中，往往只有一...
摘要：首先散文件是有害處的，第一是，散文件可能沒有版本號的區(qū)分，這樣因為緩存導致第二是散文件會嚴重拖慢性能，因為很多散文件不僅消耗請求資源，而且是在串行消耗。 基本認識 開發(fā)環(huán)境和線上環(huán)境的區(qū)別 在很久以前，前端的部署其實比較簡單，開發(fā)環(huán)境下，靜態(tài)資源往服務器上面一扔就ok了，如果考慮下優(yōu)化或者代碼保護，也只是加一個代碼壓縮和混淆。沒錯，剛?cè)胄械臅r候我就是這么干的。。。 但是隨著前...
摘要：或者的，都會對其進行分析。舒適的開發(fā)體驗，有助于提高我們的開發(fā)效率，優(yōu)化開發(fā)體驗也至關(guān)重要組件熱刷新熱刷新自從推出熱刷新后，前端開發(fā)者在開環(huán)境下體驗大幅提高。實現(xiàn)熱調(diào)試后，調(diào)試流程大幅縮短，和普通非直出模式調(diào)試體驗保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的資源 不知道不...
閱讀 3040·2023-04-26 00:49
閱讀 3719·2021-09-29 09:45
閱讀 964·2019-08-29 18:47
閱讀 2738·2019-08-29 18:37
閱讀 2723·2019-08-29 16:37
閱讀 3286·2019-08-29 13:24
閱讀 1773·2019-08-27 10:56
閱讀 2344·2019-08-26 11:42
