В моем веб-приложении я хотел бы полностью избежать html и использовать только javascript для создания dom-дерева веб-страницы.

Что быстрее пишет веб-контент традиционным способом в формате html <div>Some text</div> или использует javascript dom render, например: div.appendChild(document.createTextNode("Some text"));?

7
Rizo 3 Июн 2010 в 23:03

12 ответов

Лучший ответ

Придерживайтесь традиционного HTML. Это не только быстрее, чем делать все с помощью Javascript, но и гораздо более легко поддерживать.

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

12
Nathan 3 Июн 2010 в 19:10

Как и вам, мне было интересно то же самое, и я сделал такой же тест, как и @evilReiko:

Чтобы отобразить страницу, содержащую таблицу с 1000000000 записей, я нашел следующие результаты:

  • статический HTML-файл: размер файла 32 МБ, время загрузки страницы 2,8 мин.
  • статический HTML-файл с минимальным содержанием: размер файла 12 МБ, время загрузки страницы 1,3 мин.
  • динамический HTML-файл, сгенерированный JS: размер файла 612 байт (+ 713 байт JS), время загрузки страницы 10,09 секунд ...
0
Glauco Pater 12 Апр 2019 в 08:48

HTML анализируется и генерируется браузером, а затем вводится в DOM. Использование javascript для манипулирования dom по частям более затратно.

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

1
Dan Heberden 3 Июн 2010 в 19:08

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

1
Stuart 3 Июн 2010 в 19:11

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.

0
evilReiko 21 Мар 2019 в 06:07

HTML (шаблоны), как правило, считается более интуитивным, модульным и обслуживаемым подходом для манипулирования DOM.

Несколько мест для начала:

Шаблонные движки jQuery: движки шаблонов jQuery

Шаблоны закрытия Google http://code.google.com/closure/templates/

1
Community 23 Май 2017 в 11:48

Скорость - это вторичная забота о правильности, то есть сначала выполняйте функциональные требования, а затем ускоряйте их там, где это необходимо (в некоторых местах это может быть уже достаточно быстро).

В этом случае решение использовать статическую разметку вместо JavaScript - это вопрос о том, кто потребляет ваш документ - только пользователи с включенным JavaScript? Если так, это не имеет большого значения. Нужно ли принимать во внимание поисковые системы? Инвалиды? Тонкие клиенты, которые не имеют полной поддержки JS, или параноидальные пользователи с отключенной JS? Во всех этих последних случаях использование единой семантической разметки, не загроможденной лишними элементами, улучшенными с помощью JavaScript, является единственным правильным путем.

3
Rex M 3 Июн 2010 в 19:08

Мне интересно, что вы подумаете о создании документа исключительно через Javascript. На самом деле быстрее создавать элементы, используя DOM и document.createElement, чем свойство .innerHTML. Этот метод создает объекты документа напрямую, тогда как использование innerHTML требует, чтобы синтаксический анализатор перебрал HTML-код и создал элементы.

С другой стороны, использование Javascript вместо непосредственного написания HTML-кода потребует анализа и выполнения Javascript, создавая дополнительные издержки над анализатором HTML.

1
Andy E 3 Июн 2010 в 19:11

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

Это так далеко, как рендеринг идет.

Что касается удобства обслуживания, вы создаете кошмар. Это ключ к развитию. Количество ночных кошмаров в ремонтопригодности пропорционально «качеству» кода, имхо. Производительность и оптимизация должны быть на втором месте после удобства обслуживания. (Конечно, бывают исключения. Ничто не черно-белое).

HTML был создан, чтобы быть выразительным языком. Javascript не было. Конец истории, на мой взгляд.

2
lewiguez 3 Июн 2010 в 19:46

Безусловно, традиционный способ быстрее, пользователь загружает файл, он там, анализируется и делается.

Если вы делаете JS так, как страница должна быть построена на стороне клиента, КАЖДЫЙ раз они загружают страницу.

Это просто ужасный способ создать страницу ИМХО и кошмар для управления / обновления / создания

1
Mitchel Sellers 3 Июн 2010 в 19:08

Я уже пытался в прошлом делать 100% встроенный компонент javascript для чата ajax. Оказалось, что это было менее ремонтопригодно, занимало больше времени для написания кода, а преимущество было очень тонким, даже жестким, вероятно, это проект, который мог бы извлечь большую пользу из такого подхода DOM на JavaScript.

Даже если вы думаете, что может быть преимущество, это не так. Придерживайтесь чистого HTML.

1
HoLyVieR 3 Июн 2010 в 19:22

ИМХО, я думаю, компиляция javascript - это хорошее решение для создания быстрых приложений для веб.

0
user359451 5 Июн 2010 в 23:36