Question

我正在构建一个带有转发器样式显示的页面，其中有数百个div容器，每个容器都包含一个表。像下面这样的东西，就像页面中的150多个一样。

我的问题是页面会如何表现？我看到从发送请求到页面的1.5分钟等待已满载。

回应了文档大小（在chrome开发人员工具中）是300KB ish 图像大约是1.5MB

然而获取完整文件所需的时间是1.3分钟加载图像是8秒。

<div style="width:100px; float:left;">
 <table>
  <tbody>
   <tr>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
   </tr>
   <tr>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
     <td><img src="server/getImage.aspx?id=xxxxxx"/></td>
   </tr>
  </tbody>
 </table>
</div>

Answer 1

在标记或CSS中定义图像尺寸。如果不这样，每次开始显示新图像时都会有页面重排。
- 用DIV替换你的表格。表向DOM添加不必要的元素，流/ dimsensions计算比简单的DIV（或任何块级元素）复杂得多
- 让服务器生成+存储缩略图（任何小于1.5MB的内容都可以被视为缩略图）。当用户悬停，点击，滚动或采取其他操作时...然后显示完整分辨率版本。
- 分页。没有理由每页显示150张图像（至少在页面首次加载时）。如果您已经进行了分页，请将“限制”降低到更易于管理的范围。
- 对于将出现在“折叠下方”（视口可见部分之外）的所有图像使用占位符。有许多JS库会将SRC交换为另一个属性，并使用一个小占位符填充SRC。然后，当您将图像滚动到视图中时，占位符将换出实际图像URL。
jQuery：http://www.appelsiini.net/projects/lazyload

YUI2：http://developer.yahoo.com/yui/imageloader/

YUI3：http://developer.yahoo.com/yui/3/imageloader/
- 在空闲时间加载图像（我认为您有加载150张高分辨率图像的原因）。

向现有产品学习：

http://images.google.com

就是一个很好的例子。在页面加载中，有几十个图像。向下滚动时，它会在您在视口中看到它们之前预取更多（大约50个块）。

Answer 2

通常你不想做这种事情，因为用户体验会受到影响，正如你所发现的那样。

找到一种方法来重新设计工作流程，以便显示更少的dom，并减少加载的内容。

另外，也许有些东西可以缓存在客户端？

Answer 3

每个请求都有一些开销，因此页面的性能会受到更多元素的影响。最好的解决方案是减少必要的负载数量，您可能需要考虑使用css sprites来减少必须加载的实际图像数量。

在Web服务器中启用保持活动连接可能会有所帮助，因为这会减少必须协商的连接数。另请注意，许多系统对可能对一台主机进行的同时连接数量施加限制，因此您一次只能下载其中两张图像。

也可以重新设计您的应用程序，因此不需要这么多图像，但我们需要了解有关该应用程序的更多信息。但是，一般情况下，我会鼓励您缓存这些图像，因为尝试在每个页面加载时生成许多图像会导致服务器被杀死。我还鼓励你使用Firebug（界面比Chrome工具[IMHO]更容易一些），以便更好地了解在加载过程的每个阶段花费了多少时间。

大量的Html表具有图像性能

3 个答案: