快捷導(dǎo)航

前端加載訪問(wèn)速度優(yōu)化詳細(xì)指南(Nginx)

更新時(shí)間：2024年06月27日 11:08:29 作者：呼啦啦呼啦啦啦啦啦啦

在前端開(kāi)發(fā)中,優(yōu)化頁(yè)面加載速度成為了開(kāi)發(fā)者的一項(xiàng)重要任務(wù),下面這篇文章主要給大家介紹了關(guān)于前端加載訪問(wèn)速度優(yōu)化(Nginx)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. gzip壓縮

往nginx.conf 的 http內(nèi)容段落中加入

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

釋義如下：
這是用來(lái)配置 gzip 壓縮的。gzip 是一種用于壓縮文件的壓縮程序，在 Web 開(kāi)發(fā)中被廣泛應(yīng)用，主要用于壓縮 Web 應(yīng)用的靜態(tài)資源以減少傳輸流量，提高網(wǎng)頁(yè)的加載速度。

gzip on;：?jiǎn)⒂?nbsp;gzip 壓縮。
gzip_min_length 1k;：指定壓縮文件的最小長(zhǎng)度，只有文件大小超過(guò) 1KB 時(shí)才啟用壓縮。
gzip_comp_level 9;：指定壓縮級(jí)別。級(jí)別越高，壓縮效率越高，但會(huì)占用更多的 CPU 資源和時(shí)間。一般建議將級(jí)別設(shè)置為 6-9 之間。（這里根據(jù)你的服務(wù)器來(lái)定）
gzip_types：指定需要壓縮的文件類型。在這里，配置文件將 text、application 和 image 類型的文件壓縮。一般來(lái)說(shuō)，壓縮的文件類型應(yīng)該是純文本格式或可壓縮的二進(jìn)制文件。
gzip_vary on;：使用 Vary 頭來(lái)指示代理服務(wù)器或?yàn)g覽器緩存已壓縮的版本。這樣，更高效的壓縮格式可以分別緩存，并在請(qǐng)求時(shí)正確地使用。
gzip_disable "MSIE [1-6]\.";：禁用 gzip 壓縮的瀏覽器，例如早期版本的 Internet Explorer。這些瀏覽器對(duì)于壓縮格式的支持很差，因此禁用壓縮可以避免出現(xiàn)問(wèn)題。（這一步避免版本低瀏覽器訪問(wèn)網(wǎng)頁(yè)出現(xiàn)問(wèn)題）

2. 優(yōu)化 keepalive 連接

keepalive_timeout 65;
keepalive_requests 100;

釋義如下：

這兩個(gè)配置參數(shù)是用來(lái)設(shè)置服務(wù)器的 keepalive 功能的。

keepalive_timeout: 這個(gè)參數(shù)指定了一個(gè)已經(jīng)建立的連接在沒(méi)有活動(dòng)（無(wú)數(shù)據(jù)傳輸）時(shí)保持的時(shí)間長(zhǎng)度。對(duì)于每個(gè)連接，如果超過(guò) keepalive_timeout 時(shí)間沒(méi)有數(shù)據(jù)傳輸，則服務(wù)器會(huì)關(guān)閉該連接。默認(rèn)值通常為 75 秒。較小的值可以確保連接及時(shí)釋放，但會(huì)增加連接關(guān)閉和重新建立的頻率；較大的值可以減少連接關(guān)閉和重新建立的頻率，但可能會(huì)導(dǎo)致長(zhǎng)時(shí)間的閑置連接占用服務(wù)器資源。
keepalive_requests: 這個(gè)參數(shù)定義了一個(gè) keepalive 連接上最多能夠處理的請(qǐng)求次數(shù)。當(dāng)一個(gè) keepalive 連接處理了 keepalive_requests 次請(qǐng)求之后，服務(wù)器會(huì)關(guān)閉該連接。默認(rèn)值通常為 100。較大的值可以減少連接的關(guān)閉和重新建立，但在某些情況下可能會(huì)占用過(guò)多的服務(wù)器資源。

3.配置緩存

往nginx.conf 的 http內(nèi)容段落中加入

proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;

釋義如下：

/path/to/cache 是指定的緩存存儲(chǔ)路徑。
levels=1:2 指定了文件系統(tǒng)中緩存目錄的層級(jí)結(jié)構(gòu)，這里是一級(jí)目錄和兩級(jí)子目錄。
keys_zone=my_cache:10m 定義了一個(gè)名為 my_cache 的緩存區(qū)域，大小為 10 兆字節(jié)。
max_size=10g 指定了緩存最大可使用的空間大小為 10 GB。
inactive=60m 表示緩存文件在60m時(shí)間內(nèi)沒(méi)有被訪問(wèn)時(shí)，會(huì)被視為不活動(dòng)，并有可能被清理掉。

注意事項(xiàng)

對(duì) Nginx 的配置更改可能需要 root 權(quán)限，請(qǐng)確保你有足夠的權(quán)限來(lái)修改相關(guān)配置文件。此外，再次強(qiáng)調(diào)，修改配置文件前請(qǐng)備份文件以防止意外情況發(fā)生，還有就是nginx需要重啟生效需要注意。