返回顶部
分享到

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

JavaScript 来源:互联网 作者:佚名 发布时间:2025-05-13 20:58:50 人浏览
摘要

一、 核心配置优化(前提是访问网站的请求能抵达服务器) 方案一:前端项目设置全局不缓存方案 运行逻辑:在H5服务器配置中增加Cache-Control: no-cache或max-age=0响应头,禁用静态资源缓存;

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

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 参数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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中自动触发);


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • NodeJS的使用与NPM包管理器介绍

    NodeJS的使用与NPM包管理器介绍
    如果你是一个前端程序员,你不懂得像PHP、Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择。如果你熟
  • JavaScript获取URL中参数值的方法
    在开发 Web 应用时,我们经常需要从 URL 中提取参数值,比如获取用户的查询条件、跟踪统计信息等。本文将详细介绍几种在 JavaScript 中获取
  • 前端发布缓存导致白屏几种解决方案
    一、 核心配置优化(前提是访问网站的请求能抵达服务器) 方案一:前端项目设置全局不缓存方案 运行逻辑:在H5服务器配置中增加Cache
  • 基于Vue3实现百度地图位置选择器组件
    在开发前端应用时,地图选择器是一个非常常见的需求。尤其是在一些需要用户选择地址的场景,如电商平台、旅游网站、酒店预定等,百
  • 无感知刷新Token示例介绍
    在前后端分离的应用中,使用Token进行认证是一种较为常见的方式。但是,由于Token的有效期限制,需要不断刷新Token,否则会导致用户认证
  • 独立使用umi的核心插件模块示例介绍
    今天我们做一个有趣的尝试,将 umi 的核心插件模块独立出来作为另一个框架的基础架构,这里我们将它称为 konos。 介于 umi 自身的源码的独
  • Nest.js之依赖注入原理及实现过程介绍
    很久之前初学Java时就对注解及自动依赖注入这种方式感觉到不可思议,但是一直没有勇气(懒)去搞清楚。现在做前端了,发现 Nest.js 里面
  • 20个拿来就能用的JavaScript技巧分享给大家
    1. 解构魔法:轻松提取值 解构允许你轻松地从数组或对象中解包值。以下是一个例子: 1 2 3 4 const person = { name: Alice, age: 30 }; const { name, ag
  • javascript入门教程基础篇介绍

    javascript入门教程基础篇介绍
    一、 简介 1、 什么是javascript JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言
  • 手把手教你从0搭建前端脚手架的全部详细教程

    手把手教你从0搭建前端脚手架的全部详细教程
    先来看一眼实现的效果。 从图上来看这个脚手架的功能非常的简单只有一个创建的命令,其他都是帮助和显示版本号的。 也就是上图这句,
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计