nginx实现对css，js文件缓存教程_F11 - 专业站长和开发者的学习网站

网页访问缓慢，响应时间长，想要优化网页访问速度，可以了解一下nginx缓存

首先我们先看一下

没设置之前的效果

总计5s才加载出全部页面。

下面是优化后的效果

快了3s，这速度差的有点多。

我们在nginx实现对静态文件的缓存可以使我们服务在访问这些文件时，不需要请求服务器响应，直接访问缓存文件，达到提速的效果。

这张图是nginx的工作原理

实现方式

修改nginx.conf

100

101

102

user www www;

worker_processes 2; #设置值和CPU核心数一致

error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别

#access_log /usr/local/webserver/nginx/logs/access.log crit;

pid /usr/local/webserver/nginx/nginx.pid;

#Specifies the value for maximum file descriptors that can be opened by this process.

worker_rlimit_nofile 65535;

events

{

use epoll;

worker_connections 65535;

}

http

{

include mime.types;

default_type application/octet-stream;

log_format main '$remote_addr - $remote_user [$time_local] "$request" '

'$status $body_bytes_sent "$http_referer" '

'"$http_user_agent" $http_x_forwarded_for';

#charset gb2312;

server_names_hash_bucket_size 128;

client_header_buffer_size 32k;

large_client_header_buffers 4 32k;

client_max_body_size 8m;

sendfile on;

tcp_nopush on;

keepalive_timeout 60;

tcp_nodelay on;

fastcgi_connect_timeout 300;

fastcgi_send_timeout 300;

fastcgi_read_timeout 300;

fastcgi_buffer_size 64k;

fastcgi_buffers 4 64k;

fastcgi_busy_buffers_size 128k;

fastcgi_temp_file_write_size 128k;

gzip on;

gzip_min_length 1k;

gzip_buffers 4 16k;

gzip_http_version 1.0;

gzip_comp_level 2;

gzip_types text/plain application/x-javascript text/css application/xml;

gzip_vary on;

##cache##

proxy_buffer_size 16k;

proxy_buffers 4 64k;

proxy_busy_buffers_size 128k;

proxy_temp_file_write_size 128k;

proxy_temp_path /usr/local/webserver/nginx/temp;

proxy_cache_path /usr/local/webserver/nginx/cache levels=1:2 keys_zone=cache_one:200m inactive=1d max_size=30g;

##end##

#limit_zone crawler $binary_remote_addr 10m;

#下面是server虚拟主机的配置

upstream web_back{

server 127.0.0.1:8080; #并且可以分配权重weight,这样来配置集群服务器的访问优先权

}

server

{

listen 8060;#监听端口

#缓存相应的文件(静态文件)

location ~ .*\.(gif|jpg|jpeg|jpg|css|js|ico)$ {

proxy_pass http://web_back; #如果没有缓存则通过proxy_pass转向请求

proxy_redirect off;

access_log off;# 关闭日志

proxy_set_header Host $host;

proxy_cache cache_one;

proxy_cache_valid 200 302 24h; #对不同的HTTP状态码设置不同的缓存时间,h小时,d天数

proxy_cache_valid 301 1d;

proxy_cache_valid any 1m;

expires 30d;

add_header wall "cache-file";

}

#web 使用

location /cpeducloud {

proxy_pass http://localhost:8080/cpeducloud;

proxy_redirect http:// https://;

sendfile off;

proxy_set_header Host $host:$server_port;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "Upgrade";

proxy_max_temp_file_size 0;

#this is the maximum upload size

client_max_body_size 0;

client_body_buffer_size 128k;

proxy_connect_timeout 90;

proxy_send_timeout 180;

proxy_read_timeout 180;

proxy_temp_file_write_size 64k;

# Required for new HTTP-based CLI

proxy_http_version 1.1;

}

location /download {

proxy_pass http://localhost:8080/cpeducloud;

proxy_redirect http:// https://;

#下载速度限制

#limit_rate_after 10m;

limit_rate 5k;

}

access_log logs/cpeducloud.log main;

}

修改http和server两个模块，红色标注的是需要修改的地方，蓝色标注的可以不需要，修改之后重启nginx

看一下修改之后的效果

看页面响应头可以看出来

修改之前

修改之后

可以看到响应头的区别，看代码状态也可以看出，资源来自内存缓存

其中max-ages=2592000的意思是，缓存保存2592000秒，也就是30天（参见下表），30天后回重新向服务器请求资源，并重新保存缓存文件。

Cache-directive	说明
public	所有内容都将被缓存(客户端和代理服务器都可缓存)
private	内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
no-cache	必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌 (ETag)，no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载。
no-store	所有内容都不会被缓存到缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation	如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
max-age=xxx (xxx is numeric)	缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高