Free React For Beginners

\n\nВін зупинить парсинг HTML і почне завантажувати цей скрипт. Коли завантаження закінчиться, він виконає цей скрипт. І лише після його виконання браузер продовжить парсинг та відображення сторінки. Така поведінка призводить до того, що, поки ваш скрипт вантажиться та виконується, новий контент на сторінці не з'являється (хоча дещо на фоні все ж таки буде відбуватися, але це вже оптимізації самих браузерів). Така поведінка не дуже сприяє гарному користувацькому досвіду. \n\nТому з'явилися спеціальні атрибути, які змінюють цю поведінку. \n\n1️⃣ Перший атрибут це async: \n\n\n\nВін каже браузеру буквально наступне: \n\n- Коли ти побачиш цей скрипт, не потрібно зупинятися. Просто почни його завантажувати у фоновому режимі, а коли завантажиш, от тоді вже виконуй.\n\nЦе дає змогу продовжувати показувати контент, паралельно із завантаженням скрипту. Але! Коли скрипт завантажиться, він почне виконуватися, а це може зупинити парсинг та відображення сторінки, якщо вона ще не довантажилася, що може бути теж не зручно. Ще один мінус в тому, що є ймовірність, що деякі елементи сторінки не встигнуть завантажитися і скрипт не зможе з ними працювати. Плюс до цього - порядок виконання асинхронних скриптів не гарантований, вони виконуються по мірі завантаження.\n\n2️⃣ Другий атрибут це defer\n\nЙого завантаження теж відбувається у фоновому режимі і не блокує відображення контенту. Але виконання скрипту буде відкладено до повного завантаження сторінки. Таким чином відображення змісту сторінки не буде заблоковане виконанням скрипту, а контент, в свою чергу, завжди буде готовий до взаємодії з кодом. Якщо у вас декілька defer скриптів, вони будуть виконані в тому самому порядку як на сторінці.\n\nЗ цікавого, якщо застосувати async та defer разом, буде вибрана стратегія defer\n\nБільш детальніше англійською тут\n\n@reactbeginners","datePublished":"2023-12-04T09:50:15Z","dateModified":"2023-12-04T09:50:15Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners","image":"https://img.tlmtr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners","image":"https://img.tlmtr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":6,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1685},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":48},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":28},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":6}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1704429261-reactbeginners/posts/441","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners/posts/441","mainEntityOfPage":"https://telemetr.io/ch/channels/1704429261-reactbeginners/posts/441","headline":"[Ілюстрація] Браузер та завантаження JavaScript від Адді Османі","articleBody":"[Ілюстрація] Браузер та завантаження JavaScript від Адді Османі","datePublished":"2023-12-04T09:49:41Z","dateModified":"2023-12-04T09:49:41Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners","image":"https://img.tlmtr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners","image":"https://img.tlmtr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1641},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1704429261-reactbeginners/posts/440","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners/posts/440","mainEntityOfPage":"https://telemetr.io/ch/channels/1704429261-reactbeginners/posts/440","headline":"Поки я тут трохи не при справах (доведеться ще мінімум тиждень вдома сидіти), хочу порадити вам інший канал п…","articleBody":"Поки я тут трохи не при справах (доведеться ще мінімум тиждень вдома сидіти), хочу порадити вам інший канал по React від Максима Рудного. \n\n🤝 Це не реклама, радше партнерство, адже у нього, до прикладу, є міні курс по GraphQL якого немає у мене, є матеріалу по React-у та навіть поради щодо оформлення резюме (ой бачили б ви моє резюме 😢 )\n\n❤️Канал українською (при чому він його зробив до того як це стало мейністрімом), тож прошу.\n\nА якщо ви його вже бачили - цікаво було б почути відгуки!","datePublished":"2023-12-01T14:29:07Z","dateModified":"2023-12-01T14:29:07Z","author":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners","image":"https://img.tlmtr.io/c/1RlBUx/5330168532073302839?ty=x"},"publisher":{"@type":"Organization","name":"Free React For Beginners","url":"https://telemetr.io/ch/channels/1704429261-reactbeginners","image":"https://img.tlmtr.io/c/1RlBUx/5330168532073302839?ty=x"},"commentCount":41,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1500},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":45},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":41}]}}]}