ansaurus

Question

rendering thousands of thumbnails table vs div vs span

Answer 1

+2 A:

Of course the div / span solution will always be faster than the table solution because you don´t have to use javascript.

About the difference between span's, div's, floats and inline-blocks: I can´t imagine that there is a difference, but if there is, it will depend on the browser you´re using so you will have to test that in different browsers.

jeroen 2009-10-13 19:00:33

Answer 2

+2 A:

This may not be a direct answer to your question. But I would look at pagination. 3000 is a lot of records for one page. If you paginate (see YUI's carousel) you can reduce it down to 100 thumbnail chunks. Using the YUI pagination you could also allow the user to choose how many to put on one screen. Plus, the pagination does not need to do a server round trip if you don't want it too.

Zoidberg 2009-10-13 19:01:17

Answer 3

A:

I created this script as a test:

<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>

Switching to a span created no noticeable performance difference.

However, I know for a fact that IE has serious problems if you set the background to an image in a table cell or a DIV. It just doesn't render as fast. Not sure if that is how you are inserting the thumbnails.

Nissan Fan 2009-10-13 19:08:56

Answer 4

+1 A:

I would think that spans would load quicker but I have little substantial information on which to base this assumption. However, there is an approach you can take, I forget the term, but only content visible on the screen will load. Content that would need scrolling to be visible would not be loaded until it would be visible on the screen. This may help you speed up your loading.

Take a look at this link and it will give a script to do this loading technique: http://www.dynamicdrive.com/forums/showthread.php?p=200232

Slevin 2009-10-13 19:27:57

Answer 5

A:

Guys found some very interesting results. let me know if you can confirm. So I went extreme and tested with binding a 20,000 record xml to an asp.net listview to benchmark. very interesting.

this listview template which uses span

firefox: takes 10 seconds to render and refreshes/wraps immediately as page is resized. uses 367mb of memory IE 8: takes 20 seconds to render and takes 10 seconds to wrap as page is resized. uses 605mb of memory.

<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>

this listview template which uses div looks like this

<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: takes > 2 minutes seconds to render and refreshes/wraps take 40 seconds as page is resized. uses 500mb of memory IE 8: takes 50 seconds to render and takes 20 seconds to wrap as page is resized. uses 600mb of memory.

so it looks like firefox handles rendering thousands of divs much worse than IE. and on both browsers thousands of spans render faster than divs.

Tuviah 2009-10-13 19:47:39

ansaurus

tags:

views:

answers:

rendering thousands of thumbnails table vs div vs span

related questions