Пошук уроків, статей та іншого контенту
Рушій V8, парсинг і виконання коду, а також три способи підключити скрипт до сторінки.
Код на JavaScript виконує спеціальна програма — рушій (engine). У Chrome та Node.js це V8, у Firefox — SpiderMonkey, у Safari — JavaScriptCore. Рушій парсить код у проміжне представлення, а потім компілює у машинний код «на льоту» (JIT-компіляція).
<!-- 1. Вбудований скрипт -->
<script>
console.log("Привіт зі сторінки");
</script>
<!-- 2. Зовнішній файл -->
<script src="app.js"></script>
<!-- 3. Модуль (ES Module) -->
<script type="module" src="app.js"></script>Браузер парсить HTML зверху вниз і виконує скрипти в момент, коли до них доходить. Якщо поставити <script> у <head> без додаткових атрибутів, він заблокує рендеринг сторінки до завершення завантаження та виконання.
defer — скрипт завантажується паралельно з парсингом HTML, виконується після побудови DOM. Найкращий вибір за замовчуванням.
async — скрипт завантажується паралельно, виконується одразу після завантаження, перериваючи парсинг HTML. Підходить для незалежних скриптів (аналітика).
без атрибутів у кінці body — класичний надійний підхід: HTML вже повністю розпарсений, коли скрипт виконується.
<script src="analytics.js" async></script>
<script src="app.js" defer></script>Для сучасних застосунків: використовуйте defer для скриптів, що залежать від DOM, і async для незалежних (метрики, реклама).
Спроба звернутись до DOM-елемента зі скрипту в <head> без defer — елемент ще не існує, DOM порожній.
Підключення кількох скриптів без defer/async у head — кожен блокує рендеринг послідовно, сторінка «біла» довше.
Плутанина між async і defer — async не гарантує порядок виконання кількох скриптів, defer гарантує.
Рушій (V8, SpiderMonkey, JavaScriptCore залежно від браузера) парсить і виконує JavaScript-код. Спосіб підключення скрипту до сторінки — вбудований, зовнішній файл чи модуль — і атрибути defer/async визначають, коли саме він виконається відносно побудови DOM. defer — типовий вибір за замовчуванням для скриптів, що працюють із DOM; async — для незалежних скриптів на кшталт аналітики.