Question

我正在调查我们在网络表单中遇到的性能问题，并认为我会在此处征求一些意见。

此页面在服务器端加载时，检索ID值列表，然后用于播种在加载事件结束时添加的javascript块。然后，javascript循环遍历这些ID，并为每个此类ID添加img元素，使用ID设置src属性。

此前，由于仅显示前20个此类图像的限制，此工作正常。业务现在想要删除这个限制，这意味着我们可以合理地看到数百个这样的图像，并且在测试时，页面花费了不可接受的长时间来呈现所有这些img元素。

JS的简化伪代码：

for (var i = 0; i < ids.length; i++) {
     var img = "<img src='some\path\'" + ids[i];
     //add img to document
}

就个人而言，我建议我们暂时保留限制，因为我们在此版本的开发周期已经很晚了，但我想看看我们能做些什么，以加快速度。所有选项都在桌面上，我们只需要显示所有图像。是否有替代策略来处理这种情况？

如果有任何其他细节有益，请告诉我的修改
我没有提到需要加载所有这些图像的原因是该页面用于打印所有这些图像，因此分页不会真正起作用。我同意这不是一个伟大的设计选择，但用户和/或企业主想要一个打印友好的页面，显示所有这些图像。相同功能的“普通”页面确实使用分页并且表现令人钦佩 编辑2
现在我回到办公室，我可以提供更多细节：

img元素使用aspx页面作为其src，实际图像内容从该另一页面的数据库中检索，并使用image / png的内容类型作为响应进行流式传输，因此进一步减慢，但鉴于目前的架构，我们只需将这些图像存储在数据库中
这些图像的大小可能不同，但单个图像的几MB不会出现异常

这些回应证实了我的想法：这不是一个好主意

Answer 1

不要一次显示所有内容。没有人可以合理地同时处理100个图像。使用某种分页机制，一次显示10个图像。

它可能是您自己的分页或十几个jQuery图像滑块/旋转器/画廊中的一个。

Answer 2

浏览器加载图像的速度受到许多因素的限制，例如

浏览器将执行的最大并发HTTP请求数
图像大小
加载图像的延迟和连接速度
用户具有的特定浏览器
用户拥有的特定硬件

最大并发HTTP请求数通常为每个域。将图像放置在许多不同的域上将有助于解决这一瓶颈问题。它也是一个非常复杂的解决方案，我不建议你这样做（只包括完整性的选项）。

如果没有经过最佳编码，您可以缩小图像的大小。

您可以通过将图像放在CDN（内容分发网络）上来缩短延迟并提高连接速度。

在一天结束时，加载100张图片可能是一个糟糕的设计选择。

相反，请考虑根据用户需要动态加载其他图像。举例来说，如果此行为是您在Facebook等网站上看到的无限滚动。

<强>更新

当您要加载页面以打印它时，您可以专注于我列表中的前三个要点。

您可能还会考虑使用服务器端代码将所有图像渲染为一个大图像。这可能比打开数百个HTTP连接以检索单个图像更快。这种方法的缺点（除了额外的复杂性）是渲染的“巨型”图像不会被CDN缓存（缓存它没有任何好处。请求该组合的用户已将其缓存在浏览器中，并且如果没有其他地理位置相邻的用户可能会要求相同的图像组合，则没有任何好处。

如果您有数百张图像适合打印在单页上（缩略图），请确保图像不大于打印质量所需的图像。如果你的PNG每个都是几MB，那么对于打印质量的缩略图来说，它们可能方式太大了。

Answer 3

要创建包含多张图片（数百张）到打印的快速加载页面，您无法以高分辨率使用png。

首先将所有图像转换为jpg（保留原件），其大小应足以打印。

150dpi就足够了。

这意味着如果您将2张图片并排放在20厘米宽的纸张上500像素就足以达到最大宽度。

每张图片约5-15kb

如果你在photopaper 1200pixels上打印。（但是每张图片加载30-40kb需要更长的时间）

然后在大多数浏览器中，您可以使用英寸或厘米来创建漂亮的插页。

如果要在一个页面上打印这些图像，可以使用打包脚本计算每个图像的最大尺寸。

像这样

var best_square3=function(w,h,n){
 var s=Math.sqrt(w*h/n),c=Math.floor(w/s),r=Math.floor(h/s),t=c*r;
 while(t<=n){
  s--;
  c=Math.floor(w/s);
  r=Math.floor(h/s);
  t=c*r;
 }
 return [w,h,n,s,c,r,c*r,Math.floor(s),((100/w)*(w/c))+'%',((100/h)*(h/r))+'%'];
}

demo ....点击结果框内的某个地方

http://jsfiddle.net/e7My4/1/

在这种情况下，您的图像可以小得多。所以100px * 100px max。

我个人使用php和fpdf创建pdf来下载/打印everythime我更新images / db

修改

当你使用aspx（我多年不使用它）你需要找到一个aspx脚本来重新调整图像大小，然后以较小的格式输出它们（就像我上面告诉你的那样），因为你不喜欢需要透明度。

在单页中渲染多个图像

3 个答案: