#1. Уроки по JavaScript для НАЧИНАЮЩИХ (тэг script, async, defer)
Атрибуты async и defer
Моя шпаргалка. Обязательные атрибуты в скриптах? Атрибуты async и defer существуют, чтобы помочь нам ускорить загрузку сайта. Скрипты с атрибутами defer загружаются и выполняются последовательно, а с async – асинхронно. Кроме того, defer всегда ждёт, пока весь HTML-документ будет готов, а async выполняется сразу после загрузки. По умолчанию script теги блокируют рендеринг , что означает, что браузер не будет отображать содержимое страницы до тех пор, пока скрипт не запустится. Когда анализатор HTML...
defer и async — это два атрибута, которые можно использовать с тегом <script> в HTML для управления загрузкой и выполнением JavaScript-файлов. Оба атрибута помогают улучшить производительность веб-страниц, но работают они по-разному. 1. defer Описание: Атрибут defer указывает браузеру, что скрипт должен быть загружен асинхронно, но выполнен только после того, как весь HTML-документ будет полностью загружен и разобран. Порядок выполнения: Скрипты с атрибутом defer выполняются в порядке их появления в документе. Использование: Подходит для скриптов, которые зависят от DOM, так как они будут выполнены только после полной загрузки HTML. Пример: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="script.js" defer></script> </head> <body> <h1>Hello, World!</h1> </body> </html> 2. async Описание: Атрибут async указывает браузеру, что скрипт должен быть загружен асинхронно и выполнен сразу после загрузки, не дожидаясь завершения разбора HTML-документа. Порядок выполнения: Скрипты с атрибутом async могут выполняться в любом порядке, в зависимости от того, какой скрипт загрузится первым. Использование: Подходит для скриптов, которые не зависят от DOM или других скриптов, так как они могут выполняться в произвольном порядке. Пример: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="script.js" async></script> </head> <body> <h1>Hello, World!</h1> </body> </html> Использование defer и async позволяет оптимизировать загрузку JavaScript на веб-страницах, улучшая производительность и пользовательский опыт. Выбор между ними зависит от того, как ваш скрипт взаимодействует с DOM и другими скриптами.