前端项目上线后,页面因浏览器缓存未刷新问题

您所在的位置:网站首页 电脑页面强制刷新怎么弄 前端项目上线后,页面因浏览器缓存未刷新问题

前端项目上线后,页面因浏览器缓存未刷新问题

2024-01-17 22:36| 来源: 网络整理| 查看: 265

当前端页面开发测试完成后进行上线时,有时候在将更新的页面上传到服务器之后,浏览器并没有立即展示新的页面,而继续渲染旧的页面。这是因为浏览器默认会对已访问过的页面进行缓存,以提高性能。因此,当页面内容发生变动时,浏览器会仍然使用缓存中的旧页面,而无法获取到最新的页面内容。

虽然刷新或者清除缓存能解决这方面的问题,但是用户并不知道什么时候需要清除缓存,或者根本不知道如何操作。

所以,需要解决文件变动后浏览器没有更新的问题。

解决方案

一般情况下css、js 和 img 的名字都加了哈希值,所以新版本和就版本的名字是不同的,不会有缓存问题。

但是把打包好的index.html放到服务器后,index.html在服务器端可能是有缓存的。

所以只要 入口文件不缓存 这样就解决问题了。在入口文件head中添加以下代码即可:

Expires:在HTTP响应头中设置Expires字段,用于指定页面的过期时间。当浏览器在过期时间之前再次请求同一资源时,如果服务器返回的响应中包含"Expires"字段且未过期,浏览器将直接使用缓存的资源,而不再向服务器发送请求。Expires是HTTP 1.0版本引入的机制,但它存在一些问题,比如无法处理时钟不同步、不灵活的过期时间等。

Pragma:在HTTP请求头中使用Pragma字段,通常值为"no-cache"。当浏览器发送请求时,如果请求头中带有Pragma字段且值为"no-cache",服务器将不使用缓存,并强制要求服务器每次都返回新的响应。然而,Pragma的使用已经过时,Cache-Control是现代浏览器更推荐的缓存控制方式。

Cache-Control:在HTTP响应头中使用Cache-Control字段来控制缓存行为。Cache-Control是HTTP 1.1版本引入的缓存机制,提供了更为灵活和强大的缓存控制选项。通过设置Cache-Control的值,可以指定缓存的策略,如"no-cache"(不使用缓存)、“public”(可以被任何人缓存)、“private”(只能被浏览器缓存)、“max-age”(缓存的最长时间)等等。

Cache:Cache(缓存)是指浏览器在第一次请求某个资源后,将该资源保存在本地存储中的一部分。这样,在再次请求同一个资源时,浏览器可以直接从本地缓存中获取资源,而无需重新下载。通常,浏览器缓存可以提升网页加载速度,减轻服务器负担。

综上所述,Expires指定资源的过期时间,Pragma可用于禁用缓存,Cache-Control提供了更灵活的缓存控制选项,而Cache是指存储在浏览器本地的缓存资源。

参考资料: 前端项目上线后,浏览器缓存未刷新问题浏览器缓存机制详解


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3