new Image().src= "same url"编码两次,但浏览器只能捕获一个请求



请看下面的代码。Chrome 会在调试控制台中记录一个请求。如果这是因为缓存,为什么它不记录两个请求,最后一个是 304?

如何解释此浏览器行为?

<script>
new Image().src="//stackoverflow.com/"
new Image().src="//stackoverflow.com/"
</script>

浏览器已经下载了图像,为什么它会对同一图像发出另一个请求?如果一个图像在页面上被多次使用(这种情况经常发生(,那么对它使用的每个实例发出单独的请求会产生大量不必要的开销。假定同一网页中具有相同 URL 的两张图片是同一张图片。

您请求同一图像两次。该行为实际上在HTML5规范中描述。报价:

如果资源由绝对 URL 标识,并且资源是 使用幂等操作(例如 HTTP GET 或 等效(,并且由于其他原因已经下载 (例如,此算法的另一个调用(,并且此请求将是 与前一个相同(例如,相同的AcceptOrigin标头(,并且用户代理被配置为重用 来自现有下载的数据,而不是启动新下载, 然后使用现有下载的结果,而不是启动 新的。

HTML5> 通用基础结构> 获取资源> 处理模型

基本上,它说如果您多次请求完全相同的资源,浏览器只会下载一次(或者根本不下载它并从缓存中提供服务(。

相关规格按相反顺序排列:

  • HTML5> 通用基础结构> 获取资源>启用 CORS 的获取
  • HTML5> 嵌入内容> img 元素>更新图像数据

相关内容

最新更新