Question

我是网页设计的新手。如果我的理解是错误的，请纠正我。我正在寻求可以避免在以下情况下浏览器和服务器之间往返的建议。

想象一下javascript首先从服务器上下载所有30~50张图片。然后使用这些图像构建缩略图图像，每个缩小图像的尺寸为60px×60px左右，供用户选择。这种效果是通过css和一些免费的javascript库实现的。

单击其中一个缩略图图像后，javasrcipt会将该图像放在较大的画布上。较大图像的尺寸根据其原始尺寸确定为大约900px×600px或更大。为了获得图像的原始大小，我在客户端编写了类似于下面的javascript：

var img=new Image();
img.src="uploaded1.jpg";
var w,h;
w=img.width;
h=img.height;

我的问题是这种设计在流量方面效率非常低，因为每张图片都会被下载3次：

用于渲染图片库

img.src="uploaded1.jpg";

用于在javascript添加DOM节点后呈现大尺寸图像：<img src="uploaded1.jpg" alt="big image"/>

此外，我希望允许用户随时上传更多图片，并将这些图片添加到图库。为了实现这一点，一些javascript必须设计为从服务器下载完全相同的图像，这是同一个浏览器刚刚上传到服务器，以便它们可以像这样添加到DOM：

<img src="new1.jpg" alt="new image 1"/>
<img src="new2.jpg" alt="new image 2"/>

对我来说没有意义的是这些图片制作的浏览器和服务器之间的往返行程。当浏览器掌握这些图像的第一手资料时，浏览器显然没有必要从服务器重新加载相同的图像。

因为它是上传这些图像文件并渲染图像的浏览器，理论上应该存在某种方式告诉浏览器重用这些图像 - 在上传之前或之后渲染它们。该页面必须设计为以低效的方式工作，因为在HTML世界中，javascript无法通过操作DOM将内存中的图像提供给浏览器。

SVG的local IRI reference可能会有所帮助。我可以在<image>下实现<defs>元素，但我不确定浏览器（特别是IE 9）会在每次<image>被其他元素引用时再次盲目地从服务器检索相同的图像。关于SVG的启示将不胜感激。

我还阅读了有关http /浏览器缓存的文章，并且给人的印象是浏览器缓存不可靠，因为用户可以手动禁用缓存，并且缓存大小可以设置得太小，无法容纳大量图像。此外，缓存机制无法消除不必要的往返，如前面提到的“upload-then-download-image-to-to-gallery”场景。

顺便说一句，flash是我想要学习和使用的最后一件事。

最诚挚的问候，

CN

enter code here

Answer 1

我不确定，但我认为告诉浏览器重用图像的最佳方法不是更改文件名，也不更改文件本身。应该每次使用相同的路径访问它。对同一文件的后续请求应该导致从浏览器的缓存中获取文件，对吧？实现此目的的方法是使用文件命名算法，为同一图像/缩略图提供始终相同的名称。如果您上传文件，AFAIK文件不在浏览器缓存中，由于文件名通常不同，因此必须下载一次。在我的实践中，浏览器缓存通常过于热心并且缓存了太多数据（这导致修改通过AJAX加载的文件时出现问题，缓存应该明确禁用以进行测试，并启用生产）。您是否使用FireBug和Chrome资源跟踪器测试了您的网站？

顺便说一句，我希望你不要在服务器上呈现更大的图像。这可能是非常无效的，特别是如果经常这样做的话。 canvas对象有大量快速简便的方法可用于大多数基本图像处理任务，因此加载的唯一图像应该是之前上传的图像。应该在服务器端做的唯一事情就是缩小规模。由于浏览器无法从远程站点访问本地文件，因此无法直接在客户端进行此操作。应该将该规则的每个例外报告为主要错误。

路线{完整尺寸的用户文件} - ＆gt; {server} - ＆gt; {缩小} - ＆gt; {client}似乎是不可避免的。

避免从服务器重复检索图像

1 个答案: