解决静态资源文件js/css缓存问题(超详细总结版)

2023-05-16

什么是静态资源文件

顾名思义,静态资源文件就是js、css、img等非服务器动态运行生成的文件,统称为静态
资源文件。

为什么要缓存静态资源文件

静态资源文件是基本不会改变的,没必要每次都从服务器中获取。也就是说,我们每次向
服务器发送请求得到的静态资源是相同的。所以我们可以把静态资源缓存再浏览器,也就
是客户端,来进行性能优化。

虽然绝大多数css和js文件都只有几百k,但有些时候会存在如字体文件等超过1MB的文件,加载时间会达到一秒以上,就会极大的影响网页的整体加载速度,这时候就必须要对静态资源文件进行缓存。

实现缓存的几种方法

一、修改html文件
第一种方法就是在html文件的最上面加上这样一行代码:

 <meta http-equiv="Cache-Control" content="max-age=7200" />

这句话的作用是修改服务器的响应该html文件的响应头,设置其中静态资源文件的缓存时间为7200秒。
说到这里首先要介绍一下服务器给浏览器的静态资源响应,按F12打开开发者调试工具,选择Network,如下图所示:
在这里插入图片描述
可以看到下面展示了许多js和css文件的加载信息,单击其中一条记录,可以看到他们的响应头信息。
在这里插入图片描述 可以看到,被红框圈上的部分,是和缓存有关的响应头信息。Cache-Control用于指定缓存机制,Expires用于声明缓存到期时间,Pragma则是为了兼容版本设置的,Http/1.1才可以识别Cache-Control,而Pragma对Http/1.0和Http1.1均生效。
因此我们之前做的操作就是修改这个响应头,让其由禁止缓存变为允许缓存。
然而我在做了这个操作之后并没用生效,响应头依旧没有改变。这是因为在页面进行设置的优先级是最低的,springboot内置的web服务器会将这个设置好的响应头进行覆盖。因此如果这个方法没有生效,我们就来使用第二种方法。
二、springboot配置
第二种方法原理相同,修改响应头。具体操作步骤见https://blog.csdn.net/m0_37845840/article/details/81382462,这篇文章介绍的很详细,简单来说分为修改响应头和设置版本号两部分。设置版本号是为了每次修改后的js和css文件都会被更新,也就是浏览器通过版本号来区分自己缓存的js与css文件是否为最新的版本。
然而发现,在springboot进行配置后,响应头并未发生任何变化,没有实现缓存。这里可能有两个原因,第一是本身项目的架构问题,在更高的层级配置了静态资源响应头信息,在当前项目内修改会被覆盖;第二是在nginx进行了配置,nginx的优先级比springboot高,因此设置的响应头信息也会被覆盖。所以我们需要进行第三种配置,在nginx进行设置。
三、修改nginx配置文件
这里首先说明一下为何nginx的优先级更高,nginx是一个实现反向代理和负载均衡的轻量级web服务器,许多项目都会使用到它来做代理。可以理解为它是所有web服务器的统一入口和出口,也就是说我们所有的数据都是从springboot中集成的web服务器出来后,再由nginx代理,作处理后响应给浏览器。如下图所示,nginx最后对响应头作处理,所以会对之前的所有处理进行覆盖。
在这里插入图片描述
找到nginx的配置文件nginx.conf,百度搜索相应操作系统命令即可,添加配置文件内容:

location ~* \.(woff)$ {
    proxy_pass http://kubernetes;
    expires 1d;
}

这里的woff可以替换为css|js,即匹配所有css和js文件,这里我需要缓存的为字体文件,后缀为woff。之前查找了很多资料,没有第一行proxy_pass,配置后会出现匹配到的静态资源文件报404,是因为没有设置正确的代理路径,参考自己nginx配置文件中其它部分设置正确的路径即可。这样设置之后,重启nginx,发现可以进行缓存了,如下图所示:
在这里插入图片描述
绿色框框圈的部分已经发生了改变,同时响应码由原来的200变为了304
下面两张图是缓存前后的差别:
在这里插入图片描述
在这里插入图片描述
大小由之前的6.9MB变为350B,时间也由8秒变为100ms。
可以说我们的目的达到了,加载静态资源文件的时间极大的缩短了。但还不够完美,因为多发了一次304请求。也就是说浏览器会再发一次304请求,去问服务器究竟要不要从缓存中获取静态资源文件,确认后再从浏览器的缓存中获取。也就是说这个请求对我们来说是完全多余的,可以进一步优化。
我们发现红框中的响应头Pragma:no-cache依旧存在,这里的no-cache并不是不缓存的意思:

no-cache 可以在本地缓存,可以在代理服务器缓存,但是这个缓存要服务器验证才可以使用 
no-store 彻底得禁用缓冲,本地和代理服务器都不缓冲,每次都从服务器获取

因此我们的304请求很可能是因为这个响应头造成的。我们要通过nginx去掉这个响应头。
nginx中清除响应头需要下载一个模块headers_more,这个模块可以实现响应头的清除功能。下载安装模块后需要对nginx重新编译才能生效。建议在运维的协助下完成。nginx中需要修改的配置如下:

location ~* \.(woff)$ {
    proxy_pass http://kubernetes;
    expires 1d;
    more_clear_headers Pragma;
}

将Pragma这个响应头清除,之后重启nginx,结果如下图所示:
在这里插入图片描述
状态码已经变为200了,同时后面的(from memory cache)表明是从缓存中获取的该静态资源文件。
在这里插入图片描述
可以看到,Size已经变为(from memory cache),时间为0ms,静态资源文件缓存配置完成。

注意事项

最后的nginx配置我没有配置版本号,因为我缓存的是字体文件,也就是说是永远不会改变的。然而我们如果缓存的是js和css文件,每隔几周可能都会进行修改,这时候不设置版本号就是存在风险的,可能你浏览器端存有旧的css文件没有过期,这时候又没有版本号作区分,可能会导致无法获取最新的css文件。因此建议添加版本号,具体配置在springboot配置的链接中有详细说明,参考配置即可。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决静态资源文件js/css缓存问题(超详细总结版) 的相关文章

  • 【DarkLabel】使用教程(标注MOT数据集)

    DarkLabel 使用教程 功能部分 Open video 第 2 处的内容为数据集类型 例如 xff1a VOC COCO MOT YOLO等 第 3 处的内容为标签名称 可在 darklabel yml 中修改 classes set
  • 【Segment Anything】CV的大模型Segment Anything也来了,强人工智能的时代究竟还有多远?

    文章目录 Segment Anything1 论文2 官方文档3 测试网站4 本地测试4 1 下载预训练权重4 2 新建get masks py 4 4 测试 Segment Anything 1 论文 论文链接 xff1a https a
  • 【AIGC】深入理解 LORA模型

    深入理解 LORA模型 LORA模型是一种神经网络模型 xff0c 它通过学习可以自动调整神经网络中各层之间的权重 xff0c 以提高模型的性能 本文将深入探讨LORA模型的原理 应用场景 优缺点等方面 1 LORA模型的原理 LORA模型
  • A*算法实现路径规划matlab(上)

    目录 A 算法简介1 1 作用与特点1 2 A 算法的基本思想与数学函数模型 xff1a 1 2 1基本思想1 2 2数学函数模型1 2 3 A 算法的算法步骤 A 算法简介 1 1 作用与特点 A 算法是启发式搜索型的路径规划算法 xff
  • CCProxy和Proxifier使用教程

    CCProxy使用 xff08 服务端 xff09 xff1a CCProxy运行在需要配置为代理服务器的电脑上 1 点击设置 xff0c 按自己需要选择要开的服务 xff1a 2 点击高级 xff0c 取消勾选 34 禁止局域网外部用户
  • CUDA11.4+VS2017+MATLAB2020a执行mexcuda遇到的问题及解决

    前情提要 xff1a matlabR2020a 43 VS2019 1 安装cuda11 4 从nvidia控制面板可以看出来电脑的cuda驱动版本 xff08 楼主这里是11 4 xff09 CUDA Toolkit 11 4 Updat
  • ubuntu查看版本命令

    cat etc lsb release DISTRIB ID 61 Ubuntu 类别是ubuntu DISTRIB RELEASE 61 18 04 5 LTS 长期支持的版本 xff09 发行日期或版本 DISTRIB CODENAME
  • 蓝桥杯-串口学习

    蓝桥杯单片机串口学习 蓝桥杯串口字符串收发 主要函数 字符串发送和字符串接收 字节发送函数 span class token keyword void span span class token function Uart SendBye
  • 学在西电课程回放下载与进度拖动

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 前言 最近发现学在西电的课程回放进度条不能拖动 xff0c 找了一个方法 xff0c 实现了进度拖动 xff0c 顺便实现了下载功
  • java中子类调用父类构造函数super()

    java中super 方法 讲到java中super 的方法 xff0c 就要提到java中面向对象的三大特性 xff1a 封装 继承 多态 xff0c 而说到类的继承 xff0c 我们就会提到子父类这个概念 xff0c 子父类就是一个类继
  • OpenCV基于形状的模板匹配

    OpenCV基于形状的模板匹配 引言基于形状的匹配算法具体代码KcgMatch hKcgMatch cppmain cpp 匹配的结果 引言 在OpenCV中有个用于模板匹配的基本函数matchTemplate xff0c 该函数使用某模板
  • Snipaste2.7.3下载安装与使用(超实用的截图利器)

    目录 简介 下载 解压 使用 补充 总结 简介 Snipaste是一款使用非常便捷的截图软件 xff0c 免安装 xff0c 不仅能将截图钉在屏幕上 xff0c 还能将复制的文本转换成图片钉在屏幕上 下载 1 在浏览器地址栏输入 xff1a
  • ESP8266从零学起第一课入门测试(超详细)

    ESP8266从零学 笔记 L1 ESP8266的入门测试 P1 blinker APP控制Esp8266板载LED 前言 因为是初学者所以特别希望能有一份详细的教程 xff0c 可是俺没找到 xff0c 所以就写了这么一篇文章 xff0c
  • Xshell6下载

    Xshell可以在Windows界面下用来访问远端不同系统下的服务器 xff0c 从而比较好的达到远程控制终端的目的 xff0c Xshell是一款非常好用的linux远程操作工具 懒的看下面的可以直接去我百度网盘上下载 链接 xff1a
  • pom文件parent标签报错解决办法(不同的方法)

    前段时间创建导入项目 xff0c pom文件的parent标签总是报错 xff0c 导致项目里面所有关于spring的全部都报错 xff0c 一片红 xff0c 很是不爽 xff0c 项目进行不下去 xff0c 尝试找了网上许多办法 xff
  • 5. 文件属性信息

    文章目录 1 文件属性概念2 文件属性详细说明 文件类型2 1 文件类型概念2 2 区分文件类型方法3 常见文件类型2 4 扩展命令说明 3 课程知识回顾总结 课程知识回顾4 find命令查找信息补充4 1 查看找文件数据信息 xff1a
  • 51定时器及计数器的使用(复习总结)

    该知识点来源于B站知弦 xff0c 本章便是对其定时器计数器应用的简单总结 xff01 xff01 xff01 一 定时器与计数器原理 原理 1 TMOD有八位 xff0c 其实可以分为高四位及低四位 xff0c 高四位为定时器1 xff0
  • Python利用turtle库画虚线

    Python利用turtle库画虚线 import turtle as t 给予turtle库一个t的别称 t setup 600 600 200 100 t speed 0 说明速度 t pencolor red 说明颜色 for i i
  • 华为手机(Android系统)备忘录转移至iOS

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 本文仅可转移纯文字备忘录 苹果的转移至iOS不能转移备忘录 xff0c 备忘录也无法在文件系统里直接找到 xff0c 所以找了这个
  • ubuntu 18.04系统解决E: 仓库 “http://ppa.launchpad.net/webupd8team/java/ubuntu eoan Release” 没有 Release 文件。

    问题描述 xff1a 在终端换源后遇到E 仓库 http ppa launchpad net webupd8team java ubuntu eoan Release 没有 Release 文件 问题详情如下所示 解决方法 xff1a 将对

随机推荐

  • ImageDataGenerator读取的数据集转Numpy array

    ImageDataGenerator读取的数据集转Numpy array 2021 6 21更新 xff1a 常用的数据集类型可以分为两种 xff1a xff08 1 xff09 一种是网上的经典数据集 xff0c 比如mnist xff0
  • ROS系统 创建工作空间与功能包

    ROS 学习目标 xff1a 学习内容 xff1a 使用环境 操作步骤 xff1a 基本命令 二 使用步骤创建工作空间编译工作空间创建功能包 使用C 43 43 执行程序编写源文件编辑功能包下的 Cmakelist txt文件修改目标链接库
  • 计算机网络与互联网(了解)

    文章目录 1 0 相关术语 Terms 1 1 什么是互联网1 2 互联网发展史1 3 网络体系结构1 3 1 网络边缘 Network Edge 1 3 2 网络核心 Network Core 1 3 3 接入网络与物理媒体 1 4 De
  • python库的安装、卸载和查询

    python库的安装 卸载和查询 安装库 方法1 xff1a pip install xxx 如图1所示 xff0c 在命令提示符窗口输入pip install xxx xff0c 即可在线安装指定库 xff0c 如输入pip instal
  • 计算机三级 数据库技术 前言

    考试内容及要求 1 掌握数据库技术的基本概念 原理 方法和技术 2 能够使用SQL语言实现数据库操作 3 具备数据库系统安装 配置及数据库管理与维护的基本技能 4 掌握数据库管理与维护的基本方法 5 掌握数据库性能优化的基本方法 6 了解数
  • 计算机三级 数据库技术(Chapter 2)

    第二章 xff1a 需求分析 主要内容 xff1a 需求分析的相关概念以及主要方法需求建模方法案例分析 Class 1 需求分析 1 需求分析的概念与意义 需求 xff1a 需求是指用户对软件的功能和性能的要求 就是用户的要求内容以及对要求
  • 微分几何 Class 1 向量空间

    微分几何 作为一名大三下的数学专业学生 xff0c 我本学期将实时将我所感兴趣的一门课微分几何笔记以及一些总结同步到我的博客上 xff0c 以便进行学习总结与自我督促 参考书 微分几何 苏步青 xff0c 胡和生 xff08 2016 xf
  • 微分几何 Class 2 欧氏空间

    欧氏空间 在上完上一节课之后 xff0c 我才意识到 xff0c 欧氏空间和欧氏向量空间原来不是同一个东西 但是在介绍欧氏空间之前 xff0c 我们首先来了解一下什么叫做仿射空间 Part One 仿射空间 定义 xff1a 仿射空间 设
  • 歌评-《Rex Incognito 尘世闲游》-陈致逸

    时隔一周时间了 xff0c 终于又找到了时间来更新我的歌评内容 虽然身被学校关了起来 xff0c 但是心里还是在歌曲的梦幻世界中畅游hhh 今天我们来听的歌曲也是 The Stellar Moments 闪耀的群星OST专辑中的一首 xff
  • 将Maven的Docker镜像修改为国内源

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 前提 在使用Dockerfile构建镜像时 xff0c Maven的Docker镜像内置的是官方源 xff0c 使用起来下载速度太
  • 我看文二代

    文二代 文二代 xff0c 其实就是人们常说的文坛的后辈子女 xff0c 即父母是搞文学的作家 xff0c 子女也和文学脱不了干系 前一段 xff0c 贾平凹的女儿贾浅浅因为其浅浅体诗歌以及部分奇奇怪怪的内容上了热搜 被许多网友痛骂 对此
  • 码农多打拼5年对生子的影响

    码农多打拼五年对生子决策的影响 首先我们确定在这个问题中要处理的对象 xff1a 单个个体 他会有哪些属性呢 xff1f 1 退休年限 2 生活状态 我们要分析的是一个事件对生子数目的影响 xff0c 其实在现当代 xff0c 因为过大的工
  • 微分几何 Class 3 曲线,曲率与挠率

    正则曲线 什么是曲线 在空间中 xff0c 我们会见到各种各样的形状 xff0c 但无论什么形状 xff0c 其根本还是由点和线来构成的 xff0c 这里我们的线是一个直观的理解 xff0c 就是一条直直的 xff0c 有的也是弯的那样的
  • 随机过程 番外篇(随机拟合作业解答)

    一晚上写了三道随机过程的随机模拟的代码 xff0c 分享出来给大家做个参照 1 如果一个随机变量服从的是期望为 mu xff0c 协方差矩阵为 Sigma
  • 小云的生日史书

    小云的生日史 xff1a 生日10月21日 前三岁历史暂且不记录 xff0c 史前时期 xff0c 资料不详 四岁生日 xff1a 白天去了姥姥姥爷家去玩 xff0c 他们都对我的生日表示了祝福 下午便回到了奶奶家里 xff0c 等着生日p
  • 信息论篇-第一次上机作业,你好!

    信息论第一次上机作业 1 图像信源熵的求解 读入一幅图像 实现求解图片信源的熵 span class token triple quoted string string 1 图像信源熵的求解 读入一幅图像 实现求解图片信源的熵 span s
  • 媒体科创部 学习分享 非线性规划

    非线性规划 哇哈哈 xff0c 这次轮到我来讲了 xff0c 虽然很懒 xff0c 但是还是来写博客了 这次我们要谈的东西是非线性规划 非线性规划 非线性规划的定义 目标or限制中包含着非线性函数 线性规划与非线性规划的区别 如果线性规划的
  • 多玩家赌徒输光问题

    在随机过程课堂上我们考虑了赌徒输光问题 知道了成本和概率变化的情况将对赌徒甲和赌徒乙的赌博结果产生了怎样的影响 考虑的问题主要有以下几个方面 本金对胜负的影响 概率对胜负的影响 本金对持续轮数的影响 概率对持续轮数的影响 对上述问题的综合考
  • Spring Boot(Maven)+Docker打包

    声明 xff1a 本文CSDN作者原创投稿文章 xff0c 未经许可禁止任何形式的转载 xff0c 原文链接 本文可以实现 xff1a 将Spring Boot项目从GitHub clone到服务器上后 xff0c 一条命令直接完成依赖下载
  • 解决静态资源文件js/css缓存问题(超详细总结版)

    什么是静态资源文件 顾名思义 xff0c 静态资源文件就是js css img等非服务器动态运行生成的文件 xff0c 统称为静态 资源文件 为什么要缓存静态资源文件 静态资源文件是基本不会改变的 xff0c 没必要每次都从服务器中获取 也