Простой HTML против Javascript генерируется HTML? - PullRequest
5 голосов
/ 03 июня 2010

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

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

Ответы [ 12 ]

0 голосов
/ 21 марта 2019

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 голосов
/ 06 июня 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...