堆栈内存溢出
  简体   繁体   English

JavaScript缓存无效化图片源

[英]Javascript cache busting image source

 原文  2017-02-04 07:54:08  8   2    javascript/ caching/ browser-cache

问题描述

If I have only one image source and I do this: 如果我只有一个图像源并且执行此操作： 

var url = 'http://path/to/some/image.jpg'

for(var i=0; i < 100; i++){
   var imgsrc = url + "?rand=" + (Math.random() * 99999999);
   $('<img src="+imgsrc+" />').appendTo(...);
}

Is this absolutely the same strain on browser memory like loading 100 completely different images or there is something else? 这是否对浏览器内存造成了相同的压力，例如加载100张完全不同的图像，还是还有其他东西？

I can see that in console that browser loads every image, but I need to be sure because I have a test application which loads lots if images, and I need to replicate test environment without setting source to each new image individually. 我可以在控制台中看到浏览器会加载每个图像，但是我需要确定一下，因为我有一个测试应用程序，如果图像会加载很多图像，并且我需要复制测试环境而不必分别为每个新图像设置源。

2 个解决方案

解决方案1
 1  2017-02-04 09:06:49

So I set out to test this, and it seems that the browser will think that images served from different URLs are different images and will not de-duplicate them, caching or network request wise, even if only the query-string changes. 因此，我开始进行测试，看来浏览器会认为从不同URL提供的图像是不同的图像，即使仅查询字符串发生变化，也不会对它们进行重复数据删除，缓存或网络请求。

Test process 测试过程

So first the setup, a minimal express server: 因此，首先设置一个最小的快递服务器： 

testServer/
  index.js
  index.html
  assets/
    static-image.jpg

index.js : index.js ： 

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.sendFile('index.html', { root: __dirname })
})

app.get('/img', (req, res) => {
  const tag = req.query.rand
  res.sendFile('assets/static-img.jpg', { root: __dirname })
})

app.listen(process.env.PORT || 8080)

index.html : index.html ： 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Test page</title>
  </head>

  <body>
    <div id="images">
    </div>

    <script>

      const url = '/img'
      const container = document.getElementById('images')

      for (let i=0; i < 100; i++) {
        const imgSrc = `${url}?rand=${Math.random() * 99999999}`
        const img = new Image(200, 200)
        img.src = imgSrc
        container.appendChild(img)
      }

    </script>
  </body>
</html>

Now let's start the app with node index.js and load localhost:8080 in our browser: 现在，让我们使用node index.js启动应用程序，并在浏览器中加载localhost:8080 ：

index.html

The image has been correctly loaded on every instance, let's check the log of received HTTP headers to see if the image has been downloaded every time: 该图像已在每个实例上正确加载，让我们检查接收到的HTTP标头的日志，以查看是否每次都下载了该图像： 

http://localhost:8080/

GET / HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Upgrade-Insecure-Requests: 1

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sat, 04 Feb 2017 08:39:55 GMT
Etag: W/"1da-15a08479c08"
Content-Type: text/html; charset=UTF-8
Content-Length: 474
Date: Sat, 04 Feb 2017 08:45:11 GMT
Connection: keep-alive
----------------------------------------------------------
http://localhost:8080/img?rand=9601808.592702283

GET /img?rand=9601808.592702283 HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/
Connection: keep-alive

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sun, 07 Feb 2106 06:28:15 GMT
Etag: W/"85c0-3e7fffffc18"
Content-Type: image/jpeg
Content-Length: 34240
Date: Sat, 04 Feb 2017 08:45:12 GMT
Connection: keep-alive
----------------------------------------------------------
http://localhost:8080/img?rand=46816320.75854376

GET /img?rand=46816320.75854376 HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/
Connection: keep-alive

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sun, 07 Feb 2106 06:28:15 GMT
Etag: W/"85c0-3e7fffffc18"
Content-Type: image/jpeg
Content-Length: 34240
Date: Sat, 04 Feb 2017 08:45:12 GMT
Connection: keep-alive
----------------------------------------------------------
http://localhost:8080/img?rand=70878177.06809631

GET /img?rand=70878177.06809631 HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/
Connection: keep-alive

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sun, 07 Feb 2106 06:28:15 GMT
Etag: W/"85c0-3e7fffffc18"
Content-Type: image/jpeg
Content-Length: 34240
Date: Sat, 04 Feb 2017 08:45:12 GMT
Connection: keep-alive
----------------------------------------------------------
http://localhost:8080/img?rand=51281025.02663941

GET /img?rand=51281025.02663941 HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/
Connection: keep-alive

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sun, 07 Feb 2106 06:28:15 GMT
Etag: W/"85c0-3e7fffffc18"
Content-Type: image/jpeg
Content-Length: 34240
Date: Sat, 04 Feb 2017 08:45:12 GMT
Connection: keep-alive
----------------------------------------------------------
http://localhost:8080/img?rand=72492129.69256185

GET /img?rand=72492129.69256185 HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:8080/
Connection: keep-alive

HTTP/1.1 200 OK
X-Powered-By: Express
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Sun, 07 Feb 2106 06:28:15 GMT
Etag: W/"85c0-3e7fffffc18"
Content-Type: image/jpeg
Content-Length: 34240
Date: Sat, 04 Feb 2017 08:45:12 GMT
Connection: keep-alive
----------------------------------------------------------
[...]

And now let's check if the cache contains 100 separate instance of the image: 现在，让我们检查缓存是否包含100个单独的图像实例：

about:cache : about:cache ： 关于：缓存

To make certain that the browser doesn't combine the identical images on disk, I checked the size of the browser's cache before and after: 为了确保浏览器不会合并磁盘上的相同图像，我在浏览器之前和之后检查了浏览器缓存的大小： 

# Before loading test page
~/.cache/mozilla/firefox/u3lc193j.default/cache2 $   du -d0
335376  .
# After loading test page
~/.cache/mozilla/firefox/u3lc193j.default/cache2 $   du -d0
355724  .
# That's a way bigger difference than the size of the image
~/cacheTest/imageCache/assets/ $   du static-img.jpg
1528

So we have the answer: loading the same image with different query strings will indeed fill up the image cache. 因此，我们得到了答案：使用不同的查询字符串加载同一张图片确实会填满图片缓存。

This was tested on Firefox 52 and Chrome 55. 已在Firefox 52和Chrome 55上进行了测试。

解决方案2
 0  2017-02-04 09:41:20

var url = 'http://path/to/some/image.jpg';

for( var i = 0; i < 100; i++){
    var imgsrc = url + "?rand=" + (Math.random() * 99999999);
    var img = new Image();
    $('<img src="+imgsrc+" />').appendTo(...);
}

Operator: x += y 运算符：x + = y

Meaning: x = x + y 含义：x = x + y

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 ASP.NET Javascript缓存破坏 - ASP.NET Javascript cache busting Tapestry中用于缓存清除的javascript和CSS版本控制 - javascript and CSS versioning for Cache Busting in Tapestry 一种模式，使userId可用于JavaScript而不会破坏缓存 - A pattern to make userId available to a JavaScript without busting the cache 如何在 Spring Boot 中为 javascript“导入”启用缓存破坏（版本控制）？ - How to enable cache busting (versioning) for javascript "imports" in Spring Boot? 通过参数缓存破坏 - Cache busting via params 使用查询字符串缓存Busting - Cache Busting with Query Strings 样板缓存清除问题 - Boilerplate Cache Busting Question Angular 上的缓存破坏 - Cache busting on Angular 使用 Laravel 清除缓存 - Cache Busting with Laravel 在Leaflet标记弹出窗口中缓存Busting - Cache Busting in Leaflet marker popups
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM