Сравнение производительности HTML, добавленного с помощью Javascript и HTML-разметки - PullRequest
0 голосов
/ 03 марта 2010

Кто-нибудь когда-либо проверял или знает кто-нибудь различия в производительности этих двух разных способов рендеринга одного и того же html-контента (кроме того, что один импортировал библиотеку jquery, а другой нет, и что есть два запроса в версии Ajax против одного)?

Добавить HTML через Ajax

<html>
<head>
    <script src="javascripts/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
    jQuery.ajax({
        type: "GET",
        url: "http://www.mysite.com/events",
        success: function(result) {
            $("#container").append(result);
        }
    });
    </script>

    <body>
        <div id="container">
        </div>
    </body>
</html>

Встроенный HTML

<html>
<head>
    <body>
        <div id="container">
            <!-- events -->
            <ol>
                <li>
                    <p>
                        Event A...
                    </p>
                </li>
            </ol>
        </div>
    </body>
</html>

Какова статистика по этому вопросу, когда бы вы и не использовали бы что-то подобное? Насколько медленнее версия Ajax (скажем, если бы мне нужно было сделать что-то столь же сложное, как домашняя страница Amazon, если предположить, что мне не нужно беспокоиться о путях, так как это будет мое собственное приложение)? Этот вопрос не зависит от лучших практик по удобочитаемости и тому подобное, просто интересует производительность.

Ответы [ 5 ]

2 голосов
/ 04 марта 2010

Общая производительность в вашем примере не зависит от производительности рендеринга $("#container").append(result); против встроенного HTML. В нем преобладает количество HTTP-запросов.

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

В примере с JS браузер начинает загрузку HTML, а затем он попадает в первый тег сценария, и он должен загрузить, проанализировать и выполнить jquery.js. Тогда это должно загрузить / события. Только после того, как оба этих HTTP-запроса полностью завершены, он может начать рендеринг HTML. Так что на практике ваша страница будет отображаться гораздо медленнее. См. Правила производительности о скриптах внизу и минимизации http-запросов для получения дополнительной информации.

1 голос
/ 03 марта 2010

jQuery медленнее обычного HTML при рендеринге. Подобно тому, как любая манипуляция с DOM в javascript медленнее, чем в обычных HTML-файлах

Но это гораздо больше, чем просто производительность рендеринга. Большая таблица в причудливом формате HTML может загружаться гораздо дольше, чем компактный запрос данных JSON и немного jQuery для его форматирования

Просто получение простого HTML-фрагмента через AJAX никогда не даст вам ничего в общем времени загрузки. Но часто это выглядит быстрее с точки зрения пользователей, так как структура главной страницы загружается быстрее, а затем детали раскрываются

Библиотеки jQuery кэшируются, поэтому они имеют накладные расходы только один раз за сеанс или меньше

1 голос
/ 03 марта 2010

В ваших примерах разница не будет заметна. Однако на домашней странице в стиле Amazon, использующей чистую версию HTML в качестве базовой линии, версия Ajax будет медленнее где-то от едва заметного до медленного на порядок. Существует множество переменных, которые влияют на скорость версии Ajax (скорость соединения, механизм JavaScript браузера, сложность манипулирования HTML, количество вызовов Ajax, насколько хорошо написан JavaScript и другие).

Существует хороший инструмент под названием dynaTrace , который может помочь вам диагностировать узкие места Ajax. Firebug также полезен при анализе проблем производительности.

0 голосов
/ 03 марта 2010

Ajax медленнее именно на время, необходимое для загрузки http://www.mysite.com/events, + 3 мс или около того, чтобы добавить + 1 - ??? мс, чтобы выполнить перекомпоновку браузера (в зависимости от браузера и сложности страницы).

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

0 голосов
/ 03 марта 2010

Между прочим, это может показаться не связанным, но я читал, что XSLT на стороне клиента преобразует XML-файлы в DOM в 3 раза быстрее или более, чем позволяет js вставить его, но тесты или статистика не предоставлены.

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