个人中心
gpt4 book ai didi

Javascript 缓存破坏图像源

转载 作者：行者123 更新时间：2023-12-03 05:05:07 25 4
gpt4 key购买 nike

如果我只有一个图像源并且我这样做:

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:

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: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 上进行了测试。

关于Javascript 缓存破坏图像源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42037948/

25 4 0
文章推荐： javascript - 当未输入内容时如何从输入标签触发函数？
文章推荐： java - 如何配置 Gradle Java 平台以偏好更高的依赖版本？
文章推荐： android - 从 TravisCI 将 Android aar 库上传到 bintray
文章推荐： javascript - Vue 将 Unicode 转换为 HTML 标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com