Nginx配置前端http緩存的實(shí)現(xiàn)
在構(gòu)建高性能的網(wǎng)站或Web應(yīng)用程序時(shí),優(yōu)化前端資源的加載速度是至關(guān)重要的。一個(gè)有效的方法是利用HTTP緩存機(jī)制,通過緩存靜態(tài)資源來減少網(wǎng)絡(luò)請求,降低服務(wù)器負(fù)載,并提升用戶體驗(yàn)。本文將介紹如何使用Nginx配置前端HTTP緩存,以加速網(wǎng)站的加載速度。
什么是HTTP緩存?
HTTP緩存是一種在客戶端(瀏覽器)和服務(wù)器之間緩存HTTP響應(yīng)的機(jī)制。當(dāng)瀏覽器首次請求一個(gè)資源時(shí),服務(wù)器會返回響應(yīng),并在響應(yīng)中包含緩存指令。這些緩存指令告訴瀏覽器如何處理該資源以及何時(shí)再次請求該資源。
Nginx緩存基礎(chǔ)
在Nginx中,緩存是通過proxy_cache_path和proxy_cache指令來配置的。proxy_cache_path定義了緩存的存儲路徑和相關(guān)參數(shù),而proxy_cache指令則用于指定哪些請求應(yīng)該被緩存。
Nginx中的緩存機(jī)制
Nginx提供了兩種主要的緩存機(jī)制:代理緩存和瀏覽器緩存。代理緩存是指Nginx作為代理服務(wù)器,將請求的響應(yīng)存儲在自身的緩存中,當(dāng)再次收到相同請求時(shí),可以直接從緩存中提供響應(yīng)。而瀏覽器緩存則是通過設(shè)置HTTP響應(yīng)頭來指示瀏覽器存儲資源副本。
配置Nginx實(shí)現(xiàn)前端HTTP緩存
server { # 其他配置項(xiàng)... location ~* .(html)$ { access_log off; add_header Cache-Control max-age=no-cache; } location ~* .(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ { access_log off; add_header Cache-Control max-age=360000; } # 其他資源類型的配置... }
在上述配置中,我們使用location指令結(jié)合正則表達(dá)式匹配不同類型的資源。對于以.html結(jié)尾的資源,我們設(shè)置了Cache-Control頭部為max-age=no-cache,這告訴瀏覽器不要緩存該資源。而對于以.css、.js、.png等結(jié)尾的資源,我們設(shè)置了Cache-Control頭部為max-age=360000,這表示瀏覽器可以緩存該資源,并在360000秒(約為100小時(shí))后再次請求。
通過這樣的配置,可以根據(jù)不同的資源類型靈活地控制緩存策略,以滿足網(wǎng)站的需求。
下面對Cache-Control中的這兩個(gè)參數(shù)進(jìn)行分析一下:
add_header Cache-Control max-age=no-cache; 的含義:html文件不設(shè)置強(qiáng)制緩存時(shí)間,協(xié)商緩存,使用 Last-Modified。no-cache 會發(fā)起往返通信來驗(yàn)證緩存的響應(yīng),但如果資源未發(fā)生變化,則不會下載,返回304。
add_header Cache-Control max-age=360000; 的含義給上面匹配后綴的文件設(shè)置強(qiáng)制緩存,且緩存的時(shí)間是360000秒,第一次訪問的時(shí)候,從服務(wù)器請求,當(dāng)除了第一次以外,再次刷新瀏覽器,會從瀏覽器緩存讀取,那么強(qiáng)制緩存一般是從內(nèi)存里面先讀取,如果內(nèi)存沒有,再從硬盤讀取。
緩存時(shí)間的選擇
緩存時(shí)間的選擇取決于資源的更新頻率。對于不經(jīng)常變動(dòng)的資源,如庫文件或圖標(biāo),可以設(shè)置較長的緩存時(shí)間。而對于經(jīng)常更新的資源,如HTML頁面,可能需要設(shè)置較短的緩存時(shí)間或不緩存。
瀏覽器中關(guān)于Cache的3屬性:
1. Cache-Control:
設(shè)置相對過期時(shí)間, max-age指明以秒為單位的緩存時(shí)間. 若對靜態(tài)資源只緩存一次, 可以設(shè)置max-age的值為315360000000 (一萬年). 比如對于提交的訂單,為了防止瀏覽器回退重新提交,可以使用Cache-Control之no-store絕對禁止緩存,即便瀏覽器回退依然請求的是服務(wù)器,進(jìn)而判斷訂單的狀態(tài)給出相應(yīng)的提示信息!
Http協(xié)議的cache-control的常見取值及其組合釋義:
no-cache: 數(shù)據(jù)內(nèi)容不能被緩存, 每次請求都重新訪問服務(wù)器, 若有max-age, 則緩存期間不訪問服務(wù)器.
no-store: 不僅不能緩存, 連暫存也不可以(即: 臨時(shí)文件夾中不能暫存該資源).
private(默認(rèn)): 只能在瀏覽器中緩存, 只有在第一次請求的時(shí)候才訪問服務(wù)器, 若有max-age, 則緩存期間不訪問服務(wù)器.
public: 可以被任何緩存區(qū)緩存, 如: 瀏覽器、服務(wù)器、代理服務(wù)器等.
max-age: 相對過期時(shí)間, 即以秒為單位的緩存時(shí)間.
no-cache, private: 打開新窗口時(shí)候重新訪問服務(wù)器, 若設(shè)置max-age, 則緩存期間不訪問服務(wù)器.
- private, 正數(shù)的max-age: 后退時(shí)候不會訪問服務(wù)器.
- no-cache, 正數(shù)的max-age: 后退時(shí)會訪問服務(wù)器.
2. Expires:
設(shè)置以分鐘為單位的絕對過期時(shí)間, 優(yōu)先級比Cache-Control低, 同時(shí)設(shè)置Expires和Cache-Control則后者生效. 也就是說要注意一點(diǎn): Cache-Control的優(yōu)先級高于Expires
expires起到控制頁面緩存的作用,合理配置expires可以減少很多服務(wù)器的請求, expires的配置可以在http段中或者server段中或者location段中. 比如控制圖片等過期時(shí)間為30天, 可以配置如下:
location ~ .(gif|jpg|jpeg|png|bmp|ico)$ { root /var/www/img/`;` expires 30d; } 再比如: location ~ .(wma|wmv|asf|mp3|mmf|zip|rar|swf|flv)$ { root /var/www/upload/`;` expires max; }
3. Last-Modified:
該資源的最后修改時(shí)間, 在瀏覽器下一次請求資源時(shí), 瀏覽器將先發(fā)送一個(gè)請求到服務(wù)器上, 并附上If-Unmodified-Since頭來說明瀏覽器所緩存資源的最后修改時(shí)間, 如果服務(wù)器發(fā)現(xiàn)沒有修改, 則直接返回304(Not Modified)回應(yīng)信息給瀏覽器(內(nèi)容很少), 如果服務(wù)器對比時(shí)間發(fā)現(xiàn)修改了, 則照常返回所請求的資源.
需要注意:
- Last-Modified屬性通常和Expires或Cache-Control屬性配合使用, 因?yàn)榧词篂g覽器設(shè)置緩存, 當(dāng)用戶點(diǎn)擊”刷新”按鈕時(shí), 瀏覽器會忽略緩存繼續(xù)向服務(wù)器發(fā)送請求, 這時(shí)Last-Modified將能夠很好的減小回應(yīng)開銷.
- ETag將返回給瀏覽器一個(gè)資源ID, 如果有了新版本則正常發(fā)送并附上新ID, 否則返回304, 但是在服務(wù)器集群情況下, 每個(gè)服務(wù)器將返回不同的ID, 因此不建議使用ETag.
以上描述的客戶端瀏覽器緩存是指存儲位置在客戶端瀏覽器, 但是對客戶端瀏覽器緩存的實(shí)際設(shè)置工作是在服務(wù)器上的資源中完成的. 雖然上面介紹了有關(guān)于客戶端瀏覽器緩存的屬性, 但是實(shí)際上對這些屬性的設(shè)置工作都需要在服務(wù)器的資源中做設(shè)置. 通常有兩種操作手段對瀏覽器緩存進(jìn)行設(shè)置, 一個(gè)是通過頁面指令聲明來設(shè)置, 另外一個(gè)是通過編程方式來設(shè)置.
下面是相關(guān)頁面設(shè)置Cache-Control頭信息的幾個(gè)簡單配置:
例一:
if ($request_uri ~* "^/$|^/search/.+/|^/company/.+/"`) {` add_header Cache-Control max-age=3600; }
個(gè)人理解的max-age意思是:客戶端本地的緩存,在配置的生存時(shí)間內(nèi)的,客戶端可以直接使用,超出生存時(shí)間的,到服務(wù)器上取新數(shù)據(jù)。當(dāng)然這些還要看客戶端瀏覽器的設(shè)置。
例二:
location ~ .*.(css|js|swf|php|htm|html )$ { add_header Cache-Control no-store; }
例三:
location ~ .*.(js|css)$ { expires 10d; }
例四: 將html結(jié)尾的請求加上no-cache
location / { access_log /data/nginx/log/xxx`.log api;` root /home/www/html`;` if ($request_filename ~ .*.(htm|html)$) { add_header Cache-Control no-cache; } }
注意事項(xiàng)
確保緩存策略不適用于所有資源。例如,對于用戶個(gè)人信息或動(dòng)態(tài)內(nèi)容,應(yīng)該始終設(shè)置為不緩存。
使用ETag或Last-Modified頭部可以進(jìn)一步提高緩存效率,這些頭部可以幫助瀏覽器識別資源的更新情況。
結(jié)論
通過合理配置Nginx的客戶端緩存策略,我們可以有效地提升前端資源的加載速度,減少服務(wù)器負(fù)載,從而提升整個(gè)Web應(yīng)用的性能,可以顯著提高Web應(yīng)用的性能和用戶體驗(yàn)。在配置緩存時(shí),我們需要根據(jù)資源的更新頻率和重要性來調(diào)整緩存時(shí)間,確保用戶總是獲取到最新的內(nèi)容,同時(shí)減少不必要的服務(wù)器請求。通過細(xì)致的配置和優(yōu)化,Nginx可以成為提升Web應(yīng)用性能的強(qiáng)大工具。
到此這篇關(guān)于Ningx配置前端http緩存的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Ningx配置http緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Nginx代理到https地址忽略證書驗(yàn)證配置的實(shí)現(xiàn)
在特定情況下,Nginx代理到HTTPS地址可能需要忽略證書驗(yàn)證,本文就來介紹一下如何實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09nginx?http?499錯(cuò)誤碼詳解以及解決辦法
HTTP狀態(tài)碼出現(xiàn)499錯(cuò)誤有多種情況,499錯(cuò)誤是什么?這篇文章主要給大家介紹了關(guān)于nginx?http?499錯(cuò)誤碼以及解決辦法的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Nginx基礎(chǔ)location語法及功能配置實(shí)例
這篇文章主要為大家介紹了Nginx基礎(chǔ)location語法及功能以及配置實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-03-03nginx部署后css、js、圖片等樣式不加載問題的兩種解決方案
這篇文章主要介紹了nginx部署后css、js、圖片等樣式不加載問題的兩種解決方案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12