{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧱 Проблема, которую решают "},{"type":"text","marks":[{"type":"code"}],"text":"defer"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"async"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда браузер встречает тег:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"по умолчанию он:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Останавливает парсинг HTML"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загружает "},{"type":"text","marks":[{"type":"code"}],"text":"script.js"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Выполняет его,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Потом только "},{"type":"text","marks":[{"type":"bold"}],"text":"продолжает строить DOM"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📌 Это блокирует рендер страницы → пользователь видит “пустой экран”, пока JS не загрузится."},{"type":"hardBreak"},{"type":"text","text":"👉 Поэтому появились атрибуты "},{"type":"text","marks":[{"type":"code"}],"text":"defer"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"async"},{"type":"text","text":", чтобы "},{"type":"text","marks":[{"type":"bold"}],"text":"не блокировать HTML-парсинг"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ "},{"type":"text","marks":[{"type":"code"}],"text":"defer"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 "},{"type":"text","marks":[{"type":"bold"}],"text":"Как работает:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Скрипт "},{"type":"text","marks":[{"type":"bold"}],"text":"загружается параллельно"},{"type":"text","text":" с HTML (асинхронно)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Но "},{"type":"text","marks":[{"type":"bold"}],"text":"выполняется только после полного парсинга HTML"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"то есть "},{"type":"text","marks":[{"type":"bold"}],"text":"когда DOM готов"},{"type":"text","text":", но "},{"type":"text","marks":[{"type":"bold"}],"text":"до события "},{"type":"text","marks":[{"type":"code"}],"text":"DOMContentLoaded"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Скрипты с "},{"type":"text","marks":[{"type":"code"}],"text":"defer"},{"type":"text","text":" выполняются "},{"type":"text","marks":[{"type":"bold"}],"text":"в порядке, в котором они указаны в HTML"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Отлично подходит для “основных” скриптов приложения (например, "},{"type":"text","marks":[{"type":"code"}],"text":"main.js"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"vendor.js"},{"type":"text","text":")."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📈 Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"→ Сначала загрузятся "},{"type":"text","marks":[{"type":"bold"}],"text":"оба параллельно"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"но "},{"type":"text","marks":[{"type":"bold"}],"text":"выполнятся строго по порядку: "},{"type":"text","marks":[{"type":"code"}],"text":"a.js"},{"type":"text","marks":[{"type":"bold"}],"text":" → "},{"type":"text","marks":[{"type":"code"}],"text":"b.js"},{"type":"text","text":" после построения DOM."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚡ "},{"type":"text","marks":[{"type":"code"}],"text":"async"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📗 "},{"type":"text","marks":[{"type":"bold"}],"text":"Как работает:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Скрипт "},{"type":"text","marks":[{"type":"bold"}],"text":"загружается параллельно"},{"type":"text","text":" с HTML (как "},{"type":"text","marks":[{"type":"code"}],"text":"defer"},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Но "},{"type":"text","marks":[{"type":"bold"}],"text":"выполняется сразу после загрузки"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"⚠️ даже если HTML ещё не допарсен."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Скрипты с "},{"type":"text","marks":[{"type":"code"}],"text":"async"},{"type":"text","text":" выполняются "},{"type":"text","marks":[{"type":"bold"}],"text":"в непредсказуемом порядке"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"— в зависимости от того, какой быстрее загрузится."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔹 Подходит для "},{"type":"text","marks":[{"type":"bold"}],"text":"независимых"},{"type":"text","text":" скриптов (например, аналитика, реклама, метрики)."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📈 Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"→ "},{"type":"text","marks":[{"type":"code"}],"text":"b.js"},{"type":"text","text":" может выполниться "},{"type":"text","marks":[{"type":"bold"}],"text":"раньше"},{"type":"text","text":", если загрузился быстрее,"},{"type":"hardBreak"},{"type":"text","text":"даже если в HTML он был ниже."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📊 Сравнение "},{"type":"text","marks":[{"type":"code"}],"text":"defer"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"async"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Свойство"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"defer"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"async"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Загрузка скрипта"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Асинхронно (параллельно с HTML)"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Асинхронно"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Выполнение"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"После полного парсинга HTML"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сразу после загрузки"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Порядок выполнения"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сохраняется"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не гарантируется"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Блокирует HTML-парсинг"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нет"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Событие "},{"type":"text","marks":[{"type":"code"}],"text":"DOMContentLoaded"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ждёт выполнения всех "},{"type":"text","marks":[{"type":"code"}],"text":"defer"},{"type":"text","text":"-скриптов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Не ждёт"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Типичные сценарии"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Основная логика сайта"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Внешние трекеры, реклама"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Пример визуально"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📦 Процесс:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Этап"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что происходит"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"1️⃣"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Браузер начинает парсить HTML"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"2️⃣"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Одновременно загружает оба скрипта"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"3️⃣"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"analytics.js"},{"type":"text","text":" (async) загружается быстрее → выполняется "},{"type":"text","marks":[{"type":"bold"}],"text":"сразу"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"4️⃣"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"HTML парсится до конца"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"5️⃣"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Потом выполняется "},{"type":"text","marks":[{"type":"code"}],"text":"main.js"},{"type":"text","text":" (defer)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"6️⃣"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Потом срабатывает "},{"type":"text","marks":[{"type":"code"}],"text":"DOMContentLoaded"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Выводы"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Атрибут"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда использовать"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"defer"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для основного JS-кода, который зависит от DOM (например, инициализация интерфейса)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"async"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для независимых скриптов (аналитика, метрики, реклама)"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Без атрибутов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Только если нужно заблокировать парсинг HTML (редко нужно)"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Совет"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если ты используешь "},{"type":"text","marks":[{"type":"bold"}],"text":"modern bundler"},{"type":"text","text":" (Next.js, Vite, Webpack) —"},{"type":"hardBreak"},{"type":"text","text":"он сам ставит "},{"type":"text","marks":[{"type":"code"}],"text":"defer"},{"type":"text","text":" для "},{"type":"text","marks":[{"type":"code"}],"text":"

Чем “defer” отличается от “async” в <script>?

Комментарии