Урок 30: Оптимизация производительности в JavaScript’е

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

Зачем оптимизировать JavaScript?

JavaScript мощный язык, но он работает в браузере, где ресурсы ограничены. Медленный код приводит к «лагам», зависаниям интерфейса и недовольству пользователей. Оптимизация помогает:

• Уменьшить время загрузки страницы.
• Снизить потребление памяти.
• Сделать анимации и взаимодействия плавными.

Представьте, что ваш код обрабатывает 10 000 элементов массива. Если оптимизировать цикл, вы сэкономите несколько секунд, которые критичны для пользователя.

Лучшие практики написания быстрого кода

1. Избегайте ненужных вычислений

Любая операция в цикле или часто вызываемой функции должна быть максимально легкой.

Плохо:

for (let i = 0; i < array.length; i++) { 
  // Каждый раз вычисляется длина массива
}

Хорошо:

const length = array.length; 
for (let i = 0; i < length; i++) { 
  // Длина вычислена один раз
}

2. Используйте эффективные циклы

• for и while обычно быстрее, чем forEach или for...of.
• Для массивов используйте методы map, filter, reduce, если не нужен точный контроль.

Пример:

// Медленнее 
array.forEach(item => console.log(item)); 

// Быстрее 
for (let i = 0; i < array.length; i++) { 
  console.log(array[i]); 
}

3. Минимизируйте доступ к DOM

Каждое обращение к DOM — дорогая операция. Кешируйте элементы.

Плохо:

document.getElementById('btn').addEventListener('click', () => { ... }); 
document.getElementById('btn').style.color = 'red'; // Повторный поиск элемента

Хорошо:

const btn = document.getElementById('btn'); 
btn.addEventListener('click', () => { ... }); 
btn.style.color = 'red'; // Используем кешированный элемент

4. Оптимизируйте условия

• Самые вероятные условия ставьте в начало.
• Используйте switch для множества вариантов.

Пример:

// Неоптимально 
if (value === 'rareCase') { ... } 
else if (value === 'commonCase') { ... } 

// Оптимально 
if (value === 'commonCase') { ... } 
else if (value === 'rareCase') { ... }

Минимизация перерисовки DOM

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

1. Группируйте изменения DOM

Вместо множества мелких правок делайте их за один шаг.

Плохо:

const list = document.getElementById('list'); 
for (let i = 0; i < 100; i++) { 
  const item = document.createElement('li'); 
  item.textContent = i; 
  list.appendChild(item); // 100 перерисовок!
}

Хорошо:

const list = document.getElementById('list'); 
const fragment = document.createDocumentFragment(); // Создаем "виртуальный" DOM 

for (let i = 0; i < 100; i++) { 
  const item = document.createElement('li'); 
  item.textContent = i; 
  fragment.appendChild(item); 
} 

list.appendChild(fragment); // Одна перерисовка

2. Используйте CSS-анимации вместо JavaScript

CSS-анимации работают на уровне браузера и менее затратны.

Плохо:

// JS-анимация перемещения элемента 
let pos = 0; 
setInterval(() => { 
  element.style.left = pos + 'px'; // Кадр анимации вызывает перерисовку 
  pos++; 
}, 10);

Хорошо:

/* CSS-анимация */ 
.box { 
  transition: left 0.5s ease-out; 
}

3. Избегайте чтения стилей после их изменения

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

Плохо:

element.style.width = '100px'; 
const width = element.offsetWidth; // Триггерит перерисовку 

Хорошо:

element.style.width = '100px'; 
// Выполняйте чтение стилей до их изменения или используйте requestAnimationFrame 

4. Используйте debounce и throttle для частых событий

События вроде resize или scroll могут вызываться десятки раз в секунду.

Пример с debounce:

function debounce(func, delay) { 
  let timeout; 
  return function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(() => func.apply(this, arguments), delay); 
  }; 
} 

window.addEventListener('resize', debounce(() => { 
  console.log('Размер окна изменился'); 
}, 200));

Практические задачи

Задача 1: Оптимизировать цикл

Дан массив чисел. Написать функцию, которая возвращает сумму элементов, используя самый быстрый цикл.

Решение:

function sumArray(arr) { 
  let sum = 0; 
  for (let i = 0, len = arr.length; i < len; i++) { 
    sum += arr[i]; 
  } 
  return sum; 
}

Задача 2: Группировка изменений DOM

Создать 100 кнопок на странице, минимизировав количество перерисовок.

Решение:

const container = document.getElementById('container'); 
const fragment = document.createDocumentFragment(); 

for (let i = 0; i < 100; i++) { 
  const button = document.createElement('button'); 
  button.textContent = 'Кнопка ' + i; 
  fragment.appendChild(button); 
} 

container.appendChild(fragment);

Инструменты для анализа производительности

• Chrome DevTools, вкладки Performance и Memory.
• Lighthouse, автоматическая проверка оптимизации.
• console.time(), замер времени выполнения кода.

console.time('Мой код'); 
// ... ваш код ... 
console.timeEnd('Мой код'); // Выведет время выполнения в консоль 

Заключение

Оптимизация это баланс между читаемостью кода и скоростью. Всегда тестируйте изменения и измеряйте результат.

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