Рендеринг тысячи таблиц миниатюр против div против span

Question

Мой текущий код использует таблицы для рендеринга миниатюр. Когда размер страницы изменяется, я использую javascript, чтобы пересчитать количество строк и заново вставить ячейки в правильные столбцы.

Это прекрасно работает для 100 миниатюр, но довольно медленно при отображении 3000 миниатюр.

Итак, я посмотрел, как bing отображает свои миниатюры и, похоже, использует теги span с display: inline-block. Я протестировал размещение миниатюр с использованием тегов span, и теперь у меня есть автоматическая упаковка миниатюр при изменении размера страницы. Я также протестировал использование тегов DIV с помощью float: left, и в некоторых браузерах он выглядит намного медленнее, чем span, но не в других.

Однако мне интересно, какой метод, как правило, самый быстрый во всех браузерах для нужного мне вида эскизов.

а) Стол б) теги DIV с плавающей точкой: слева c) теги Span с дисплеем: встроенный блок

и вообще теги DIV отображаются медленнее, чем теги span?

Answer 1

Это не может быть прямым ответом на ваш вопрос. Но я бы посмотрел на нумерацию страниц. 3000 много записей для одной страницы. Если вы разбиваете на страницы (см. карусель YUI ), вы можете уменьшить его до 100 фрагментов миниатюр. Используя нумерацию YUI, вы также можете позволить пользователю выбирать, сколько выложить на один экран. Кроме того, для нумерации страниц не требуется обходить сервер, если вы этого тоже не хотите.

Answer 2

Конечно решение div / span всегда будет быстрее табличного, потому что вам не нужно использовать javascript.

О разнице между span, div, float и inline-блоками: я не могу представить, что есть разница, но если она есть, она будет зависеть от браузера, который вы используете, поэтому вам придется проверить это в разных браузерах.

Answer 3

Я думаю, что пролеты будут загружаться быстрее, но у меня мало существенной информации, на которой можно основывать это предположение. Тем не менее, есть подход, который вы можете использовать, я забыл термин, но будет загружаться только контент, видимый на экране. Контент, который необходимо прокрутить, чтобы быть видимым, не будет загружен, пока он не будет виден на экране. Это может помочь вам ускорить загрузку.

Посмотрите на эту ссылку, и она даст скрипт для выполнения этой техники загрузки: http://www.dynamicdrive.com/forums/showthread.php?p=200232

Answer 4

Ребята нашли очень интересные результаты. дайте мне знать, если вы можете подтвердить. Поэтому я пошел на крайние испытания и протестировал связывание 20000 записей xml с просмотром списка asp.net для тестирования. очень интересно.

этот шаблон списка, который использует span

firefox: на рендеринг уходит 10 секунд, и он обновляется сразу после изменения размера страницы. использует 367 Мб памяти IE 8: для рендеринга требуется 20 секунд, а для переноса страницы - 10 секунд. использует 605 Мб памяти.

<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 выглядит следующим образом

<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 секунд при изменении размера страницы. использует 500 Мб памяти IE 8: для рендеринга требуется 50 секунд, а для переноса страницы - 20 секунд. использует 600 Мб памяти.

так что похоже, что Firefox обрабатывает тысячи div гораздо хуже, чем IE. и в обоих браузерах тысячи пролетов отображаются быстрее, чем div.

Answer 5

Я создал этот скрипт как тест:

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

Переключение на диапазон не привело к заметной разнице в производительности.

Однако я точно знаю, что в IE возникают серьезные проблемы, если вы устанавливаете фон для изображения в ячейке таблицы или DIV. Это просто не рендерится так быстро. Не уверен, что именно так вы вставляете миниатюры.