{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 1. Как браузер загружает страницу"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда браузер получает HTML-документ, он выполняет следующие шаги:"}]},{"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":""},{"type":"text","text":" (CSS) — останавливается и загружает стиль, потому что стили влияют на отображение."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда встречает тег "},{"type":"text","marks":[{"type":"code"}],"text":"\n\n\n

Привет!

\n\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","text":"Браузер начинает читать HTML."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Доходит до "},{"type":"text","marks":[{"type":"code"}],"text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Что делает:"}]},{"type":"bulletList","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":"только после полного парсинга DOM"},{"type":"text","text":" (перед "},{"type":"text","marks":[{"type":"code"}],"text":"DOMContentLoaded"},{"type":"text","text":")."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Без блокировки."},{"type":"hardBreak"},{"type":"text","text":"🟢 Гарантированный порядок выполнения (по очереди)."},{"type":"hardBreak"},{"type":"text","text":"🟢 Идеально для большинства случаев."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Способ 2. "},{"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","marks":[{"type":"bold"}],"text":"Что делает:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Скрипт "},{"type":"text","marks":[{"type":"bold"}],"text":"загружается асинхронно"},{"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":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ Используется для "},{"type":"text","marks":[{"type":"italic"}],"text":"независимых скриптов"},{"type":"text","text":" (аналитика, реклама, пиксели)."},{"type":"hardBreak"},{"type":"text","text":"⚠️ Порядок выполнения не гарантируется."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Способ 3. Перенос скриптов в конец "},{"type":"text","marks":[{"type":"code"}],"text":""}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n ...\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"До загрузки JS:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"HTML полностью распарсен,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"пользователь уже видит контент,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"JS выполняется последним шагом."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📌 Это “старый”, но рабочий способ."},{"type":"hardBreak"},{"type":"text","text":"В современном HTML его заменил "},{"type":"text","marks":[{"type":"code"}],"text":"

Скрипты в <head>

Комментарии