2019
(Вероятно, правильный ответ правильный для 2010 года). Вот ответ на 2019 год с тестом.
Создание таблицы с вложенным div
, всего 500 строк, 250 тыс. Ячеек таблицы, 10 вложенных делений на ячейку таблицы.
<!-- Pure HTML by server -->
<html>
<head></head>
<body>
<table>
<?php
for($i = 0; $i < 500; ++$i) {
echo '<tr>';
for($j = 0; $j < 500; ++$j) {
echo '<td><div><div><div><div><div><div><div><div><div><div>' . $i . '/' . $j . '</div></div></div></div></div></div></div></div></div></div></td>';
}
echo '</tr>';
}
?>
</table>
<script>
alert('finish');
</script>
</body>
</html>
И приведенный ниже HTML, сгенерированный JS:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var html = '<table>';
for(var i = 0; i < 500; ++i) {
html += '<tr>';
for(var j = 0; j < 500; ++j) {
html += '<td><div><div><div><div><div><div><div><div><div><div>' + i + '/' + j + '</div></div></div></div></div></div></div></div></div></div></td>';
}
html += '</tr>';
}
html += '</table>';
$('body').html(html);
alert('finish');
});
</script>
</body>
</html>
Прибл. Результат:
| Download Size | Time 'til browser stops loading
--------------------------------------------------------------------------
Pure HTML by server | 680,000 bytes | 00:01:48
HTML generated by JS | 570 bytes | 00:00:28
Протестировано на Chrome v70 на Ubuntu 18.
Заключение
Всегда придерживайтесь нормального HTML по многим причинам (обычно для читаемого / поддерживаемого кода), за исключением случаев, когда вы имеете дело с огромным HTML, тогда вы можете рассмотреть возможность его создания с помощью JS.