nginx实现对css,js文件缓存

article/2025/9/3 10:35:25

网页访问缓慢,响应时间长,想要优化网页访问速度,可以了解一下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|png|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一起使用时, 优先级较高

参考文献:Nginx 静态资源缓存配置 - 手撕高达的村长 - 博客园 (cnblogs.com)

                Cache-control_百度百科 (baidu.com)


http://chatgpt.dhexx.cn/article/G5xFmAbo.shtml

相关文章

maven仓库清理缓存文件(dos工具)

目录 1.背景 2.解决方案 3.脚本文件 4.运行效果 5.脚本文件下载 1.背景 使用过maven的人都应该知道,maven下载jar包时,有时由于网络问题,会造成文本未下载完毕,残留.lastUpdated文件,下次使用pom时,由于…

文件的随机读写及文件缓冲区

目录 一. 文件的随机读写 二.文件缓冲区 进度条 一. 文件的随机读写 我们在使用完文件指针的时候,指针指向的是数据的末尾,那么如果要更改这个指针的位置,我们就要了解这几个函数:fseek(根据文件指针的位置和偏移量来定位文件指针),ftell(…

SpringBoot处理静态文件缓存机制详解

前言 紧接上文SpringBoot处理静态文件源码分析,分析下其中处理静态文件时的缓存机制 http协议 http协议有一条规则: 当response header中携带Last-Modified时,当再次发起一个相同请求时会把Last-Modified的值放到request header的If-Modi…

apache设置html缓存,宝塔面板apache配置静态文件缓存

将网站静态资源内容,如jpg,gif,png,js,css文件,页面打开时自动缓存到本地,而不是每次都去从服务器请求资源,设置一定的缓存时间,这样做可以减轻服务器的带宽压力,同时使网页打开速度加快,提高用户体检。 宝塔面板如何配置静态文件缓存呢?下面我们一起来操作 加载mod_ex…

linux vi 缓存文件,Vim中的几种文件备份方法总结

一、Vim 的交换文件 .filename.swp 默认交换文件在打开文件的时候就会产生交换文件,正常退出的时候才会删除交换文件(断电,CtrlZ强制退出就不会删除),内容大致是这个样子。 通过在 Vim 配置文件设置 set noswapfile 来关闭交换文件。 二、 Vi…

CMake中set/unset的使用

CMake中的set命令用于将普通、缓存或环境变量(normal, cache, or environment variable)设置为给定值&#xff0c;其格式如下&#xff1a;指定<value>...占位符(placeholder)的此命令的签名需要零个或多个参数。多个参数将作为分号分割的list连接&#xff0c;以形成要设置…

Nginx缓存静态文件

nginx的一大功能就是完成静态资源的分离部署&#xff0c;减轻后端服务器的压力&#xff0c;如果给这些静态资源再加一级nginx的缓存&#xff0c;可以进一步提升访问效率。 第一步&#xff1a;添加nginx.conf的http级别的缓存配置 ##cache##proxy_connect_timeout 500;#跟后端服…

第一个c语言简单小程序

还有很多不会的地方&#xff0c;以后还要好好学习才行

C语言小程序实现电脑关机

一、需求分析 1.电脑在2分钟后关机&#xff1b; 2.输入 我最棒 则取消电脑关机 3.输入错误时&#xff0c;可以在2分钟内重复输入 二、代码 #include<stdio.h> #include<stdlib.h> #include<string.h> int main() {char arr[10] {0};system("shutd…

【C/C++ 经典小程序(一)】

【1】九九乘法表 输出9*9口诀。共9行9列&#xff0c;i控制行&#xff0c;j控制列。 #include <stdio.h> void main() {int i,j,result;for (i1;i<10;i){ for(j1;j<i;j){resulti*j;printf("%d*%d%-3d",i,j,result);/*-3d表示左对齐&#xff0c;占3位*/}pr…

c语言编写简单实用的小程序,C语言编写一个小程序

用C/C编写一个小程序 #include using namespace std; int main() { int b[6]{1,2,2,3,4,5},i,j,k,l,m,n,p,c,d,*a[6]; for(j0;j<6;j) a[j]&b[j]; for(j0;j<6;j) { a[0]&b[j]; for(k0;k<6;k) { if(kj) continue; a[1]&b[k]; for(l0;l<6;l) { if(lj||lk)…

编写C语言的最简单小程序Hello world和函数使用

编写C语言的最简单小程序Hello world 一、示例一 1、编写demo.c程序 #include<stdio.h> int main() {printf("Hello world!");return 0; } 程序的第一行 #include <stdio.h> 是预处理器指令&#xff0c;告诉 C 编译器在实际编译之前要包含 stdio.h 文…

C语言小程序:通讯录(文件版)

在静态版本的通讯录里面实现了通讯录的基本逻辑&#xff0c;但是空间大小是固定的&#xff0c;这样子就会显得很不灵活&#xff0c;会有浪费空间和空间不足的问题&#xff0c;所以在动态版本的通讯里面我们通过动态内存开辟使用malloc函数给通讯录动态的开辟一块空间&#xff0…

C语言有趣的小程序

最近闲着没事写了一个C语言小程序,就当作是玩玩。 本小程序的各个功能都是通过dos命令来实现的。 运行结果如下图: 该小程序有以下几个功能: 1、启动计算器 2、新建记事本 3、打开画图板 4、定时关机(15s、30s、60s) 5、显示系统时间或修改 6、重启计算机 小程序源代码…

C语言小程序:通讯录(静态版)

哈喽各位老铁们&#xff0c;今天给大家带来一期通讯录的静态版本的实现&#xff0c;何为静态版本后面会做解释&#xff0c;话不多说&#xff0c;直接开始&#xff01; 关于通讯录&#xff0c;其实也就是类似于我们手机上的通讯录一样&#xff0c;有着各种各样的功能&#xff0c…

C语言小程序分享

本文为大一时所写的文章&#xff08;2017/4/23&#xff09;&#xff0c;文笔还很生疏&#xff0c;在很多问题上认识不深&#xff0c;算是在学校的微信公众号上的一个编程探究模块上的投稿&#xff0c;本人当时也参与了本模块的维护和管理。补档。 上个周末的一个下午&#xff0…

C语言小程序-学生成绩统计系统

C语言小程序-学生成绩统计系统 参考了 另一位博主的代码(https://blog.csdn.net/qq_36503589/article/details/53106983) 我后来写的成绩排序版本链接&#xff1a;https://blog.csdn.net/qq_43617268/article/details/103491760 功能介绍&#xff1a;本程序可以输入50人以内的…

C语言10个经典小程序——小白必备!

网上有很多的人说编程有多么多么无聊。。。。So Boring ! 。。。其实小编想说:不要管别人怎么说,别人说什么,做你自己喜欢做的事就好。坚持下来,你会发现编程的乐趣的。。。。当然,如果你觉得学习编程语言很痛苦,坚持了一段时间后无果,南无果断放弃未必不是一个好的选择…

C语言小程序:如何用代码“画”出一个爱心

利用ASCII编码第三个字符&#xff0c;作为基础&#xff0c;然后利用三个多重循环画出一个爱心出来。要使用控制台改变运行框大小和文字的颜色&#xff0c;黑白的爱心不免有些诡异。 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <math.h> #inclu…

我的第一个c语言小程序

标题&#xff1a;判断题答题小程序 Author: plc6666 软工专业 工科男 格言&#xff1a;总有人间一两风&#xff0c;填我十万八千梦。 文章目录 标题&#xff1a;判断题答题小程序 一.程序的由来二.程序的状况1.程序实现了颜色转换的功能2.程序能随机抽20题&#xff0c;不重复3.…