渲染数千个缩略图 table vs div vs span答案

【问题标题】：Rendering thousands of thumbnails table vs div vs span渲染数千个缩略图 table vs div vs span
【发布时间】：2009-10-13 18:56:29
【问题描述】：

我当前的代码使用表格来呈现缩略图。当页面调整大小时，我使用 javascript 重新计算行数并将单元格重新插入到正确的列中。

这适用于 100 个缩略图，但在显示 3000 个缩略图时有点慢。

所以我查看了 bing 如何显示其缩略图，并且它似乎使用了带有 display:inline-block 的 span 标签。我已经测试过使用 span 标签布局缩略图，这有助于在我调整页面大小时自动为我换行缩略图。我还使用带有 float:left 的 DIV 标签进行了测试，在某些浏览器上它似乎比 span 慢得多，但在其他浏览器上却没有。

但是我想知道对于我想要的缩略图布局，哪种方法通常在所有浏览器上最快。

a) 表格 b) 带有 float:left 的 DIV 标签 c) 带有 display:inline-block 的 span 标签

一般来说，DIV 标签的渲染速度比 span 标签慢吗？

【问题讨论】：

听起来你已经有足够的脚手架来测试和发现自己了。分享您的发现作为答案。
有趣的是 float:left vs inline-block 在不同的浏览器上！

标签： html css asp.net

【解决方案1】：

当然，div / span 解决方案总是比 table 解决方案更快，因为您不必使用 javascript。

关于 span、div、float 和 inline-blocks 之间的区别：我无法想象有区别，但如果有区别，则取决于您使用的浏览器，因此您必须对其进行测试在不同的浏览器中。

【讨论】：

【解决方案2】：

这可能不是您问题的直接答案。但我会看分页。 3000 是一页的很多记录。如果您进行分页（请参阅 YUI 的 carousel），您可以将其减少到 100 个缩略图块。使用 YUI 分页，您还可以允许用户选择在一个屏幕上放置多少个。另外，如果您不想要分页，也不需要进行服务器往返。

【讨论】：

【解决方案3】：

我认为跨度会加载得更快，但我没有多少实质性信息可以作为这个假设的基础。但是，您可以采取一种方法，我忘记了这个术语，但只会加载屏幕上可见的内容。需要滚动才能看到的内容才会被加载，直到它在屏幕上可见。这可以帮助您加快加载速度。

看看这个链接，它会给出一个脚本来执行这个加载技术：http://www.dynamicdrive.com/forums/showthread.php?p=200232

【讨论】：

【解决方案4】：

我创建了这个脚本作为测试：

<html>
  <body>
<script type="text/javascript">
var i=0;
var startDate = Date();
for (i=0;i<=3000;i++)
{
document.write("<div style='float: left;display: inline;border: black 1px dotted; width: 100px; height: 100px;'>The number is " + i + "</div>");
}
var endDate = Date();
document.write("<br/>");
document.write("<strong>Started :</strong> " + startDate );
document.write("<br/><br/>");
document.write("<strong>Finished:</strong> " + endDate );
</script>
  </body>
</html>

切换到跨度不会产生明显的性能差异。

但是，我知道如果将背景设置为表格单元格或 DIV 中的图像，IE 会出现严重问题。它只是没有渲染得那么快。不确定这是否是您插入缩略图的方式。

【讨论】：

【解决方案5】：

伙计们发现了一些非常有趣的结果。让我知道你是否可以确认。所以我走极端测试了将 20,000 条记录 xml 绑定到 asp.net listview 以进行基准测试。很有趣。

这个使用span的listview模板

firefox：需要 10 秒来呈现并在调整页面大小时立即刷新/换行。使用 367mb 内存 IE 8：在调整页面大小时需要 20 秒来呈现并需要 10 秒来换行。使用 605mb 内存。

<asp:ListView ID="ListView1" runat="server" DataSourceID="XmlDataSource1" >
        <LayoutTemplate>
            <div runat="server"  id="lstProducts">
                <div runat="server" id="itemPlaceholder" />
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <span  runat="server" style="display:inline-block">
                <asp:Image runat="server" Style="width: 100px" enableviewstate="false" ID="ImageButton1" ImageUrl='<%# Eval("ImageUrl", "~/Photos/{0}") %>' />
                <br />
                <asp:Label ID="PropertyTypeLabel" runat="server" enableviewstate="false" Text='<%# Eval("PropertyType") %>' />
                <br />
                Bedrooms:
                <asp:Label ID="BedroomsLabel" runat="server" enableviewstate="false" Text='<%# Eval("Bedrooms") %>' />
                <br />
                Town:
                <asp:Label ID="TownLabel" runat="server" enableviewstate="false" Text='<%# Eval("Town") %>' />
                <br />
                Lat:
                <asp:Label ID="LatLabel" runat="server" enableviewstate="false" Text='<%# Eval("Lat") %>' />
                <br />
                Lon:
                <asp:Label ID="LonLabel" runat="server" enableviewstate="false" Text='<%# Eval("Lon") %>' />
                <br />
                Price:<asp:Label ID="PriceLabel" runat="server" enableviewstate="false" Text='<%# Eval("Price", "£{0}") %>' />
            </span>
        </ItemTemplate>
    </asp:ListView>

这个使用div的listview模板是这样的

<asp:ListView ID="ListView1" runat="server" DataSourceID="XmlDataSource1" >
        <LayoutTemplate>
            <div runat="server"  id="lstProducts">
                <div runat="server" id="itemPlaceholder" />
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div  runat="server" style="float:left">
                <asp:Image runat="server" Style="width: 100px" enableviewstate="false" ID="ImageButton1" ImageUrl='<%# Eval("ImageUrl", "~/Photos/{0}") %>' />
                <br />
                <asp:Label ID="PropertyTypeLabel" runat="server" enableviewstate="false" Text='<%# Eval("PropertyType") %>' />
                <br />
                Bedrooms:
                <asp:Label ID="BedroomsLabel" runat="server" enableviewstate="false" Text='<%# Eval("Bedrooms") %>' />
                <br />
                Town:
                <asp:Label ID="TownLabel" runat="server" enableviewstate="false" Text='<%# Eval("Town") %>' />
                <br />
                Lat:
                <asp:Label ID="LatLabel" runat="server" enableviewstate="false" Text='<%# Eval("Lat") %>' />
                <br />
                Lon:
                <asp:Label ID="LonLabel" runat="server" enableviewstate="false" Text='<%# Eval("Lon") %>' />
                <br />
                Price:<asp:Label ID="PriceLabel" runat="server" enableviewstate="false" Text='<%# Eval("Price", "£{0}") %>' />
            </div>
        </ItemTemplate>
    </asp:ListView>

firefox：在调整页面大小时需要 > 2 分钟的时间来呈现和刷新/换行需要 40 秒。使用 500mb 内存 IE 8：在调整页面大小时需要 50 秒来呈现并需要 20 秒来换行。使用 600mb 内存。

所以看起来 firefox 处理渲染数以千计的 div 比 IE 差得多。并且在这两种浏览器上，数千个 span 的渲染速度都比 div 快。

【讨论】：