当前位置：首页 > news >正文

前端发布缓存导致白屏解决方案

news 来源：原创 2025/8/15 18:32:47

解决发布H5后因为本地缓存白屏方案

一、核心配置优化（前提是访问网站的请求能抵达服务器）

方案一：前端项目设置全局不缓存方案

运行逻辑：在H5服务器配置中增加Cache-Control: no-cache或max-age=0响应头，禁用静态资源缓存‌；
优点：能在服务器出口处最大可能地解决发布项目缓存问题
缺点：用户在不同界面跳转都会重新加载界面信息，影响整个前端加载速度，高并发时容易造成带宽压力

方案二：首页index.html资源缓存修正，禁制index.html文件缓存

server {listen 8080;root /var/www/web/;location /index.html {add_header Cache-Control "no-cache, no-store, must-revalidate, private";add_header Pragma "no-cache";add_header Expires "0";try_files $uri /index.html;}location / {try_files $uri $uri/ /index.html;}
}

优点：单页面应用设置首页模板强制不缓存，用户浏览器不会缓存 index.html 文件，每次都会向服务器拉取新的首页模板，确保用户不会使用历史模板。
缺点：用户不缓存首页，每次都会拉取，导致每次进入系统都会等待相对较长的时间。

方案三：首页 index.html 资源添加 ETag和Last-Modified 参数

server {listen 8080;root /var/www/web/;location /index.html {etag on;if_modified_since exact;add_header Cache-Control "public, max-age=0";expires modified +1y;try_files $uri /index.html;}location / {try_files $uri $uri/ /index.html;}
}

ETag：是服务器为资源生成的唯一标识符（如哈希值或版本号），内容变化时标识会更新。
Last-Modified：服务器返回资源的最后修改时间戳
运行逻辑：客户端首次请求资源时，服务器返回 ETag 和 Last-Modified。后续请求中，客户端可能同时发送 If-None-Match 和 If-Modified-Since。服务器优先检查 ETag 与 Last-Modified（若存在），直接返回 304，浏览器使用缓存文件；因 ETag 精度更高，若匹配，则会忽略 Last-Modified。
优点：能检测到内容字节级别的变化或者文件系统时间戳的变化，从而让用户端使用新的文件；通过检验文件的方式实施高效缓存策略，可有效利用客户端缓存，提升网站性能并降低服务器压力。
缺点：
若多服务器间文件属性或文件时间戳不一致，可能导致 ETag/Last-Modified 冲突（如果是一个jenkins编译，将一个编译包放到两个服务器（服务器系统版本一致）中实现负载均衡，可以使用ETag，如果使用k8s等其他工具发布需要注意文件同步，可以使用分布式文件系统或同步工具）；
高并发时每一次请求都会检验请求的ETag会占用相对校对的CPU性能（针对目前在线理赔的并发量，可忽略不计）；
太过于依赖本地缓存，如果请求头校验通过但是本地缓存异常会造成未知异常（目前有人说可能会出现的问题，但是并未在某处真的搜索到相关bug内容）；
可以用：curl -I https://域名 来查看请求头内容

二、 jenkins发布流程优化方案

运行逻辑：每次发布 jenkins 时不删除上一个版本的js文件，直接将新的js放在原有目录下，达到新老版本js共存的目的，当用户使用浏览器缓存的界面读取老版本的js不会因为文件不存在而报错。等待用户浏览器识别到更新后会更新到新版本。
优点：
用户不会因为发布拿不到js文件而白屏，基本可以解决因为发布缓存而白屏的问题。
缺点：
用户使用老版本的js进入系统后，无法使用新功能，如果前后端代码功能不一致会导致用户操作失败；如果用户长时间没有触发更新机制，会导致更新功能在一段时间内用户无法使用；

随着每次发布，服务器上的js文件会越来越多，当达到一定数量级后会影响服务器对文件的读取速度需要不定时人为处理久远的历史版本（服务器脚本示例，注意不要复制使用，需要根据自己的项目确认删除的数据，数据无价删除许谨慎：保留最近2个版本
ls -t /path/to/dist/js/app.*.js | tail -n +3 | xargs rm -f）。

三、使用版本号方案

通过后端更新版本号

运行逻辑：后端在系统中开放一个公开接口用于接收并返回当前版本号，前端需要给设备定义一个唯一设备号保存在浏览器；前端每次加载完 index.html 首页模板后，在渲染js之前对后端发起一个版本号对比请求，后端日志保存前端提交请求的版本号与设备号并返回当前系统版本，如果前端本地保存的版本与后端不一致，则前端使用Service Worker缓存控制通过workbox-webpack-plugin清除旧版本文件缓存，然后再刷新界面渲染js。
优点：可以在发布代码之后，通过日志查看是否有用户依旧是老版本发起请求，可以通过参数查询同一设备是否在进入老版本后又重新进入了新版本，同时拥有历史日志可以判断设备号属于哪个用户，并且可以人为在数据库修改版本号来实现控制用户刷新次数。
缺点：开发测试工作量相对较大，每次发布需要人为修改数据库版本号（或者写成接口放在jenkins中自动触发）；

前端发布缓存导致白屏解决方案

解决发布H5后因为本地缓存白屏方案一、核心配置优化（前提是访问网站的请求能抵达服务器） 方案一：前端项目设置全局不缓存方案运行逻辑：在H5服务器配置中增加Cache-Control: no-cache或max-age0响应头，禁用静态资…...

编程日记 2025/8/15 18:32:47

【后端】【django】Django 自带的用户系统与 RBAC 机制

Django 自带的用户系统与 RBAC 机制 Django 自带的用户系统（django.contrib.auth）提供了身份验证（Authentication） 和权限管理（Authorization），能够快速实现用户管理、权限控制、管理员后台…...

编程日记 2025/8/14 15:58:07

SpringBoot MCP 入门使用

随着AI的火爆，最近发现MCP在未来确实大有可为，作为一名javaer怎么可以落后在历史洪流呢，根据官网和cursor也从零开始体验一下自定义mcp server。以后可以根据自己业务场景做出各种适合自身业务的工具。至于什么是MCP 可以到https://modelcon…...

编程日记 2025/8/10 18:07:38

Java使用JDBC连接操作Sqlite 笔记250314

Java使用JDBC连接操作Sqlite 以下是使用 Java JDBC 连接和操作 SQLite 数据库的详细步骤： 1. 添加 SQLite JDBC 驱动在项目中引入 SQLite JDBC 驱动依赖。 Maven 项目在 pom.xml 中添加：<dependency><groupId>org.xerial</groupId>…...

编程日记 2025/8/15 18:32:29

每日一题---腐烂的苹果（广度优先搜索）

腐烂的苹果给定一个 nm nm 的网格，其中每个单元格中可能有三种值中的一个 0 , 1 , 2。其中 0 表示这个格子为空、1 表示这个格子有一个完好的苹果，2 表示这个格子有一个腐烂的苹果。腐烂的苹果每分钟会向上下左右四个方向的苹果传播一次病菌&…...

编程日记 2025/8/15 10:43:08

Visual Studio里的调试（debugging）功能介绍

参考 1- Introduction to Debugging | Basic Visual Studio Debugging（这是一位印度博主视频，我下面做到笔记也主要参考她的视频，但不得不说口音太重了，一股咖喱味） 目录个人对调试浅显的认识和对调试的介绍逐行调…...

编程日记 2025/7/4 22:23:09

10.2linux内核定时器实验(详细编程)_csdn

我尽量讲的更详细，为了关注我的粉丝！！！ 本章使用通过设置一个定时器来实现周期性的闪烁 LED 灯，因此本章例程就使用到了一个LED 灯。这里我们以毫秒为单位，所以要用msecs_to_jiffies这个函数。如果是2s就…...

编程日记 2025/8/14 14:22:09

机器学习——正则化、欠拟合、过拟合、学习曲线

过拟合（overfitting）:模型只能拟合训练数据的状态。即过度训练。避免过拟合的几种方法： ①增加全部训练数据的数量（最为有效的方式） ②使用简单的模型（简单的模型学不够，复杂的模型学的太多&am…...

编程日记 2025/8/13 14:39:37

Java多线程与高并发专题——阻塞和非阻塞队列的并发安全原理是什么？

引入之前我们探究了常见的阻塞队列的特点，在本文我们就以 ArrayBlockingQueue 为例，首先分析 BlockingQueue ，也就是阻塞队列的线程安全原理，然后再看看它的兄弟——非阻塞队列的并发安全原理。 ArrayBlockingQueue 源码分析 …...

编程日记 2025/8/15 9:11:49

git 撤销某次提交的上交到远程服务器的commit提交，此提交后面的commit需要保留【deeepseek生成】

核心思路使用 git rebase -i 重写提交历史，删除目标提交后强制推送到远程（需谨慎操作）。操作步骤 1. 确认要删除的提交位置 # 查看提交历史（找到要删除的提交哈希，例如 a1b2c3d） git log --oneline查看提…...

编程日记 2025/8/11 0:08:42

docker composeyaml文件，什么是swap-space，内存不足硬盘来凑，--ipc=host，yaml文件、环境变量、容器报警健康检查

--swap-space 参数明确针对的是系统内存（RAM），与显存（GPU Memory）无关。以下是关键区分： 内存（RAM） vs 显存（GPU Memory） 类型内存（RAM&#xff…...

编程日记 2025/8/7 13:06:50

tsfresh：时间序列特征自动提取与应用

tsfresh：时间序列特征自动提取与应用本文系统介绍了 tsfresh 技术在 A 股市场数据分析与量化投资中的应用。从基础特征提取到高级策略开发，结合实战案例，详细讲解了如何利用 tsfresh 构建量化投资策略，并优化风险控制&#xff0c…...

编程日记 2025/8/11 22:52:35

【A2DP】深入解读A2DP中通用访问配置文件（GAP）的互操作性要求

目录一、模式支持要求 1.1 发现模式 1.2 连接模式 1.3 绑定模式 1.4 模式间依赖关系总结 1.5 注意事项 1.6 协议设计深层逻辑二、安全机制（Security Aspects） 三、空闲模式操作（Idle Mode Procedures） 3.1 支持要求 …...

编程日记 2025/8/13 5:51:59

CUDA编程之内存

CUDA的内存类型有全局内存、共享内存、常量内存、纹理内存、本地内存、寄存器等。我们需要分别了解它们的特点和使用场景。在CUDA编程中，合理利用各种内存类型对性能优化至关重要。 1. ‌全局内存（Global Memory）‌ ‌特点‌：设…...

编程日记 2025/8/14 20:29:21

【Agent实战】货物上架位置推荐助手（RAG方式+结构化prompt（CoT）+API工具结合ChatGPT4o能力Agent项目实践）

本文原创作者：姚瑞南 AI-agent 大模型运营专家，先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗；多年人工智能行业智能产品运营及大模型落地经验，拥有AI外呼方向国家专利与PMP项目管理证书。（转载需经授权）目录结论效果图示 1.prompt 2. API工具封…...

编程日记 2025/8/10 10:44:24

ffmpeg面试题整理

1. 基础概念问题：FFmpeg 是什么？它的核心功能有哪些？ 编解码：支持几乎所有音视频格式（如 H.264, AAC, MP3）。转换：在不同容器格式之间转换（如 MP4 → MKV）。流处理&…...

编程日记 2025/8/13 18:45:16

Idea运行项目报错:java.lang.OutOfMemoryError: Java heap space 解决方法

问题描述 Maven构建的时候，一直报错java.lang.OutOfMemoryError: Java heap space 尝试解决找了几个JAVA高级小伙伴，一起去百度了各种可能，设置内存大小，发现都不行，还不断的重装了IDEA，以为是这个版本…...

编程日记 2025/8/15 1:55:37

解决 Linux /dev/mapper/ubuntu--vg-ubuntu--lv 磁盘空间不足的问题

解决 Linux /dev/mapper/ubuntu–vg-ubuntu–lv 磁盘空间不足的问题 https://blog.csdn.net/weixin_47908992/article/details/139882219 查看LVM卷组的信息 vgdisplay rootubuntu:~# vgdisplay--- Volume group ---VG Name ubuntu-vgSystem ID Fo…...

编程日记 2025/8/14 8:05:09

前端UI编程基础知识：基础三要素（结构→表现→行为）

以下是重新梳理的前端UI编程基础知识体系，结合最新技术趋势与实战要点，以更适合快速掌握的逻辑结构呈现： 一、基础三要素（结构→表现→行为） 1. HTML5 核心能力 • 语义化标签：<header>, <nav&g…...

编程日记 2025/8/15 7:25:01

Trae：与AI结伴，开启编程新体验

Trae：与AI结伴，开启编程新体验在数字化时代，编程已经成为推动技术发展的核心力量。然而，随着项目复杂度的增加，开发者面临着诸多挑战，例如代码编写效率低下、代码质量难以把控等。如今，Trae作…...

编程日记 2025/8/15 1:29:23

如何用正则表达式爬取古诗文网中的数据（python爬虫）

一、了解正则表达式的基本内容： 什么是正则表达式正则表达式（Regular Expression，简称 regex）是一种用于匹配字符串的模式。它通过特定的语法规则，可以高效地搜索、替换和提取文本中的特定内容。正则表达式广泛应用于…...

编程日记 2025/8/14 22:52:06

深度学习 Deep Learning 第1章深度学习简介

第1章深度学习简介概述本章介绍人工智能（AI）和深度学习领域，讨论其历史发展、关键概念和应用。解释深度学习如何从早期的AI和机器学习方法演变而来，以及如何有效解决之前方法无法应对的挑战。关键概念 1. 人工智能的演变 …...

编程日记 2025/8/10 20:25:10

ByteByteGo学习笔记：通知系统设计

引言在当今这个信息爆炸的时代，通知系统已经成为了现代应用程序中不可或缺的重要组成部分。无论是突发新闻的即时推送、产品更新的及时告知、促销活动的精准触达，还是用户交互的实时反馈，通知都扮演着至关重要的角色。一个高效、可靠、可扩…...

编程日记 2025/8/10 18:43:41

[设计模式]1_设计模式概览

摘要：设计模式原则、设计模式的划分与简要概括，怎么使用重构获得设计模式并改善代码的坏味道。本篇作概览与检索用，后续结合源码进行具体模式深入学习。目录 1、设计模式原理核心原则（语言无关） 本质原理图原…...

编程日记 2025/8/9 4:58:33

Python + Qt Designer构建多界面GUI应用程序：Python如何调用多个界面文件

引言 Qt Designer是一个用户友好的图形用户界面设计工具，它可以帮助开发人员通过拖放的方式快速创建界面。在实际开发中，往往需要设计多个界面文件，并在Python代码中进行统一管理和使用。本文将介绍如何在Python中使用Qt Designer设计好的多…...

编程日记 2025/8/11 0:51:30

AGI大模型（7）：提示词应用

1 生成数据 LLM具有⽣成连贯⽂本的强⼤能⼒。使⽤有效的提示策略可以引导模型产⽣更好、更⼀致和更真实的响应。LLMs还可以特别有⽤地⽣成数据，这对于运⾏各种实验和评估⾮常有⽤。例如，我们可以使⽤它来为情感分类器⽣成快速样本，如下所示：提示：⽣成10个情感分析的范…...

编程日记 2025/8/12 5:23:32

【倒霉bug2025】找不到vc_runtimeMinimum_x64.msi

今天是倒霉的一天，当喉咙痛到无法出门玩耍的我打开steam准备开始玩《冰封世界》时，游戏启动直接报错在选择安装之后弹出一个经典窗口然后在C:\ProgramData\PackageCache中找msi到位置点击确定继续报错说msi版本不对上网一搜，找不到vc_ru…...

编程日记 2025/8/11 14:42:34

什么是强哈希算法pbkdf2(Password-Based Key Derivation Function)

文章目录什么是pbkdf2使用场景在线工具什么是pbkdf2 维基百科：https://zh.wikipedia.org/zh-cn/PBKDF2 PBKDF2（Password-Based Key Derivation Function 2）是一种基于密码的密钥派生函数。它的主要作用是从密码和盐（salt&…...

编程日记 2025/8/15 4:54:33

Python 基础语法详解

一、变量和数据类型变量在 Python 中，变量无需声明类型，直接赋值即可。变量名区分大小写。 # 整数类型 age 25 print(age) # 输出：25# 浮点数类型 height 1.75 print(height) # 输出：1.75# 字符串类型 name "张三&…...

编程日记 2025/8/12 5:49:11

AI Agent 时代开幕-Manus AI与OpenAI Agent SDK掀起新风暴

【本周AI新闻: AI Agent 时代开幕-Manus AI与OpenAI Agent SDK掀起新风暴】 https://www.bilibili.com/video/BV1bkQyYCEvQ/?share_sourcecopy_web&vd_source32ed33e1165d68429b2e2eb4749f3f26 最近AI圈子里最火的话题非Manus莫属！这款由中国武汉创业公司“蝴…...

编程日记 2025/8/11 21:20:03

为什么会出现redis数据库？redis是什么？

什么是 Redis? 为什么要用 Redis? 下面我将从 Redis 出现的背景、Redis 的解决方案个来回答。 1、Redis 出现的背景互联网的应用越来越多，例如社交网络、电商、实时服务发展的十分迅速，这就导致了传统技术栈（如关系型数据库）…...

编程日记 2025/8/11 15:42:24

每日一题---dd爱框框（Java中输入数据过多）

dd爱框框实例： 输入： 10 20 1 1 6 10 9 3 3 5 3 7 输出： 3 5 这道题要解决Java中输入的数过多时，时间不足的的问题。应用这个输入模板即可解决： Java中输入大量数据 import java.util.*; import java.io.*;pu…...

编程日记 2025/8/12 19:27:52

Flink-学习路线

最近想学习一下Flink，公司的实时需求还是不少的，因此结合ai整理了一份学习路线，记录一下。当然，公司也有Scala版本Flink框架，也学习了一下。这里只说Java版本 1. Java基础目标: 掌握Java编程语言的基础知识。内容…...

编程日记 2025/8/11 13:25:28

一次Milvus迁移的记录

前言希望把Linux上生产环境中使用docker compose运行的milvus迁移到本地(mac os)的docker compose中操作过程找到了官方有两个相关的项目： https://github.com/zilliztech/milvus-backup https://github.com/zilliztech/vts 但是…我都没用，因为使…...

编程日记 2025/8/13 1:30:17

矩阵的转置

对于的矩阵，使用两个指针变量，可以方便实现(i,j)处元素与(j,i)处元素交换位置。令指针Arow&A[i][0]，则Arow[j]可实现对第i行j列元素的访问。令指针Bptr&A[0][i]，则*Bptr就可以访问(0,i)处元素，然后&#xff0c…...

编程日记 2025/8/12 11:09:01

使用 VLOOKUP 和条件格式在 Excel 中查找并标红匹配的串号

使用 VLOOKUP 和条件格式在 Excel 中查找并标红匹配的串号你的步骤非常详细且清晰，能够帮助用户在 Excel 中通过 VLOOKUP 和条件格式来查找并标红匹配的串号。以下是对你提供的步骤的简要总结和补充说明： 1. 添加“是否匹配”列在 a.xlsx 中新增一列…...

编程日记 2025/8/9 8:56:28

Python Matplotlib面试题精选及参考答案

目录绘制函数 y=2x+5 在区间 [1,10] 的折线图，设置标题和坐标轴标签在同一图中绘制 sin (x) 和 cos (x) 曲线，添加图例和网格线（x∈[0,2π]）绘制分段函数：当 x<0 时 y=0，x≥0 时 y=x，设置不同线段颜色绘制带数据点的折线图，使用红色虚线样式和圆形标记（数据…...

编程日记 2025/8/14 16:53:17

在线 SQL 转 SQLAlchemy：一键生成 Python 数据模型

一款高效的在线 SQL 转 SQLAlchemy 工具，支持自动解析 SQL 语句并生成 Python SQLAlchemy 模型代码，适用于数据库管理、后端开发和 ORM 结构映射。无需手写 SQLAlchemy 模型，一键转换 SQL 结构，提升开发效率，简化数据库…...

编程日记 2025/7/15 16:59:20

基于自定义线程池手写一个异步任务管理器

我们在后端执行某些耗时逻辑操作时往往会导致长时间的线程阻塞，在这种情况之下，我们往往会引一条异步线程去处理这些异步任务，如果每次都创建新的线程来处理这些任务，不仅会增加代码冗余，还可能造成线程管理混乱&#…...

编程日记 2025/8/10 22:49:25

基恩士PLC编程小技巧八：脚本过长如何实现换行及替换

基恩士PLC编程小技巧八：脚本过长如何实现换行？ 一、问题点我们在使用基恩士编程软件KV STUDIO 进行脚本编程时，经常遇到这样的问题：脚本的一行过长，程序不好阅读及维护。 IF MR1000 OR MR1001 OR MR1002 OR MR1003 OR…...

编程日记 2025/8/13 22:35:26

每日一题---数组中两个字符串的最小距离

数组中两个字符串的最小距离给定一个字符串数组strs，再给定两个字符串str1和str2，返回在strs中str1和str2的最小距离，如果str1或str2为null，或不在strs中，返回-1。链接：数组中两个字符串的最小距离__牛…...

编程日记 2025/8/10 17:21:38

【PTA题目解答】7-1利用STL比较数据大小并排序（15分）c++

1.题目： 2.算法原理根据题目要求，模拟即可，set容器会帮我们把插入的数自动排序好题目说输入非整型数据就停止，不用特意判断输入的数据是整型还是非整型，如果用户输入的是字符（例如 a）&#…...

编程日记 2025/8/12 16:47:24

如何用Deepseek制作流程图？

使用Deepseek制作流程图，本质上是让AI根据你的需求，生成相关流程图的代码，然后在流程图编辑器中渲染，类似于Python一样，ChatGPT可以生成代码，但仍需在IDE中执行。你知道绘制流程图最高效的工具是什么吗&a…...

编程日记 2025/8/11 19:33:49

【09】单片机编程核心技巧：变量赋值，从定义到存储的底层逻辑

【09】单片机编程核心技巧：变量赋值，从定义到存储的底层逻辑 🌟 核心概念单片机变量的定义与赋值是程序设计的基础，其本质是通过 RAM（随机存储器） 和 ROM（只读存储器） 的协作实现…...

编程日记 2025/8/15 13:21:31

vscode python相对路径的问题

vscode python相对路径的问题最近使用使用vscode连接wsl2写python时，经常遇到找不到包中的方法的问题，最终发现vscode在执行python代码时目录不是从当前python文件开始算起，而是从当前工作区的目录开始算起，比如说我打开的是/ho…...

编程日记 2025/8/9 1:22:37

C语言中的指针与函数

引言在C语言编程中，指针是一个非常重要且强大的概念。它不仅帮助我们高效地管理内存，还能提升程序的灵活性和性能。而指针与函数的结合使用，是C语言中非常常见且极具挑战性的一个话题。正确理解和使用指针与函数的关系，不仅能帮助程序员提高代码质量，还能优化程序的执行…...

编程日记 2025/8/10 23:03:10

深度学习-服务器训练SparseDrive过程记录

1、cuda安装 1.1 卸载安装失败的cuda 参考：https://blog.csdn.net/weixin_40826634/article/details/127493809 注意：因为/usr/local/cuda-xx.x/bin/下没有卸载脚本，很可能是apt安装的，所以通过执行下面的命令删除： a…...

编程日记 2025/8/9 11:29:40

理解langchain langgraph 官方文档示例代码中的MemorySaver

以下是langchain v0.3官方示例代码 from langgraph.checkpoint.memory import MemorySaver from langgraph.graph import START, MessagesState, StateGraph# 可以理解为：定义一个流程，这个流程中用到的数据类型是Messages。 <---定义一个有向图&…...

编程日记 2025/8/12 1:52:52