2017-02-04 97 views
0

如果我只有一個影像來源,我這樣做: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個完全不同的圖像或有別的東西?

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

+0

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

回答

0

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

index.html

的圖片已被正確地放置在每一個實例,讓我們檢查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:cacheabout: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.

測試
+0

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

+0

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

+0

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

0
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