如果我只有一个图像源并且我这样做:
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(...);
}
这对浏览器内存的压力是否与加载 100 个完全不同的图像完全相同，还是还有其他原因？
我可以在控制台中看到浏览器加载每个图像，但我需要确定，因为我有一个测试应用程序加载大量图像，并且我需要复制测试环境而不单独为每个新图像设置源。
最佳答案
所以我开始对此进行测试，浏览器似乎会认为从不同 URL 提供的图像是不同的图像，并且不会在缓存或网络请求方面对它们进行重复删除，即使只有查询字符串发生变化.
测试流程
首先设置一个最小的快速服务器:
testServer/
index.js
index.html
assets/
static-image.jpg
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:
<!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>
现在让我们使用 node index.js 启动应用程序并在浏览器中加载 localhost:8080:
图像已正确加载到每个实例上，让我们检查 log of received HTTP headers查看图像是否每次都已下载:
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
----------------------------------------------------------
[...]
现在让我们检查缓存是否包含 100 个单独的图像实例:
关于:缓存:
为了确保浏览器不会合并磁盘上相同的图像，我检查了前后浏览器缓存的大小:
# 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
所以我们有了答案:使用不同的查询字符串加载相同的图像确实会填满图像缓存。
这已在 Firefox 52 和 Chrome 55 上进行了测试。
关于Javascript 缓存破坏图像源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42037948/