12 советов по улучшению производительности JavaScript-кода

Одним из наиболее важных аспектов при создании веб-страницы или приложения является производительность. Никто не желает получить неисправное приложение либо страницу, которая не грузится в браузере. Время ожидания пользователей невелико. Согласно Kissmetrics, 47% посетителей ждут загрузку веб-страницы не более 2 секунд, а 40% посетителей покинут страницу, если загрузка займет более 3 секунд.

Учитывая эти данные, производительность всегда должна приниматься в расчет при создании веб-приложения. Чтобы помочь вам подойти к решению проблемы, в этой статье представлены 12 эффективных способов улучшения быстродействия кода.

12 советов по улучшению производительности кода JavaScript

1. Кэш браузера

Существует два способа работы с кэшем. Первый состоит в использовании JavaScript Cache API, который можно задействовать через сервис-воркер (Service Worker). Второй способ — использование HTTP- кэширования.

Скрипты часто используются для доступа к определенному объекту.  Сохранение объекта в пользовательской переменной, равно как использование этой переменной в последующих ссылках на этот объект, сразу улучшает производительность.

2. Определите контекст выполнения

Для эффективного измерения любых улучшений, которые включены в ваш код, необходимо использовать хорошо знакомых среду разработки, в которой есть возможность тестировать производительность кода.

Попытка создать тесты производительности и оптимизации для всех версий интерпретатора Javascript на практи-ке оказывается затруднительной. Однако не очень хорошая практика также тестировать производительность только в одной среде, поскольку это ведет к неполным данным. По этой причине важно использовать несколько инструментов и проверять работу кода на них.

3. Удалите ненужный JavaScript

Этот шаг позволит не только сократить время передачи кода, но также уменьшить время на анализ и выполнение кода браузером. Чтобы выполнить это правило, вам необходимо учитывать следующие аспекты:

1) Если вы определяете функциональность, которая не задействована пользователями, хорошая практика — удалить этот функционал вместе со всем связанным кодом. Это позволит сайтам загружаться быстрее, а пользователи по-лучат лучший опыт.
2) Вероятно, что одна из библиотек была включена по ошибке и не является важной, или что существует функциональность, которая уже изначально присутствует во всех браузерах, без необходимости использовать дополни-тельный код.

4. Избегайте использования большого объёма памяти

Вы должны всегда стараться сократить объём памяти, которая не обладает большой важностью, поскольку нельзя предвидеть, какой памятью обладает устройство, на котором запущено приложение. Каждый раз, когда ваш код требует больше памяти, запускается сборщик мусора браузера и JavaScript останавливается. Если это происходит достаточно часто, страница будет работать медленно.

5. Отложите загрузку JavaScript, который не является необходимым

Пользователи хотят видеть страницу с быстрой загрузкой, однако это не значит, что все функции должны быть загружены в самом начале. Если пользователь должен производить определенное действие (клик по элементу или переключение табов), то можно подгрузить эти функции позже, после начальной загрузки.

Таким образом, вы можете предотвратить загрузку и выполнение JavaScript-кода, который замедляет начальное отображение страницы. Когда страница полностью загружена, можно подгрузить другие функции, чтобы они срабатывали сразу, как только пользователь начнет взаимодействие. В RAIL — модели Google рекомендуют отложенную загрузку выполнять поэтапно по 50 мс, чтобы это не сказалось на взаимодействии пользователя со страницей.

6. Избегайте утечек памяти

Если произошла утечка памяти, то загружаемая страница будет требовать всё больше памяти, захватывая всю доступную память устройства и значительно сокращая производительность. Вы, вероятно, видели (и, несомненно, были огорчены) этот тип ошибок, к примеру, на странице с каруселью или слайдером изображений.

В консоли Chrome можно определить, имеет ли ваш веб-сайт утечку памяти по записи на вкладке Производительность (Performance). Обычно утечки памяти исходят от узлов DOM, которые удаляются со страницы, но имеют некоторую переменную, которая ссылается на них, и поэтому сборщик мусора не может их очистить.

7. Используйте веб-воркеры, когда необходимо выполнить код, занимающий много времени

В соответствии с документацией Mozilla Developers Network (MDN): «Веб-воркеры позволяют запускать операции со скриптами в фоновом потоке отдельно от основного потока выполнения веб-приложения. Преимущество их в том, что трудоемкая обработка может выполняться в отдельном потоке, позволяя основному (обычно UI) по-току работать без блокировки/замедления.»

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

8. Если вы несколько раз обращаетесь к элементу DOM, сохраняйте его в локальной переменной

Доступ к DOM замедляет страницу. Если вы собираетесь прочитать содержимое элемента несколько раз, то лучше сохранить его в локальной переменной. Но важно иметь в виду, что, если вы позже удалите DOM-элемент, пе-ременная должна быть установлена в «null», поэтому она не вызывает утечек памяти.

9. Приоритет локальных переменных

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

Локальные переменные берутся из ближайшего контекста, и могут проходить несколько уровней вплоть до глобальных запросов. При определении области видимости функции в локальных переменных, если они раньше не объявлялись, важно использовать ключевые слова let или const. Это позволит определить текущую область, что сократит поиск и ускорит код.

10. Избегайте использования глобальных переменных

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

11. Внедряйте методы оптимизации из других языков программирования

  • Всегда используйте алгоритмы с наименьшей вычислительной сложностью для решения задачи с оптимальными структурами данных
  • Переписывайте алгоритм для получения тех же результатов с наименьшими вычислениями
  • Избегайте рекурсивных вызовов
  • Используйте переменные для вычислений и вызовов повторяющихся функций
  • Раскладывайте и упрощайте математические формулы
  • Используйте ассоциативные массивы: они позволяют получить значение, основанное на другом, вместо конструкции switch/case
  • Создавайте условия всегда более реальными, чтобы лучше использовать работу процессора
  • Используйте побитовые операторы, когда можно представить определенные операции, потому что эти операто-ры используют меньше циклов процессора

12. Используйте инструменты для выявления проблем

Lighthouse — это хороший инструмент измерения производительности веб-страниц. Он помогает вам проверить производительность, доступность, содержит лучшие практики и SEO-рекомендации.

Google PageSpeed разработан, чтобы помочь разработчикам повысить скорость работы веб-сайта и выявить области для потенциального улучшения SEO.

Оба инструмента созданы для выявления ошибок в работе веб-сайта в соответствии с лучшими практиками веб-оптимизации Google, а также для автоматизации процесса проверки.

В Chrome вы также можете использовать опцию «Дополнительные инструменты» (More Tools) в главном меню, чтобы увидеть показатели памяти и процессора для каждой вкладки. Для еще более полного анализа вы можете использовать консоль разработчика в Firefox или Chrome для анализа различных метрик, например:

12 советов по улучшению производительности JavaScript-кода 1

Анализ производительности через консоль позволяет моделировать потребление ресурсов ЦП, сети и другие показатели во время загрузки страницы, что способствует выявлению и устранению проблемы.

12 советов по улучшению производительности JavaScript-кода 2

Для более глубокого изучения рекомендуется использовать JavaScript Navigation Timing API, который позволяет подробно измерить, сколько времени требует каждая часть кода JavaScript.

Для приложений, построенных на NodeJS, платформа Node Source также является отличным, низкозатратным способом изучения производительности приложений на очень детальном уровне.

Комплексные метрики Node.js помогают определить источник утечек памяти или других проблем с производи-тельностью и решить эти проблемы быстрее.

Заключительные замечания

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

И помните: производительность всегда должна учитываться, но никогда не должна быть выше обнаружения оши-бок и добавления функциональных возможностей.


Оригинальная статья:

Liz Parody

12 Tips for Improving JavaScript Performance