Displaying thousands of thumbnail tables versus div vs span
My current code is using tables to render sketches. When resizing the page, I am using javascript to recalculate the number of rows and re-enter the cells into the appropriate columns.
This works great for 100 thumbnails, but is slower when displaying 3000 thumbnails.
So I took a look at how bing displays its thumbnails and appears to be using span tags with display: inline-block. I've tested creating thumbnails using span tags, this has the advantage of automatically wrapping thumbnails for me when I resize the page. I also tested using DIV tags with float: left and it is much slower than range in some browsers, but not others.
However, I am wondering which method is generally the fastest across all browsers, so that I would like to have a thumbnail layout.
a) Table b) DIV tags with float: left c) Span tags with display: inline block
and in general, do DIV tags make it slower than span tags?
source to share
Of course a div / span solution will always be faster than a table solution because you don't need to use javascript.
On the difference between span, div, float and inline-blocks: I can't imagine there is a difference, but if there is, it will depend on the browser you are using, so you have to check that in different browsers.
source to share
This may not be a direct answer to your question. But I would look at pagination. 3000 is many records for one page. If you are paginated (see YUI carousel ) you can reduce it to 100 pieces of thumbnails. Using YUI pagination, you can also let the user choose how many of them to put on one screen. Also, pagination doesn't have to be done by the server round-trip, unless you want to.
source to share
I would have thought the gaps would load faster, but I have little substantial information on which to base this assumption. However, there is an approach you can take, I forgot this term, but only the content visible on the screen will load. Content that needs to be scrolled for visibility will not load until it is visible on the screen. It can help you download faster.
Take a look at this link and it will give the script this download technique: http://www.dynamicdrive.com/forums/showthread.php?p=200232
source to share
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 range did not make any noticeable difference in performance.
However, I know IE has serious problems if you set the background to an image in a table cell or in a DIV. It's just not that fast. Not sure if this is how you insert the thumbnails.
source to share
this list template which uses span
firefox: It takes 10 seconds to render and update / wrap immediately on page resize. uses 367MB of IE 8 memory: takes 20 seconds to render and takes 10 seconds to wrap since the page is modified. uses 605 MB 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 list template that div uses 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 refresh / wrap takes 40 seconds when page is resized. uses 500MB of IE 8 memory: takes 50 seconds to render and takes 20 seconds to wrap as the page is modified. uses 600 MB memory.
so it looks like firefox handlers rendering thousands of divs, much worse than IE. and in both browsers thousands of spans render faster than divs.
source to share