登录  /  注册
javascript - 请问 chrome 为什么会重复加载图片资源?
PHP中文网
PHP中文网 2017-07-05 10:44:59
[JavaScript讨论组]

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

在手机端没有发现这样的情况,但是在 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...

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(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 查看一个请求会得到这样的结果:

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号