所以我開始測試這個,並且似乎瀏覽器會認爲來自不同URL的圖像是不同的圖像,並且不會去重複它們,緩存或網絡請求明智,即使只有查詢字符串變化。
測試過程
因此,首先設置,最小Express服務器:
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單獨的實例:
about:cache
:
做出一定的瀏覽器不結合磁盤上的相同的圖像,我查了瀏覽器的高速緩存的大小前後:
# 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.
測試
是的,與此代碼你只會有一百個錯誤。 (除非你在與HTML相同的文件夾中有一個名爲'+ imgsrc +'的有效圖像文件,在這種情況下,它將採用它的緩存版本,但我懷疑這是你的意思。) – Kaiido