Уроки

Длительное время исполнения JavaScript кода

Норма времени выполнения отдельно загружаемого JavaScript файла 0.05 секунды. А суммарно всех inline скриптов в HTML коде страницы - 0.15 секунды.

Долгое выполнение связано со следующими причинами:

  • Не оптимизированный JavaScript код. Код, который выполняет задачу не самым быстрым способом. Надо переписать такой код, чтобы он продолжил выполнять ту же задачу, но требовал меньше вычислительных ресурсов.
  • Крупный JavaScript файл. Бывают файлы размером более 1 мегабайта. Например код гугл каптчи весит 900 КБ. Отложите загрузку подобных файлов, чтобы не задерживать загрузку страницы.

Оптимизация JavaScript кода

В первую очередь надо найти проблемный участок JavaScript кода. Для этого надо профилировать его. Профайлинг — это замер скорости выполнения разных участков кода. Это могут быть как отдельные строки, так и целые функции. Сделать это можно 2 способами: расстановкой маяков с выводом времени выполнения и с помощью специального профайлера, встроенного в браузер (FireFox Chrome).

Маяк для замера времени выполнения участка кода выглядит так:

console.time('name');
// Тут располагаем код для отсчёта времени
console.timeEnd('name');
// Вывод "name: 3241мс - таймер закончился"

В начале оптимизации вам надо найти функцию, выполнение которой занимает несколько десятков процентов ресурсов. Сделать это проще всего с помощью профайлера, встроенного в браузер (FireFox Chrome).

Это результат профилирования открытия главной страницы YouTube. Мы видим, что метод value() в файле custom-elements-es5-adapter.js на строке 11 в столбце 8 занимает аж 15% времени выполнения на всей странице.
Это результат профилирования открытия главной страницы YouTube. Мы видим, что метод value() в файле custom-elements-es5-adapter.js на строке 11 в столбце 8 занимает аж 15% времени выполнения на всей странице.

После того, как вы нашли медленный участок кода, нужно его исследовать и изыскать способы оптимизации. Сработать могут следующие решения:

  • Найти конкретный метод JavaScript API или строку, которые долго выполняются, и попытаться переписать их.
  • Попросту удалить медленный код, если такое возможно.
  • Вызывать этот код не сразу, а после загрузки страницы.

Профилирование и оптимизация кода — один из самых высококвалифицированных трудов в программировании. Решение таких задач — отличный способ вырасти в профессиональном плане.

ПРО подписка для работы с сервисом

Промо
Для подготовки коммерческого предложения.
190 ₽
50 страниц на 10 дней
  • 1 страница даёт 1 запуск инструмента Проверка страницы.
  • Покупается для определённого сайта
  • Ограничения на остальные инструменты остаются теми же
ПРО подписка
Для регулярной работы над сайтом или группой сайтов.
1 580 ₽
3500 страниц в неделю. Срок подписки — 1 месяц.
Кошелёк
Отдельный баланс страниц, дополняющий баланс ПРО подписки.
190 ₽
Количество страниц
  • Требуется активная ПРО подписка для использования баланса кошелька
Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Соглашаюсь