Фактическая таблица Vs. Таблица Div

Эта

Hello World

Это можно сделать следующим образом:

 
Hello
World

Теперь, есть ли разница между этими двумя с точки зрения производительности и / или скорости рендеринга, или они одинаковы?

Семантически некорректно моделировать таблицы данных с помощью div и вообще не имеет отношения к производительности, поскольку рендеринг является мгновенным. Шея бутылки исходит из JavaScript или чрезвычайно длинных страниц с большим количеством вложенных элементов, которые обычно в старые времена составляют 100 вложенных таблиц для создания макетов.

Используйте таблицы, для которых они предназначены, и div для того, что они предназначены. Свойства таблицы таблиц и ячеек должны использовать макеты div, а затем создавать таблицы для представления данных. Посмотрите на них как на столбцы и строки макета, такие как те, которые вы можете найти в газете или журнале.

Производительность мудрый у вас есть пара больше байтов с примером div, lol 🙂

В первом случае я бы не беспокоился о производительности, но больше о семантике. Если это табличные данные, используйте

. Если это только элементы блока, представляющие элемент макета, используйте

.

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

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

Вы действительно не должны беспокоиться о производительности в рендеринге стола. Даже если он есть, вы не заметите его, пока не появятся сотни (тысяч?) Таблиц. Используйте то, что вам кажется более удобным для вас.

Об этом много обсуждений, и таблица div обычно берет верх из-за ее гибкости в стилизации. Вот одна ссылка – http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Стол не будет отображаться до тех пор, пока не будет загружена вся его разметка. В то время как отдельные divs будут отображаться, как только их разметка будет загружена. Я думаю, что общее время будет таким же, но divs даст представление о лучшей производительности и большей отзывчивости.

Я хотел бы упомянуть, что если вы используете структуру таблицы вместо div, то пользователи могут удерживать CMD (или ALT в windowsх), чтобы выбрать определенную область данных из таблицы для копирования. Эти данные также очень легко вставляются в программы excel и другие подобные программы.

На мой взгляд, единственная причина использования divs – это стиль и настройка макета на основе размера браузера. Если он не сломался, не исправляйте его. Divs легче стилизовать, но с помощью css.

Таблицы: вы можете получить очень сложный макет, как вы этого хотите. Более надежный. Советы иногда немного странны с сложным стилем CSS. не подходит для ответственных веб-сайтов.

Divs: может настраиваться на основе ввода браузера, более гибкого и удобного для стиля.

Если вы представляете табличные данные, то вы должны использовать таблицу – она ​​и связанные элементы, имеют всю необходимую семантику для представления таблицы данных. У беспорядка divs нет ни одного.

Просто бросаю мои два цента на тему производительности. Для небольших (менее 100 строк, например) таблиц использование DIV не сильно повлияло бы на разницу.

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

Краткое объяснение:

Все это возникло из проекта моей компании, где я написал class Javascript для процедурного генерации таблиц для меня на основе данных SQL (это модуль типа отчетности). Во всяком случае, мне нравятся DIV, поэтому я написал, что это основано на DIV, как и пример OP.

После некоторой ужасающей производительности (особенно в IE8) я решил переписать ее, используя только таблицы, поскольку это довольно простые табличные данные в целом. Таблицы по какой-то причине примерно в два раза быстрее на моей машине в Chrome. То же самое можно сказать и о Safari.

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

Единственное реальное различие – это тип генерируемого элемента, так что это единственное, что я могу объяснить во время дельта. Я уверен, что это зависит от браузера, но мне кажется, что элементы таблицы быстрее.