JQuery замедляет рендеринг веб-страниц на 100 мс или больше? - PullRequest
Новая
       2

JQuery замедляет рендеринг веб-страниц на 100 мс или больше?

9 голосов
/ 11 марта 2012

Я пытаюсь улучшить скорость загрузки страницы веб-интерфейса для пользователей и обнаружил, что jQuery замедляет событие DomContentLoaded более чем на 100 мс.

Я провожу тестирование на Windows 7 с Chrome 17, используя компьютер с i5 2,5 ГГц, SSD-накопитель и 8 ГБ оперативной памяти.Тест выполняется на моем локальном компьютере.Я обеспокоен тем, что медленная скорость, которую я вижу на моей машине, будет еще медленнее на старых компьютерах и в браузерах.

Это стандартное наказание за использование jQuery или есть способ повысить производительность, которую мне не хватает?

Вот код, который я использую: 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            console.time("DOMContentLoaded");
        </script>
    </head>
    <body>
        <h1>Hello World</h1>

        <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>

        <script type="text/javascript">
            document.addEventListener( "DOMContentLoaded", ready, false );

            function ready() {
                console.timeEnd("DOMContentLoaded");
            }
        </script>
    </body>
</html>

На консоли время, которое я вижу, составляет примерно ~ 100 мс.

Когда я удаляю строку, которая загружает jQuery, время составляет примерно ~ 1 мс.

Я также попробовал приведенный выше код, используя Google CDN: 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Результат в основном тот же.

Всегда ли штраф в 100 мс за использование jQuery?Есть что-то, чего мне не хватает?Спасибо!

Ответы [ 3 ]

4 голосов
/ 11 марта 2012

Вы увидите небольшой удар при загрузке большой библиотеки JS, такой как jQuery. Лично я бы сказал, что 100 мс - это не много, вы должны иметь в виду ВСЕ факторы, приводящие к этому:

  1. Вы рассчитываете нагрузку, которая занимает время.
  2. Ваше сетевое соединение играет роль (есть документ разбора, запрос, ожидание ответа). Задержка вашего соединения должна быть учтена (используйте http://www.speedtest.net, чтобы проверить вашу задержку, и вычтите ее из 100 мс +, чтобы получить лучшее представление о фактическом попадании).
  3. Правильный контроль кэша на вашем веб-сервере может практически исключить # 2, настройте этот сервер так, чтобы срок действия файла истекал один раз в месяц или около того. Этот заголовок будет передан вместе с файлом, поэтому браузер пользователя загружает его только один раз в месяц. Вы по-прежнему будете выполнять небольшой запрос при загрузке первой страницы, но, по крайней мере, последующие запросы страниц будут извлекать его из локального кэша, сокращая это время.
  4. Есть разбор времени выполнения; ВЕСЬ файл jQuery должен быть проанализирован и выполнен. Сокращение только уменьшает размер и, следовательно, полосу пропускания, необходимую для его передачи (что соответствует времени на основе скорости соединения) ... минимизация очень мало для сокращения времени разбора (современные движки JS, такие как V8, пролетают над комментариями и пробелами, как если бы они были даже там).

Имейте в виду, что большинство страниц не будет иметь почти столько же пользовательских JS (основанных на jQuery), сколько собственно сама библиотека, поэтому даже интенсивно интерактивная страница будет видеть только несколько [дюжин] миллисекунд дополнительных затрат по сравнению с тем, что Сама библиотека уже наложена.

Что касается людей со старыми машинами / браузерами; Скорее всего, они испытывают низкую производительность на каждой странице, которую они посещают. Интернет - это динамичное место, вы должны идти в ногу с ним, если хотите получить хороший опыт. Для луддитов так много всего можно сделать.

1 голос
/ 11 марта 2012

jQuery - это файл размером 92 КБ.Вы должны загрузить его и проанализировать.

Я разместил ваш пример на studio831.com/jquery_test/index.html, cdn.html и dom_ready.html.

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

0 голосов
/ 11 марта 2012

Замедление, которое вы видите, связано с тем, что браузер должен сначала загрузить библиотеку jQuery.Это «штраф», который вы получаете, когда включаете любой внешний javascript.Это не имеет ничего общего с jQuery.

Вы можете минимизировать это, используя загрузчик скриптов, такой как require.js.

...