Table / Grid Layout - жестко закодированный HTML против сгенерированного Javascript

Question

Какой наиболее эффективный способ создания следующих жестко закодированных манипуляций HTML или Javascript:

Предопределенная сетка, то есть постоянное число строк и столбцов, с границами, стилями и обработчиками событий. Лучше ли иметь много div s, написанных на HTML.

<div class='tl' id='c00' style='top:0px; left:0px;'>A</div>
<div class='tl' id='c01' style='top:0px; left:20px;'>A</div>
<div class='tl r' id='c02' style='top:0px; left:40px;'>A</div>

Или используйте Javascript для генерации div s.

d1 = "<div class='"
d2 = "' id='"
d3 = "' style='"
d4 = "'>"
d5 = "</div>"
sHTML = ""
for (j = 1; j < 5; ++j)
    for (i = 1; i < 5; ++i)
    {
        sClass = "t l ";

        if ((i+1 % 3) = 0)
            sClass = sClass + "r ";

        if ((j+1 % 3) = 0)
            sClass = sClass + "b ";

        sLine = d1 + sClass;
        sLine = sLine + d2 + "c" + n;
        sLine = sLine + d3 + "top:" + (i*20) + "px; left:" + (i*20) + "px;";
        sLine = sLine + d4 + "A";
        sLine = sLine + d5;
        document.writeln(sLine);
    }

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

Спасибо за помощь.

Answer 1

Жесткое кодирование будет быстрее. Браузер должен анализировать HTML в любом случае. Все, что вы делаете, используя Javascript, делает его очень запутанным и добавляет накладных расходов.

Answer 2

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

Answer 3

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

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