您的位置:首页技术文章
文章详情页

javascript - 请问 chrome 为什么会重复加载图片资源?

【字号: 日期:2023-03-26 18:39:55浏览:32作者:猪猪

问题描述

javascript - 请问 chrome  为什么会重复加载图片资源?

如图所示,发现预加载图片后,重复调用图片的时候触发了重复的图片资源( 确定图片资源路径是一致的 )加载。

在手机端没有发现这样的情况,但是在 chrome 上很容易出现类似的情况,每次重复加载的图片资源不相同。

重复请求一两次后,便不会再重复请求。

请问是什么原因导致了这样的情况出现?

html 头部

<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0'><meta name='format-detection' content='telephone=no, date=no, address=no, email=no, url=no'><meta http-equiv='Cache-Control' content='no-cache, no-store, must-revalidate'><meta http-equiv='Pragma' content='no-cache'><meta http-equiv='Expires' content='0'>

stackoverflow 上相同问题:https://stackoverflow.com/que...

问题解答

回答1:

http请求是304,实际上这张图片是从浏览器缓存里面加载的

引用: 对 HTTP 304 的理解

最近和同事一起看Web的Cache问题,又进一步理解了 HTTP 中的 304 又有了一些了解。 304 的标准解释是:Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 如 果客户端在请求一个文件的时候,发现自己缓存的文件有 Last Modified ,那么在请求中会包含 If Modified Since ,这个时间就是缓存文件的 Last Modified 。因此,如果请求中包含 If Modified Since,就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件,例如:CSS、图片,服务器会自动完成 Last Modified 和 If Modified Since 的比较,完成缓存或者更新。但是对于动态页面,就是动态产生的页面,往往没有包含 Last Modified 信息,这样浏览器、网关等都不会做缓存,也就是在每次请求的时候都完成一个 200 的请求。 因此,对于动态页面做缓存加速,首先要在 Response 的 HTTP Header 中增加 Last Modified 定义,其次根据 Request 中的 If Modified Since 和被请求内容的更新时间来返回 200 或者 304 。虽然在返回 304 的时候已经做了一次数据库查询,但是可以避免接下来更多的数据库查询,并且没有返回页面内容而只是一个 HTTP Header,从而大大的降低带宽的消耗,对于用户的感觉也是提高。 当这些缓存有效的时候,通过 HttpWatch 查看一个请求会得到这样的结果:

标签: JavaScript
相关文章: