当前位置: 代码网 > it编程>编程语言>Javascript > nginx实现对css,js文件缓存教程

nginx实现对css,js文件缓存教程

2026年09月11日 Javascript 我要评论
网页访问缓慢,响应时间长,想要优化网页访问速度,可以了解一下nginx缓存首先我们先看一下没设置之前的效果总计5s才加载出全部页面。下面是优化后的效果快了3s,这速度差的有点多。我们在nginx实现对

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

首先我们先看一下

没设置之前的效果

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

下面是优化后的效果

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

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

这张图是nginx的工作原理

实现方式

修改nginx.conf

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一起使用时, 优先级较高

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2026  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com