Question

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

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

所以我看了bing如何显示缩略图，并且似乎使用带有display：inline-block的span标签。我已经测试过使用span标签布置缩略图，这样可以在我调整页面大小时自动包装缩略图。我还测试了使用带有float：left的DIV标签，它看起来比某些浏览器上的span要慢得多，而不是其他浏览器。

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

a）表 b）带浮点数的DIV标签：左 c）带显示的跨度标签：内联块

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

Answer 1

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

关于span，div，floats和inline-blocks之间的区别：我无法想象存在差异，但如果存在差异，则取决于您使用的浏览器，因此您必须测试在不同的浏览器中。

Answer 2

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

Answer 3

我认为跨度会加载更快，但我几乎没有基于此假设的实质性信息。但是，您可以采取一种方法，我会忘记这个术语，但只会加载屏幕上显示的内容。需要滚动才能看到的内容在屏幕上可见之前不会加载。这可以帮助您加快加载速度。

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

Answer 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会出现严重问题。它只是没有快速渲染。不确定这是否是您插入缩略图的方式。

Answer 5

Guys发现了一些非常有趣的结果。如果你能确认，请告诉我。所以我进行了极端测试，并将一个20,000记录的xml绑定到asp.net listview以进行基准测试。非常有趣。

此listview模板使用span

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：take＆gt;在调整页面大小时，渲染和刷新/换行2分钟需要40秒。使用500mb的内存 IE 8：渲染需要50秒，并且在调整页面大小时需要20秒。使用600mb的内存。

所以它看起来像firefox处理渲染成千上万的div比IE更糟糕。在两个浏览器上，成千上万的跨度比div更快。

渲染成千上万的缩略图表与div vs span

5 个答案: