Как улучшить производительность 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: The Good Parts", Douglas Crockford

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

На Amazon

"Eloquent JavaScript", Marijn Haverbeke

Марейн Хавербеке написал книгу так, будто рассказывает интересную историю, а не учит программированию.

На Amazon

"High Performance JavaScript", Nicholas C. Zakas

Настольная книга для тех, кто хочет, чтобы их код летал, а не ползал.

На Amazon

Заключение

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