Длительное время исполнения 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% времени выполнения на всей странице.

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

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

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

Есть замечания или дополнения? Напишите нам на почту admin@site-alarm.com или в телеграм канал.

Проверьте ваш сайт