堆棧內存溢出
  簡體   English   中英

JavaScript緩存無效化圖片源

[英]Javascript cache busting image source

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

問題描述

如果我只有一個圖像源並且執行此操作： 

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張完全不同的圖像，還是還有其他東西？

我可以在控制台中看到瀏覽器會加載每個圖像，但是我需要確定一下，因為我有一個測試應用程序，如果圖像會加載很多圖像，並且我需要復制測試環境而不必分別為每個新圖像設置源。

2 個解決方案

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

因此，我開始進行測試，看來瀏覽器會認為從不同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 ：

index.html

該圖像已在每個實例上正確加載，讓我們檢查接收到的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
----------------------------------------------------------
[...]

現在，讓我們檢查緩存是否包含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上進行了測試。

解決方案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(...);
}

運算符：x + = y

含義：x = x + y

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 ASP.NET Javascript緩存破壞 Tapestry中用於緩存清除的javascript和CSS版本控制 一種模式，使userId可用於JavaScript而不會破壞緩存 如何在 Spring Boot 中為 javascript“導入”啟用緩存破壞（版本控制）？ 通過參數緩存破壞 使用查詢字符串緩存Busting 樣板緩存清除問題 Angular 上的緩存破壞 使用 Laravel 清除緩存 在Leaflet標記彈出窗口中緩存Busting
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM