JavaScript
JavaScript — одна з найпопулярніших мов програмування, яка використовується для створення інтерактивних вебсайтів.
Але чи замислювалися ви коли-небудь, як ваш JavaScript код виконується в браузері? Давайте розберемо це крок за кроком детально, але просто.
📍 Що відбувається, коли ви запускаєте JavaScript?
Коли ви відкриваєте вебсайт, браузер стикається з JavaScript кодом, вбудованим безпосередньо в вебсторінку або підключеним як зовнішній файл. Цей код не виконується одразу.
Замість цього він проходить через кілька етапів, щоб забезпечити правильну роботу. Ці етапи управляються JavaScript-двигуном, потужною програмою, вбудованою в ваш браузер.
Наприклад, Chrome використовує двигун V8, Firefox має SpiderMonkey, а Safari використовує JavaScriptCore.
1. Парсинг
Перший крок виконання JavaScript коду — це парсинг. Тут JavaScript двигун читає код рядок за рядком і перевіряє на синтаксичні помилки.
Парсинг включає розбиття коду на менші компоненти, які називаються токенами, та побудову структури даних, що називається Абстрактним Синтаксичним Деревом (AST).
- Токени: Це маленькі частинки коду, такі як ключові слова (
let,function), імена змінних, оператори (+,=) і так далі. - Абстрактне Синтаксичне Дерево (AST): Це структура у вигляді дерева, яка представляє логічний потік вашого коду. Це набагато зручніше для роботи з цією структурою, ніж з сирим текстом.
Наприклад, якщо ваш код має помилку, як у випадку cons log('Hello') замість console.log('Hello'), парсер виведе синтаксичну помилку і припинить виконання.
Чому парсинг важливий:
Без парсингу браузер не зміг би інтерпретувати ваш код. Це як намагатися читати книгу, написану незрозумілою мовою — ви б просто застрягли.
2. Компіляція
Після парсингу JavaScript двигун компілює код у формат, який розуміє комп’ютер. Цей процес називається компіляцією "Just-In-Time" (JIT).
На відміну від деяких мов програмування, які повністю компілюються або інтерпретуються, JavaScript використовує гібридний підхід.
- Інтерпретація: Спочатку код перетворюється в проміжний формат, який називається байт-кодом, і він виконується швидше, ніж сирий JavaScript.
- Оптимізація: Під час виконання двигун визначає часто виконувані частини (так званий "гарячий код") і оптимізує їх для ще кращої продуктивності. Ця оптимізація відбувається під час виконання, забезпечуючи ефективне виконання коду.
Приклад оптимізації:
Якщо цикл виконується тисячі разів, двигун може оптимізувати його виконання, пропускаючи повторювані перевірки або передобчислюючи деякі значення.
3. Виконання
Після компіляції JavaScript двигун виконує код. На цьому етапі виконуються інструкції, і браузер виконує дії, такі як відображення контенту, взаємодія з API або реакція на події користувача.
Під час виконання JavaScript двигун використовує два основних компоненти:
1- Стек викликів: Він відстежує виклики функцій. Коли викликається функція, вона додається в стек. Як тільки функція завершується, її видаляють зі стеку.
Приклад: Якщо ви викликаєте functionA(), а всередині неї викликається functionB(), стек виглядатиме так:
- Вгорі:
functionB() - Знизу:
functionA()
2- Купа: Тут зберігаються об’єкти та змінні в пам’яті. Наприклад, якщо ви створюєте об’єкт, як let user = {name: 'John'}, він зберігається в купі.
4. Збірка сміття
Коли ви оголошуєте змінні або створюєте об’єкти, вони займають місце в пам’яті. Але що відбувається, коли ці змінні більше не потрібні? Якщо вони залишаються в пам’яті, це може призвести до проблем з продуктивністю або збою програми.
Ось тут вступає в гру збірка сміття. JavaScript двигун автоматично визначає та видаляє невикористовувані або недоступні дані, щоб звільнити пам’ять.
Цей процес здійснюється за допомогою алгоритмів, таких як mark-and-sweep, які позначають об'єкти, що все ще використовуються, і очищають решту.
Чому збірка сміття важлива:
На відміну від деяких інших мов програмування, вона забезпечує швидкість і чутливість вашої веб-застосунку без необхідності вручну керувати пам'яттю.
5. Цикл подій
JavaScript є однопотоковим, що означає, що він може виконувати лише одне завдання за раз. Однак веб-застосунки часто мають справу з асинхронними завданнями, такими як отримання даних з сервера, обробка введення користувача або очікування таймерів. Цикл подій забезпечує виконання цих завдань у правильному порядку.
Ось як це працює:
1- Стек викликів: Основний потік обробляє синхронний код першим.
2- Web API: Асинхронні завдання (наприклад, setTimeout, fetch) передаються в API, надані браузером.
3- Черга завдань: Як тільки асинхронне завдання завершується, воно додається в чергу.
4- Цикл подій: Цикл подій постійно перевіряє, чи порожній стек викликів. Якщо так, він бере наступне завдання з черги і додає його в стек.
Приклад циклу подій у дії:
console.log('Start');
setTimeout(() => console.log('Timer Done'), 1000);
console.log('End');
Виведення:
Start
End
Timer Done
Функція setTimeout не блокує основний потік. Замість цього браузер обробляє таймер, поки інший код продовжує виконуватися.
Аналогія з реального життя ✅
Уявіть виконання JavaScript як приготування їжі на кухні:
1- Парсинг: Читання рецепту, щоб переконатися, що він чіткий і без помилок.
2- Компіляція: Підготовка всіх інгредієнтів і налаштування інструментів.
3- Виконання: Приготування страви крок за кроком.
4- Збірка сміття: Очищення невикористаних предметів, щоб звільнити місце для нових завдань.
5- Цикл подій: Управління замовленнями і забезпечення правильного порядку подачі.
Основні висновки ⚡
- Виконання JavaScript включає парсинг, компіляцію, виконання, очищення та управління завданнями.
- Сучасні JavaScript-двигуни, такі як V8, використовують компіляцію Just-In-Time для пришвидшення коду.
- Цикл подій гарантує, що асинхронні завдання не блокують основний потік.
- Збірка сміття підтримує ефективне використання пам'яті вашою програмою.
Розуміння цих кроків допоможе вам відлагоджувати проблеми, писати кращий код і оцінити складність, що стоїть за на перший погляд простою дією виконання JavaScript.
Наступного разу, коли ви будете писати JavaScript, подумайте про неймовірну подорож вашого коду від тексту до дії в браузері!
🌐 Підключайтесь до мене:
📍 LinkedIn
📍 X (Twitter)
📍 Telegram
📍 Instagram
Щасливого кодування!
Перекладено з: How JavaScript is Executed? 🤔