Фактическая таблица По сравнению с таблицей Div
Это
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
Может быть сделан с этим:
<div>
<div style="display: table-row;">
<div style="display: table-cell;">Hello</div>
<div style="display: table-cell;">World</div>
</div>
</div>
Теперь, есть ли какое-либо различие между этими двумя с точки зрения скорости производительности и/или рендеринга, или они все равно?
6 ответов
Семантически неверно имитировать таблицы данных с помощью div'ов и вообще не имеет отношения к производительности, поскольку рендеринг происходит мгновенно. Бутылочное горлышко возникает из-за JavaScript или очень длинных страниц с большим количеством вложенных элементов, которые обычно в старые времена представляли собой 100 вложенных таблиц для создания макетов.
Используйте таблицы для того, для чего они предназначены, а div'ы - для того, для чего они предназначены. Свойства display table-row и cell предназначены для использования макетов div больше, чем для создания таблиц для представления данных. Смотрите на них как на макеты столбцов и строк, такие же, как в газете или журнале.
По производительности у вас на пару байт больше, чем в примере с div, lol :)
В первом случае я бы не беспокоился о производительности, а больше о семантике. Если это табличные данные, используйте Если вы действительно беспокоитесь о производительности, то ответ будет зависеть от используемого клиента. Например, MSIE известен тем, что медленно отрисовывает таблицы. Вам следует хотя бы протестировать себя в разных браузерах. Если это беспокойство вызвано большими данными, то я бы подумал о том, чтобы ввести пагинацию/фильтрацию данных, которые вы собираетесь показать. Существует много дискуссий по этому поводу, и div table обычно берет верх из-за своей гибкости в стилизации.
Вот одна из ссылок - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs Вам действительно не стоит беспокоиться о производительности при отрисовке таблиц. Даже если он есть, вы не заметите его, пока не появятся сотни (тысячи?) Таблиц для отображения. Используйте то, что вам удобнее. Таблица не будет отображаться, пока не будет загружена вся ее разметка. В то время как отдельные div будут отображаться, как только будет загружена их разметка. Я предполагаю, что общее время будет таким же, но дивы дадут ощущение лучшей производительности и большей отзывчивости. Если вы представляете табличные данные, вам следует использовать таблицу - она и связанные элементы имеют всю необходимую семантику для представления таблицы данных. В беспорядке div нет ни одного. . Если это просто блочные элементы, представляющие элемент макета, используйте
Похожие вопросы: