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

Артем Довгопол

Оптимизация кода – это целое искусство. Как в гонках: можно просто сесть и поехать, а можно настроить каждую деталь двигателя. Разница видна сразу 😉

Ключевые идеи 👌

Введение

Помните старые компьютерные игры, которые тормозили даже на мощных компьютерах? Часто дело было не в железе, а в коде. То же самое происходит с современными сайтами – даже супермощный сервер не спасет, если JavaScript написан неэффективно.

Сегодня средний размер JavaScript-кода на сайтах достигает 350 КБ , и эта цифра только растет. При этом исследования показывают, что около 40% этого кода никогда не используется при загрузке страницы. А ведь каждый лишний килобайт – это дополнительное время загрузки, особенно на мобильных устройствах и при медленном интернете.

Практические советы по оптимизации

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

1. Убираем лишнее. Помните, как мама учила складывать вещи в поездку? "Бери только необходимое!" То же самое с JavaScript – каждая лишняя строчка кода это дополнительные миллисекунды загрузки.
   Code name example

   // Было:
   function loadUserData(user) {
       console.log('Проверяем данные');
       console.log('Загружаем...');
       return user.name;
   }
   
   // Стало:
   function loadUserData(user) {
       return user.name;
   }

2. Загружаем с умом. Нужные вещи кладем сверху, остальное – на дно.
   В коде мы используем async и defer:
   Code name example

   // Основные скрипты – сразу
   <script src="core.js"></script>
   
   // Второстепенное грузим позже
   <script async src="stats.js"></script>
   <script async src="stats.js"></script>

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

Ленивая загрузка

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

Code name example

// Загружаем тяжелую функциональность 
// только когда нужно
button.addEventListener(
  'click', 
  async () => {
    const { heavyF } = await import(
      './heavy-f.js'
    );
    heavyF();
  }
);

DOM и как с ним работать

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

// Частая ошибка при работе с DOM
for (let i = 0; i < 100; i++) {
document.body.innerHTML += 'Блок';
}

// Оптимизированный вариант
const container = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
container.appendChild(document.createElement('div'));
}
document.body.appendChild(container);

И еще немного о производительности...

Загляните в нашу статью Что такое Web 3.0 и какое значение он имеет для развития Интернета, где мы подробно разбираем, как стандарт Web 3.0 меняет подходы к производительности веб-приложений

Рекомендуем почитать 🤓

"JavaScript: сильные стороны", Дуглас Крокфорд

Если бы Дуглас Крокфорд написал поваренную книгу, это была бы она. Только самые вкусные рецепты JavaScript.

На OZON

"Выразительный Javascript", Марейн Хавербеке

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

На OZON

"JavaScript для профессиональных веб-разработчиков", Закас Николас

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

На OZON

Заключение

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