Для табличных данных, что рендерится быстрее, CSS или <TABLE>?[закрыто]

Question

Я ищу некоторую статистику в текущих браузерах о том, сколько времени требуется для рендеринга таблицы с использованием обычного HTML по сравнению с взломанным методом CSS puritan, который позволяет избежать использования фактического TABLE, TR, TD и т.д.Теги.

Я не ищу того, что правильно, только то, что быстрее, особенно в Firefox 3, хотя меня также интересует статистика для других браузеров.Из курс Теги ТАБЛИЦ предназначены для таблиц.Вопрос не в этом.

Answer 1

В общем, я бы сказал, используйте <table> для получения табличных данных.Однако, если таблица очень длинная (скажем, более 100 строк) и количество столбцов невелико (~ 3), использование divs для эмуляции строк приведет к гораздо меньшему объему разметки.Это особенно актуально, если вы используете javascript для поиска по DOM (как предусмотрено многими библиотеками JS), поскольку было бы полезно уменьшить размер дерева DOM.

Это из опыта, у меня была такая таблица, и я искал оптимизацию - переход к отображению на основе div сократил сгенерированный HTML на треть и значительно улучшил производительность обхода DOM.

Answer 2

Если у вас действительно есть табличные данные, то используйте tables .Идея о том, что вы никогда не должны использовать таблицы для чего-либо, была ошибочным расширением правильной концепции о том, что вы должны использовать html-теги только по их прямому семантическому назначению.Это означает, что используйте CSS для верстки, но используйте таблицы для табличных данных.Это не значит, что никогда не используйте таблицы.

Answer 3

Поскольку некоторые браузеры ждут, пока вся таблица не будет передана для ее отображения, чтобы убедиться, что они скорректировали ширину столбцов в соответствии с размером содержимого, использование divs, вероятно, приведет к визуализировать быстрее, если вы ищете среднее значение для каждого браузера.

При этом, если вам нужна таблица, используйте таблицу.

Answer 4

Этот вопрос выглядит похожим на этот:Почему бы не использовать таблицы для верстки в HTML? так что, возможно, вы захотите проверить некоторые ответы и там.

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

Answer 5

Если вы используете CSS для верстки и придерживаетесь лучших практик и храните свой CSS в отдельных файлах, то ваш CSS, как правило, нужно будет загрузить только один раз, прежде чем он будет кэширован, что дает вам преимущества кэширования.

Если вы используете таблицы для верстки, то ваши таблицы верстки будут отправляться вместе с HTML-кодом для каждой страницы, что увеличит вашу пропускную способность и время загрузки.

Однако, чтобы улучшить скорость рендеринга таблиц, вы могли бы попробовать настройка компоновки таблицы: исправлено; чтобы посмотреть, поможет ли это..

Answer 6

Разные браузеры имеют совершенно разную производительность javascript / css, поэтому здесь очень сложно делать обобщения.Например, у IE7 шокирующе медленный движок, а у Chrome ошеломляюще быстрый.Firefox находится где-то посередине, в зависимости от того, используете ли вы 2 или 3.

Answer 7

Я бы не стал считать скорость рендеринга здесь самым важным аспектом.HTML-таблицы созданы для табличных данных.Помещать это во множество DIVS или около того было бы совершенно неправильно в моем понимании.

Answer 8

Как и большинство приведенных выше ответов, я бы тоже посоветовал использовать таблицы, если вы отображаете табличные данные, и DIVS, если вы хотите управлять макетом (используя CSS3). Вопреки распространенному мнению, рендеринг таблиц не медленнее, чем DIVS если вы установите несколько свойств, таких как colgroup, и сохраните макет как фиксированный.Ознакомьтесь с подробной информацией о том, как это сделать, по следующей ссылке:

sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata

Answer 9

Для получения табличных данных используйте таблицу.Таблицы поставляются со всевозможными приятными функциями, такими как <thead> и <tfoot> теги, легенды, заголовки, подписи и т.д.Все, что вам нужно, чтобы сделать стол столом.

Кроме того, если CSS не работает / не загружен / не имеет значения, таблица все равно будет выглядеть и работать так, как должна.

Answer 10

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

Что касается необработанного числа того, что "быстрее", как упоминал @skaffman, это зависит от браузеров...но чтобы быть "правильным", имело бы смысл использовать таблицу для табличных данных.