winkkkkk9421

为什么浏览器初次进入页面时会直接使用强缓存，导致资源不会更新，后续刷新则会使用协商缓存？

使用浏览器打开网址的时候网站的文档文件(index.html)会直接从缓存中读取(强缓存)，不会发起请求，而之后再从这个页面点击刷新按钮时就不会直接从缓存中读取了，而是进行协商缓存，如果文件发生改变了则会去获取最新的文件。 由于初次进入页面的时候直接从缓存中读取，所以导致了就算服务器上的文件改变了浏览器也不会更新，我希望可以在第一次进入浏览器的时候就进行协商缓存，如果文件发生了变化就重新请求资源。 因此，我想请教一下: 1.为什么产生这种现象 2.有什么解决方案,我现在想到的是通过js进行一次页面刷新 3.chrome浏览器可不可以使用js进行强制刷新(等同于 Ctrl+F5 的功能)，这个问题只是顺带问的，上面问题中提到的刷新就是普通的刷新。 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/506800a06135f19d45adefdceec51b1e.png) 使用的 "http-server" npm 包搭建的资源服务器。 问题展示 1. "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/5564203f8b347cb76fd896b79229ab21.png) 就算服务器上的资源更新了，此次进入页面也不会获取最新的内容 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/6c0e47045429c36a5c25476931068363.png) 2. 点击当前页面的刷新按钮(或者按 F5) 如果资源更新了，此次刷新就会获取最新的内容 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/1aa4c836b4fc5e97512d05d986d34b38.png) 补充 响应头中没有设置"Cache-Control"的也会有这种情况 "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/7ec50c5f44c2d84696765f2d1fb28eb1.png) "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241105/aa3343c3e608406bdebd817c800dcc3e.png)

萌蒙萌

为何已经缓存了的图片还是闪烁？

"加载 (1).gif" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241031/66fc4aa8ea9e09b16d36982fefccccf5.png) 额，GIF有点糊，将就看看吧。 图片我是使用以下方式提前加载的。 const img = new Image(); img.src = src; 浏览器这里使用的也是缓存，为什么还是会闪烁？ *** ...视频好像没有录到闪烁，但总之是有图片会闪烁的，有知道原因的朋友吗？ *** 大概到处试了试，没有闪烁了； 感觉用实体dom效果会好很多，不知道对不对。 const images = { img1: import('@/assets/images/public/calendar.svg'), ... }; type imagesKeys = keyof typeof images; let load = Object.keys(images).length; const imagesDom = document.createElement('div'); document.body.appendChild(imagesDom); function removeImagesDom() { if (--load == 0) document.body.removeChild(imagesDom); } // 创建一个任务，当浏览器空闲时执行 function newImage(src: string) { return function (deadline: IdleDeadline) { if (deadline.timeRemaining() > 0) { const img = document.createElement('img'); img.src = src; img.onload = removeImagesDom; imagesDom.appendChild(img); } else { requestIdleCallback(newImage(src)); } }; } for (const key in images) { if (Object.prototype.hasOwnProperty.call(images, key)) { images[key as imagesKeys].then((value: any) => { requestIdleCallback(newImage(value.default)); }); } }