成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

工程化——前端靜態(tài)資源緩存策略

cheng10 / 2993人閱讀

摘要：增量更新是目前大部分團(tuán)隊(duì)采用的緩存更新方案，能讓用戶在無(wú)感知的情況獲取最新內(nèi)容。那我們需要考慮的就是如何確保加載的是最新的了，其他的靜態(tài)資源就充分利用瀏覽器緩存以減少網(wǎng)絡(luò)請(qǐng)求提高性能。

增量更新是目前大部分團(tuán)隊(duì)采用的緩存更新方案，能讓用戶在無(wú)感知的情況獲取最新內(nèi)容。具體實(shí)現(xiàn)方式通常是（一般我們通過(guò)構(gòu)建工具來(lái)實(shí)現(xiàn)，比如webpack）：

構(gòu)建產(chǎn)出文件hash(如：index.d94f83fac22c203b788c.css)

更新html文件里靜態(tài)資源的引用URL

由于其他資源是由html文件直接或間接引用才可以被加載，如果html里的靜態(tài)資源URL更新了，那請(qǐng)求的肯定就是最新資源了。那我們需要考慮的就是如何確保加載的html是最新的了，其他的靜態(tài)資源就充分利用瀏覽器緩存以減少網(wǎng)絡(luò)請(qǐng)求提高web性能。瀏覽器緩存實(shí)質(zhì)就是HTTP緩存，而HTTP緩存分為強(qiáng)緩存和協(xié)商緩存。

強(qiáng)緩存

強(qiáng)緩存不會(huì)發(fā)送請(qǐng)求，直接從瀏覽器加載資源。是否命中強(qiáng)緩存根據(jù)HTTP Response頭部Expires、Cache-Control（max-age）來(lái)判斷。

Expires通過(guò)返回一個(gè)過(guò)期時(shí)間來(lái)判斷是否過(guò)期，在此時(shí)間之前瀏覽器直接從緩存加載資源。但其缺點(diǎn)是返回的過(guò)期時(shí)間為服務(wù)器時(shí)間，而比較是同客戶端時(shí)間比較，如果服務(wù)端和客戶端存在時(shí)間誤差就不準(zhǔn)了。

max-age返回的時(shí)間過(guò)期時(shí)間跨度，比如max-age=3600告訴瀏覽器接下來(lái)的1小時(shí)內(nèi)使用緩存。這樣就解決了Expires時(shí)間誤差導(dǎo)致的問(wèn)題。

強(qiáng)緩存命中優(yōu)先判斷max-age，max-age優(yōu)先級(jí)大于Expires，判斷流程如下：

協(xié)商緩存

Etag和If-None-Match Etag的值是根據(jù)一定算法生成的字符串，用以判斷文件是否更改，類似于文件hash。在第一次訪問(wèn)時(shí)，服務(wù)會(huì)返回該文件的Etag值，在之后的訪問(wèn)通過(guò)在請(qǐng)求頭增加If-None-Match參數(shù)，把Etag的值帶過(guò)去，服務(wù)器通過(guò)比較Etag的值來(lái)判斷是否需要重新返回最新資源（200 or 304）。

Last-Modified和If-Modified-Since Last-Modified為該資源文件的最后修改時(shí)間。同樣在第一次返回，之后通過(guò)If-Modified-Since帶過(guò)去，服務(wù)器通過(guò)比較值來(lái)判斷是否需要返回最新資源。

如果 If-None-Match 和 If-Modified-Since 都有，則必須一次性都發(fā)給服務(wù)器，沒有優(yōu)先級(jí)，實(shí)際中比較ETag就夠了。如果請(qǐng)求頭里沒有，則每次都會(huì)返回最新的資源200

緩存判斷流程

為了確保html每次都是最新的，我們這里不能使用強(qiáng)緩存?？梢栽?strong>服務(wù)器（nginx、tomact）設(shè)置訪問(wèn)html文件時(shí)Cache-Control為no-cache。（這個(gè)需要在服務(wù)器配合設(shè)置，前端是處理不了的）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53761.html

相關(guān)文章

  • 利用 webpack 處理開發(fā)與線上環(huán)境靜態(tài)資源切換問(wèn)題

    摘要：但在產(chǎn)品模式下，我們非常有必要在的屬性里的里配置一個(gè)來(lái)變向的為靜態(tài)資源注入版本號(hào)，如下，以便上線之后頁(yè)面可以引入版本更新后的代碼。通過(guò)給靜態(tài)資源注入值來(lái)作為版本號(hào)的好處主要有兩個(gè)實(shí)現(xiàn)策略。 前言 webpack，作為一個(gè)處理模塊加載、資源依賴管理、構(gòu)建化的工具，已經(jīng)逐漸成為了前端工程化領(lǐng)域的新貴。其創(chuàng)造性的把每個(gè)靜態(tài)資源歸為一個(gè) module（模塊）并能被其強(qiáng)大的 loader 所加載...

    RyanHoo 評(píng)論0 收藏0

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問(wèn)題我們都知道對(duì)頁(yè)面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁(yè)面的優(yōu)化。而作為一名有追求的前端，勢(shì)必要力所能及地優(yōu)化我們前端頁(yè)面的性能。這種方式主要解決了淺談前端中的過(guò)早優(yōu)化問(wèn)題過(guò)早優(yōu)化是萬(wàn)惡之源。 優(yōu)化向：?jiǎn)雾?yè)應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁(yè)面的內(nèi)容，這就是單頁(yè)應(yīng)用。在一個(gè)單頁(yè)應(yīng)用中，往往只有一...

    Dean 評(píng)論0 收藏0

  • 如何構(gòu)建前端代碼

    摘要：首先散文件是有害處的，第一是，散文件可能沒有版本號(hào)的區(qū)分，這樣因?yàn)榫彺鎸?dǎo)致第二是散文件會(huì)嚴(yán)重拖慢性能，因?yàn)楹芏嗌⑽募粌H消耗請(qǐng)求資源，而且是在串行消耗。 基本認(rèn)識(shí) 開發(fā)環(huán)境和線上環(huán)境的區(qū)別 在很久以前，前端的部署其實(shí)比較簡(jiǎn)單，開發(fā)環(huán)境下，靜態(tài)資源往服務(wù)器上面一扔就ok了，如果考慮下優(yōu)化或者代碼保護(hù)，也只是加一個(gè)代碼壓縮和混淆。沒錯(cuò)，剛?cè)胄械臅r(shí)候我就是這么干的。。。 但是隨著前...

    jhhfft 評(píng)論0 收藏0

  • webpack4大結(jié)局：加入騰訊IM配置策略，實(shí)現(xiàn)前端工程化環(huán)境極致優(yōu)化

    摘要：或者的，都會(huì)對(duì)其進(jìn)行分析。舒適的開發(fā)體驗(yàn)，有助于提高我們的開發(fā)效率，優(yōu)化開發(fā)體驗(yàn)也至關(guān)重要組件熱刷新熱刷新自從推出熱刷新后，前端開發(fā)者在開環(huán)境下體驗(yàn)大幅提高。實(shí)現(xiàn)熱調(diào)試后，調(diào)試流程大幅縮短，和普通非直出模式調(diào)試體驗(yàn)保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的資源 不知道不...

    李增田 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<