大量的Html表格与图像性能

我正在建立一个中继器样式显示的页面，其中有数百个div容器，每个容器都包含一个表格。类似于以下内容，并且在一个页面中有150多个。大量的Html表格与图像性能

我的问题是页面如何执行？发送请求到页面完全加载后，我看到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>

来源

2010-11-03 Eatdoku

您是否尝试过使用FireBug的“Net”面板？它会告诉你每个单独的请求需要多长时间。好奇你的瓶颈在哪里。（图片或文档） – 2010-11-03 23:22:09

定义标记或CSS中的图像尺寸。如果你没有，每次新图像开始显示时都会有页面重排。
- 用DIV替换你的表格。表格向DOM添加了不必要的元素，流程/缩减比例计算比简单的DIV（或任何块级元素）复杂得多
- 让服务器生成+存储缩略图（任何小于1.5MB的东西都可以考虑缩略图）。当用户悬停，点击，滚动或采取其他行动...然后您显示全分辨率版本。
- 分页。无理由每页显示150个图像（至少在页面首次加载时）。如果您已经分页，请将您的“限制”降低到更易于管理的程度。
- 对于在“折叠下方”（视口可见部分之外）出现的所有图像使用占位符。有许多JS库会将SRC交换为另一个属性，并用一个小占位符来填充SRC。然后，当您将图像滚动到视图中时，占位符将换出为实际图像网址。
的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个块）。

来源

2010-11-04 00:12:07 David

谢谢，我实际上正在考虑“懒惰”，但不知道如何处理它。但链接会有很大帮助。谢谢！ – Eatdoku 2010-11-04 17:08:05

通常情况下，您不希望这样做，因为用户体验会受到影响，正如您所发现的那样。

找到一个方法来返工的工作流程，使您显示更少的DOM，并加载少的东西。

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

来源

2010-11-03 23:23:19 hvgotcodes

每个请求有一定的开销，所以你的页面的性能将受到影响，你必须装入更多的元素。最好的解决方案是减少必要的负载数量，您可能需要考虑使用css sprite来减少必须加载的图像的实际数量。

在你的web服务器开启保持活动连接可能会有帮助，因为它会降低它必须协商连接的数量。另外请记住，许多系统对可能对一台主机进行同步连接的数量施加了限制，因此您可能一次只能下载其中的两个图像。

它也有可能需要重新设计应用程序，以便这么多的图像不是必需的，但我们需要更多地了解该应用程序。但是，一般来说，我会鼓励你缓存这些图像，因为试图在每个页面上生成许多图像会导致你的服务器无效。我也鼓励你使用Firebug（界面比Chrome工具[恕我直言]更容易一些），以便更好地理解在装载过程的每个阶段花费多少时间。

来源

2010-11-03 23:41:45

大量的Html表格与图像性能

回答

相关问题