Для табличных данных, что рендеринг быстрее, CSS или <ТАБЛИЦА>? [закрытый]
<a id="popover" href="#">Test</a>
$("#popover").popover({
container: "body",
content: getContent,
html: true,
placement: "bottom",
trigger: "manual"
}).click(function(event) {
$("#popover").popover('show');
event.stopPropagation();
});
$(document).click(function() {
$("#popover").popover('hide');
});
10 ответов
В целом я сказал бы что использование <таблица> для табличных данных. Однако, если таблица очень длинна (скажите, более чем 100 строк), и число столбцов низко (~3), использование отделений для эмуляции строк привело бы к намного меньшему месту разметки. Это особенно релевантно при использовании DOM ищущий JavaScript (в соответствии со многими библиотеками JS), поскольку он извлек бы выгоду для сокращения древовидного размера DOM.
Это на основе опыта, я имел такую таблицу и искал оптимизацию - перемещающийся в основанный на отделении дисплей, сокращает HTML, сгенерированный к одной трети, и было большое улучшение в пересекающейся производительности DOM.
Если у Вас действительно есть табличные данные, то используйте таблицы. Идея, что Вы никогда не должны использовать таблицы ни для чего, была ошибочным расширением корректного понятия, что необходимо использовать теги HTML только для их намеченной семантической цели. Это означает, используют CSS для расположения, но используют таблицы для табличных данных. Это никогда не означает таблицы использования.
Так как некоторые браузеры ожидают, пока вся таблица не была передана для отображения его, чтобы удостовериться, что они скорректировали ширину столбцов для размера содержания, использование отделений, вероятно, представит быстрее при поиске среднего числа через каждый браузер.
Однако при необходимости в таблице используйте таблицу.
Этот вопрос надеется быть подобным этому: Почему бы не использовать таблицы для расположения в HTML? таким образом, Вы могли бы хотеть проверить некоторые ответы там также.
В целом браузеры не представят таблицу, пока вся таблица не была вычислена, что означает, что с пользовательской точки зрения большая таблица медленнее, чем то же содержание с помощью моделирования CSS вместо таблиц. Я работал с веб-приложением однажды, которое использовало таблицы для отображения сетки информации о статусе, и это было чрезвычайно интенсивно для отображения и очень медленный. Та же информация, отображенная с помощью CSS, была быстрее и что еще более важно, запущена к строке дисплея с методической точностью, как это было загружено, вместо того, чтобы ожидать всей таблицы, таким образом, это чувствовало себя быстрее как конечный пользователь. Я предложил бы исследовать использование CSS для отображения данных с помощью демонстрационного набора данных для тестирования. Это - то, что я сделал, чтобы подтвердить, что таблицы были на самом деле намного медленнее для конкретного варианта использования, который мы имели.
Если Вы будете использовать CSS для расположения, и Вы придерживаетесь лучшей практики и сохраняете свой CSS в отдельном файле (файлах) затем, то Ваш CSS должен будет обычно только быть загружен однажды, это кэшируется, принося Вам пользу кэширования.
При использовании таблиц для расположения затем таблицы расположения будут отправлены с HTML за каждой страницей, увеличивая пропускную способность и загрузят времена.
Улучшить скорость рендеринга таблиц, хотя Вы могли попытаться установить таблицу-layout:fixed; видеть, помогает ли это..
Различные браузеры имеют дико другую производительность javascript/css, таким образом, очень трудно сделать вывод здесь. Например, IE7 имеет очень медленный механизм, и Chrome является умом-bogglingly быстро. Firefox является где-нибудь промежуточным, завися от того, если Вы используете 2 или 3.
Я не взял бы скорость рендеринга в качестве самого важного аспекта здесь. HTML-таблицы сделаны для табличных данных. Помещение этого в большое количество ОТДЕЛЕНИЙ или так было бы полностью неправильным в моем понимании.
Для табличных данных используйте таблицу. Таблицы идут со всеми видами хороших функций, как <thead> и <tfoot> теги, легенды, заголовки, подписи, и т.д. Все необходимо сделать таблицу таблицей.
Кроме того, если CSS не работает/, загрузил / вопрос, таблица будет все еще смотреть и работать способ, которым это должно.
Лично от того, что я считал при фактическом представлении табличных данных таблица более подходит для задачи, я лично hae нашел, что это было довольно верно.
Что касается необработанного количества того, что "быстрее", как упоминается @skaffman, это зависит от браузеров..., но быть "корректным" имело бы смысл использовать таблицу для табличных данных.
Как и в большинстве вышеперечисленных ответов, я бы тоже сказал, что используйте таблицы, если вы отображаете табличные данные, и DIV, если вы хотите управлять макетом (с помощью CSS3). Вопреки мнению, таблицы обрабатываются не медленнее, чем DIV , если вы устанавливаете несколько свойств, например colgroup, и сохраняете макет неизменным. Узнайте, как это сделать, по следующей ссылке:
sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata