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 查看一个请求会得到这样的结果:
相关文章:
1. javascript - 小白求解:mac 下如何设置nodejs express的 NODE_NEV 环境变量2. javascript - jQuery中live事件在移动微信端下没有效果;代码如下3. mysql5.7 json查询支持4. javascript - js 修改表格元素的,可以用DOM操作实现吗?5. 找一个权威、实战的微信扫码授权登录网站的开发教程或者文章6. html5 - 目前 公司App 嵌入H5页面 做个 手机支付功能 没有做过 所以 请求各位有经验的 给个思路7. javascript - 请问一下react-native 布局的时候,尺寸的大小是如何确定的呢?8. Python如何考虑代码注入安全?9. javascript - 实参和形参有哪些通俗的命名吗?尤其形参10. javascript - avalon.js ms-on 事件绑定无效 ?