Перформанс (продуктивність) є одним із найважливіших аспектів при розробці вебсайтів або додатків. Ніхто не хоче, щоб вебсторінка завантажувалась повільно або додаток давав збої, а користувачі не повинні чекати занадто довго. Згідно з даними Kissmetrics, 40% відвідувачів залишать сайт, якщо він завантажується більше трьох секунд, а 47% очікують, що сайт завантажиться за менше ніж дві секунди.
У цьому посібнику ви знайдете 10 найпоширеніших проблем із продуктивністю JavaScript та методи їх вирішення найпростішими способами.
10 Найпоширеніших Проблем з Продуктивністю JavaScript
Продуктивність завжди повинна враховуватись при розробці ваших вебдодатків, зважаючи на ці цифри. Ось кілька стратегій для ефективного покращення швидкості додатка:
Які основні теми ви вивчите з курсу JavaScript?
10 Найпоширеніших Проблем JavaScript, з якими стикаються розробники у 2025 році
1. Кеш браузера
Є два способи реалізації цього. Перший — це впровадження Service Worker для використання JavaScript Cache API. Другий спосіб — використовувати кеш протоколу HTTP.
Для доступу до конкретного елемента часто використовуються скрипти. Продуктивність можна значно покращити, якщо зберігати об'єкт повторного доступу в змінній, визначеній користувачем, і використовувати цю змінну для наступних доступів до цього елемента.
2. Визначте контекст виконання
Вам потрібно створити набір чітко визначених умов, в яких ви зможете тестувати продуктивність коду, щоб кількісно оцінити будь-які зміни, які ви вносите до вашого додатка.
Нереально оптимізувати та тестувати продуктивність для кожної версії JavaScript engine. Однак тестування в одному контексті — це не найкращий підхід, оскільки це може призвести до неповних даних. Тому важливо створити кілька різних контекстів і переконатись, що код працює добре в кожному з них.
3. Позбувайтесь зайвого JavaScript
Цей крок скорочує час, який потрібен браузеру для аналізу та компіляції коду, окрім часу передачі даних. Для досягнення цього треба врахувати наступні моменти:
Доцільно прибирати будь-яку функціональність, якою не користуються люди, разом з усім JavaScript кодом, який з нею пов'язаний. Це покращить користувацький досвід і пришвидшить завантаження сайту.
Ще один можливий варіант — це коли ви маєте залежності, що надають якусь функціональність, яка вже є за замовчуванням у всіх браузерах без необхідності використовувати додатковий код, або коли бібліотека була випадково додана, але не є потрібною.
Читайте також: Які топ 10 концепцій JavaScript повинні знати програмісти для досягнення успіху в веб-розробці?
4. Уникайте надмірного використання пам'яті
Оскільки неможливо точно визначити, скільки пам'яті потребує пристрій, що використовує ваш додаток, завжди намагайтеся використовувати мінімум RAM. JavaScript призупиняється, а збирач сміття браузера запускається щоразу, коли ваш код просить браузер зарезервувати більше пам'яті. Якщо це відбувається часто, сторінка буде працювати повільно.
5. Відкладіть завантаження зайвого JavaScript
Хоча користувачі очікують, що сайт завантажиться швидко, не всі функції повинні бути доступні при першому завантаженні сторінки. Можна відкласти завантаження функції до того моменту, поки користувач не зробить певну дію (наприклад, клікне на елемент чи перемкне вкладки), щоб ця функція була виконана.
Таким чином, ви зможете уникнути завантаження та компіляції JavaScript коду, що уповільнило б перше завантаження сайту.
Ми можемо почати завантажувати ці функції, як тільки сторінка повністю завантажиться, роблячи їх доступними, щойно користувач почне взаємодіяти з сайтом. Google рекомендує використовувати блоки по 50 мс для цього відкладеного завантаження в моделі RAIL, щоб не заважати взаємодії користувача з вебсайтом.
6. Уникайте витоків пам'яті
Постійний витік пам'яті спричиняє те, що завантажена сторінка буде резервувати все більше і більше пам'яті, зрештою заповнюючи доступну пам'ять пристрою та негативно впливаючи на продуктивність. Цей тип збоїв — напевно, ви вже бачили (і, можливо, були цим роздратовані), зазвичай на сторінці з слайдером зображень або каруселлю.
Створивши хронологію в вкладці Performance (Продуктивність) інструментів розробника Chrome, ви можете визначити, чи є на вашому сайті витоки пам'яті. Витоки пам'яті зазвичай спричиняються елементами DOM, які видаляються зі сторінки, але мають змінну, яка на них посилається, що ускладнює їх видалення збирачем сміття.
7. Якщо вам потрібно виконати код, який вимагає багато часу для обробки, використовуйте Web Workers.
Документація Mozilla Developers Network (MDN) зазначає, що Web Workers дозволяє виконувати операції сценаріїв у фоновому потоці, відмінному від основного потоку виконання вебзастосунку. Перевага цього підходу полягає в тому, що операції, які потребують багато часу, можуть виконуватись у іншому потоці, звільняючи основний потік — зазвичай інтерфейс користувача — від блокування чи уповільнення.
Web Workers дозволяють виконувати обчислення, що вимагають великої обчислювальної потужності, не перешкоджаючи потоку інтерфейсу користувача. Для досягнення оптимальної ефективності Web Workers дозволяють створювати нові потоки і призначати їм завдання. Таким чином, основний потік може продовжувати працювати, не блокуючи інші процеси, що зазвичай блокували б інші завдання.
8. Зберігайте елемент DOM у локальній змінній, якщо ви звертаєтесь до нього кілька разів.
DOM повільно доступний. Краще зберігати вміст елемента в локальній змінній, якщо ви плануєте звертатись до нього кілька разів. Однак важливо пам'ятати, що змінна повинна бути встановлена в "null", якщо ви хочете пізніше видалити значення DOM, щоб уникнути витоків пам'яті.
9. Надавайте локальним змінним пріоритет доступу.
Після визначення, чи існує змінна локально, JavaScript поступово розширює її область видимості до глобальних змінних. JavaScript може швидше отримати доступ до змінних, коли вони збережені в локальній області.
Локальні змінні можуть проходити через кілька рівнів області видимості і знаходяться в найконкретнішій області; пошук може здійснюватись загальними запитами. Важливо використовувати let або const перед кожною змінною, коли визначаєте область видимості функції в локальній змінній без попереднього оголошення змінної. Це допоможе прискорити код і уникнути додаткових запитів.
10. Уникайте глобальних змінних
Коли ви звертаєтесь до глобальних змінних зсередини функції або іншої області видимості, механізм сценаріїв повинен шукати через область видимості; отже, якщо локальна область втрачається, змінна буде видалена. Продуктивність покращиться, якщо змінні в глобальній області не будуть зберігатися протягом всього життєвого циклу скрипта.
Перекладено з: What Are The 10 Most Common JavaScript Performance Issues, And How Can They Be Resolved?