如果我只有一個影像來源，我這樣做：JavaScript緩存清除的圖像源

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個完全不同的圖像或有別的東西？

我可以看到，在控制檯，該瀏覽器加載每一個圖像，但我需要確保，因爲我有一個測試應用程序加載很多，如果圖像，我需要複製測試環境，而無需單獨設置每個新的圖像源。

來源

2017-02-04 Toniq

是的，與此代碼你只會有一百個錯誤。（除非你在與HTML相同的文件夾中有一個名爲'+ imgsrc +'的有效圖像文件，在這種情況下，它將採用它的緩存版本，但我懷疑這是你的意思。） – Kaiido

所以我開始測試這個，並且似乎瀏覽器會認爲來自不同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.

測試

來源

2017-02-04 09:06:49 lleaff

是的，我可以看到，在控制檯中，但我需要確定，因爲我有一個測試應用程序，如果圖像加載很多，並且我需要複製測試環境而無需單獨爲每個新圖像設置源。 – Toniq

我在加載頁面之前和之後添加了比較緩存大小的結果，如果這可以讓你更加確定。 – lleaff

如果您想完全確定您在每個瀏覽器中都避免了每個緩存機制，爲什麼不首先創建100個不同的圖像呢？我確定有一些工具可以用你喜歡的服務器端語言來完成，[如果你使用Node，這裏是一個例子]（https://www.npmjs.com/package/random-image-generator）。 – lleaff

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(...); 
}

算：X + = Y

含義：X = X + Y

來源

2017-02-04 09:41:20

JavaScript緩存清除的圖像源

回答

測試過程

相關問題