[{"data":1,"prerenderedAt":1710},["ShallowReactive",2],{"$fgv7etfw47xtMg4zCBgpPSjFyYoCCFgTyzIu7UpdKPPs":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":126,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":129,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":134,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":479,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":701,"mdc-jmztqw-key":721,"mdc-jqmv71-key":733,"mdc--kehp8-key":767,"mdc-quysjq-key":862,"mdc--xysac0-key":908,"mdc--7b2926-key":968,"mdc--kvjxl3-key":1013,"mdc-r5sg42-key":1100,"mdc-ua0z02-key":1126,"mdc--djoje4-key":1166,"mdc-rlxn5r-key":1197,"mdc--t4o32v-key":1210,"mdc-zffw6l-key":1254,"mdc--g4ftjt-key":1301,"mdc--ewohdy-key":1358,"mdc-4twyio-key":1528,"mdc-56x2z-key":1536,"mdc-r98ckl-key":1550,"mdc-y5h15k-key":1588,"mdc-c4zbdz-key":1625,"mdc-i8xdh1-key":1658},{"content":4,"quizQuestionContent":97,"type":116,"pageMeta":117},[5,9,13,16,20,23,27,30,34,38,41,45,48,52,55,58,61,64,68,71,74,77,80,84,87,91,94],{"id":6,"value":7,"isTypeH1":8},"1898","Парсинг JavaScript и изображений в браузере",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4344","Теория: как идет рендеринг","theory-how-rendering-works",{"id":14,"value":15,"isTypeParagraph":8},"9980","Во время загрузки документа HTML‑парсер читает HTML потоково и строит DOM‑дерево по мере появления токенов.\n\nЗатем (упрощенно) выполняются вычисление стилей и этапы layout/paint, но в контексте задачи важнее следующее: синхронные (блокирующие) скрипты способны остановить парсинг, а изображения обычно грузятся параллельно и не мешают завершить построение DOM.\n\n```\nСильно упрощенная схема:\n\nHTML bytes\n   |\n   v\nHTML parser  --->  DOM  ----\\\n   |                         \\\n   | (находит \u003Cscript>)       +--> Style calculation --> Layout --> Paint/Composite --> Pixels\n   | (находит \u003Cimg>)         /\n   v                        /\nNetwork requests (JS, images, fonts, ...) \n```",{"id":17,"value":18,"anchor":19,"isTypeH3":8},"4340","DOMContentLoaded и load","domcontentloaded-and-load",{"id":21,"value":22,"isTypeParagraph":8},"9981","Событие `DOMContentLoaded` наступает, когда HTML распарсен и отложенные скрипты (например, `defer` и модульные без `async`) завершили выполнение.\n\n`DOMContentLoaded` не обязано ждать загрузки изображений, поэтому тяжелые картинки сами по себе обычно не задерживают это событие, если отсутствуют другие блокировки.",{"id":24,"description":25,"titleAlert":26,"isTypeAlertInfo":8},"629","Для корректной инициализации часто проверяется `document.readyState`, и обработчик `DOMContentLoaded` добавляется только если состояние равно `loading`.",null,{"id":28,"value":29,"isTypeParagraph":8},"9982","```\n// Схема подписки без дублирования\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', init);\n} else {\n  init();\n}\n\nfunction init() {\n  // Инициализация интерфейса\n}\n```",{"id":31,"value":32,"anchor":33,"isTypeH2":8},"4345","Теория: как парсится и выполняется JavaScript","theory-javascript-loading-and-execution",{"id":35,"value":36,"anchor":37,"isTypeH3":8},"4341","Classic scripts: без атрибутов","classic-scripts-without-attrs",{"id":39,"value":40,"isTypeParagraph":8},"9983","Внешний классический `\u003Cscript src=\"...\">\u003C/script>` без `async` и `defer` обычно является парсер‑блокирующим: HTML‑парсер приостанавливается, скрипт загружается и выполняется, после чего парсинг продолжается.\n\nИз‑за этого порядок подключения JS в HTML имеет значение: следующий HTML не будет распарсен, пока текущий скрипт не выполнится.\n\n```\n\u003C!-- Блокирующий пример: парсинг останавливается на script -->\n\u003Cscript src=\"heavy-lib.js\">\u003C/script>\n\u003Cdiv id=\"app\">Этот div будет распарсен только после выполнения heavy-lib.js\u003C/div>\n```",{"id":42,"value":43,"anchor":44,"isTypeH3":8},"4342","defer и async для classic scripts","defer-and-async-for-classic-scripts",{"id":46,"value":47,"isTypeParagraph":8},"9984","`defer` означает: загрузка идет параллельно парсингу, выполнение откладывается до завершения парсинга; порядок выполнения нескольких `defer`‑скриптов сохраняется по порядку в HTML.\n\n`async` означает: загрузка идет параллельно парсингу, но выполнение начинается «как только готово», поэтому порядок между несколькими `async`‑скриптами не гарантируется.\n\n```\n\u003C!-- defer: порядок сохраняется, выполнение после парсинга -->\n\u003Cscript defer src=\"vendor.js\">\u003C/script>\n\u003Cscript defer src=\"app.js\">\u003C/script>\n\n\u003C!-- async: порядок не гарантируется, выполнение по готовности -->\n\u003Cscript async src=\"analytics.js\">\u003C/script>\n\u003Cscript async src=\"ads.js\">\u003C/script>\n```",{"id":49,"value":50,"anchor":51,"isTypeH3":8},"4343","type=\"module\"","type-module",{"id":53,"value":54,"isTypeParagraph":8},"9985","`\u003Cscript type=\"module\">` по умолчанию выполняется после завершения парсинга (если `async` не задан), то есть ведет себя «как defer по умолчанию».\n\nАтрибут `defer` для модулей обычно не меняет поведение, а `async` переводит модуль в режим выполнения по готовности, без гарантий порядка относительно других `async`‑скриптов.\n\n```\n\u003C!-- module: по умолчанию выполнится после парсинга -->\n\u003Cscript type=\"module\" src=\"app.mjs\">\u003C/script>\n\n\u003C!-- module + async: выполнится по готовности, порядок не гарантируется -->\n\u003Cscript type=\"module\" async src=\"feature-a.mjs\">\u003C/script>\n\u003Cscript type=\"module\" async src=\"feature-b.mjs\">\u003C/script>\n```",{"id":10,"value":56,"anchor":57,"isTypeH3":8},"Сводная таблица по скриптам","script-summary-table",{"id":59,"value":60,"isTypeParagraph":8},"9986","| Вариант подключения | Скачивание | Выполнение | Порядок | Блокирует парсинг HTML |\n|---|---|---|---|---|\n| Classic без атрибутов | Часто «в лоб»: парсер ждет, пока скрипт загрузится | Немедленно при встрече тега | По месту в HTML | Да |\n| Classic `defer` | Параллельно парсингу | После завершения парсинга | Гарантирован | Нет |\n| Classic `async` | Параллельно парсингу | По готовности (возможно до конца парсинга) | Не гарантирован | Во время загрузки нет, но выполнение прерывает работу |\n| `type=\"module\"` (без async) | Параллельно парсингу, включая зависимости | После завершения парсинга | На практике предсказуемо, ключевое — «после парсинга» | Нет |",{"id":62,"description":63,"titleAlert":26,"isTypeAlertInfo":8},"630","Важно отличать «блокировку парсинга» от «блокировки отрисовки»: скрипт может не останавливать парсер (defer/module), но все равно откладывать момент, когда интерфейс становится интерактивным, если инициализация зависит от JavaScript.",{"id":65,"value":66,"anchor":67,"isTypeH2":8},"4346","Теория: как обрабатываются изображения","theory-images-loading-decoding",{"id":31,"value":69,"anchor":70,"isTypeH3":8},"Почему img обычно не блокирует парсер","why-img-usually-does-not-block-parser",{"id":72,"value":73,"isTypeParagraph":8},"9987","Построение DOM не требует, чтобы изображения были загружены и декодированы, поэтому HTML может быть распарсен полностью, даже если картинки еще в процессе загрузки.\n\nПри этом изображения влияют на то, насколько быстро страница выглядит «готовой», потому что для показа нужен декодированный bitmap, а декодирование может занимать заметное время.",{"id":65,"value":75,"anchor":76,"isTypeH3":8},"Размеры и сдвиги макета","sizes-and-layout-shifts",{"id":78,"value":79,"isTypeParagraph":8},"9988","Атрибуты `width` и `height` позволяют заранее зарезервировать место под изображение до загрузки файла, снижая вероятность перерасчета макета при появлении картинки.\n\nЕсли размеры не заданы, место под изображение может уточняться поздно, что повышает вероятность сдвигов layout.\n\n```\n\u003Cimg\n  src=\"photo.jpg\"\n  alt=\"Описание\"\n  width=\"800\"\n  height=\"600\"\n  decoding=\"async\"\n  fetchpriority=\"low\"\n>\n```\n",{"id":81,"value":82,"anchor":83,"isTypeH3":8},"4347","decoding: sync/async/auto","decoding-sync-async-auto",{"id":85,"value":86,"isTypeParagraph":8},"9989","Декодирование — это преобразование сжатых данных изображения в формат пикселей для отрисовки.\n\n`decoding=\"sync\"` является подсказкой предпочесть синхронное декодирование, а `decoding=\"async\"` — подсказкой предпочесть асинхронное декодирование, чтобы уменьшить вероятность задержки отрисовки другого контента.\n\n`decoding=\"auto\"` означает, что решение остается за браузером.",{"id":88,"value":89,"anchor":90,"isTypeH3":8},"4348","loading и fetchpriority","loading-and-fetchpriority",{"id":92,"value":93,"isTypeParagraph":8},"9990","`loading=\"lazy\"` включает ленивую загрузку: запрос на изображение обычно откладывается до приближения к области видимости.\n\n`fetchpriority` предназначен для влияния на приоритет загрузки: для важного изображения первого экрана может устанавливаться высокий приоритет, а для второстепенных — низкий.\n\n```\n\u003C!-- Типовой вариант: важное изображение первого экрана — eager/high,\n     изображения ниже — lazy/low -->\n\n\u003Cimg\n  src=\"hero.jpg\"\n  alt=\"Hero\"\n  width=\"1200\"\n  height=\"630\"\n  loading=\"eager\"\n  fetchpriority=\"high\"\n  decoding=\"async\"\n>\n\n\u003Cimg\n  src=\"gallery-1.jpg\"\n  alt=\"Gallery 1\"\n  width=\"800\"\n  height=\"600\"\n  loading=\"lazy\"\n  fetchpriority=\"low\"\n  decoding=\"async\"\n>\n```",{"id":95,"value":96,"isTypeParagraph":8},"9991","Кратко: верным является вариант 2 — классический `\u003Cscript>` без атрибутов блокирует парсинг, `defer` выполняется после парсинга и сохраняет порядок, `async` выполняется по готовности без гарантий порядка, а `type=\"module\"` по умолчанию откладывает выполнение до конца парсинга. `\u003Cimg>` обычно не блокирует парсинг, но влияет на визуальную стабильность через размеры и на производительность через время декодирования; `loading/decoding/fetchpriority` управляют моментом загрузки, планированием декодирования и приоритетом запроса.\n",{"id":98,"options":99,"hint":113,"solution":114,"description":115},"1137",[100,104,107,110],{"id":101,"label":102,"isCorrect":103},"4680","При встрече `\u003Cscript>` HTML-парсер всегда продолжает разбор, потому что скрипты выполняются только после полной загрузки страницы; `async` и `defer` влияют лишь на скорость скачивания, но не на момент выполнения. Изображения, наоборот, всегда блокируют парсер до полного декодирования, так как без пикселей невозможно построить DOM. Поэтому оптимизация в первую очередь сводится к уменьшению размера картинок, а порядок подключения JS не играет роли.",false,{"id":105,"label":106,"isCorrect":8},"4681","При встрече внешних классических скриптов `\u003Cscript>` без атрибутов парсер обычно останавливается: скрипт загружается и выполняется, после чего парсинг продолжается; с `defer` и `async` загрузка идёт параллельно, но `defer` выполняется после завершения парсинга, а `async` — сразу после готовности, без гарантий порядка. Для `type=\"module\"` выполнение по умолчанию откладывается до окончания парсинга (если не задан `async`), а `defer` на модуль не влияет. `\u003Cimg>` чаще не блокирует парсинг, но может влиять на layout и paint из‑за размеров и декодирования; `loading`, `decoding`, `fetchpriority` управляют тем, когда грузить и как «вписывать» декодирование в отрисовку.",{"id":108,"label":109,"isCorrect":103},"4682","Classic-скрипты по умолчанию всегда выполняются после события `DOMContentLoaded`, а `defer` заставляет их выполниться как можно раньше — ещё до построения DOM; `async` при этом гарантирует порядок, потому что браузер сортирует скрипты по месту в HTML. У модулей наоборот: без `defer` они блокируют парсер до окончания всех импортов. Для изображений `loading=\"lazy\"` означает, что файл полностью скачивается заранее, но не рисуется до прокрутки, поэтому трафик не экономится, а экономится только время на декодирование.",{"id":111,"label":112,"isCorrect":103},"4683","При разборе HTML браузер сначала строит финальный render tree, и только потом начинает скачивать скрипты и изображения, чтобы не тратить сеть на лишнее. Поэтому `\u003Cscript>` не влияет на парсинг, а влияет лишь на готовность CSS; атрибуты `async/defer` нужны только для совместимости. Для `\u003Cimg>` `decoding=\"async\"` ускоряет сеть, а `fetchpriority` управляет тем, когда картинка появится на экране, не меняя сетевой очереди. Следовательно, корректная стратегия — всегда ставить `loading=\"lazy\"` и `decoding=\"sync\"` для стабильности.","Cледует проверять утверждения по двум пунктам:\n1. Блокируется ли HTML‑парсер при встрече тега\n2. Когда именно выполняется/показывается ресурс (момент выполнения JS и момент декодирования/отрисовки изображения). Если встречаются формулировки «всегда» или «никогда», требуется сверка с документацией: для `\u003Cscript>` поведение строго зависит от classic/module и `async/defer`, а для `\u003Cimg>` важно различать сеть (когда начинать загрузку и с каким приоритетом) и декодирование (как планировать работу по распаковке изображения).","**Правильный вариант: 2** - При встрече внешних классических скриптов `\u003Cscript>` без атрибутов парсер обычно останавливается: скрипт загружается и выполняется, после чего парсинг продолжается; с `defer` и `async` загрузка идёт параллельно, но `defer` выполняется после завершения парсинга, а `async` — сразу после готовности, без гарантий порядка. Для `type=\"module\"` выполнение по умолчанию откладывается до окончания парсинга (если не задан `async`), а `defer` на модуль не влияет. `\u003Cimg>` чаще не блокирует парсинг, но может влиять на layout и paint из‑за размеров и декодирования; `loading`, `decoding`, `fetchpriority` управляют тем, когда грузить и как «вписывать» декодирование в отрисовку.","Как браузер парсит JavaScript и изображения при рендеринге?","quizQuestion",{"title":118,"description":119,"ogTitle":7,"ogDescription":119,"ogImageUrl":120,"canonical":26,"ogLocale":121,"ogSiteName":122,"ogImageType":123,"ogImageWidth":124,"ogImageHeight":62,"ogType":125,"ogUrl":26},"Как браузер парсит JavaScript и изображения при рендеринге","Теория рендеринга: как HTML-парсер, JS и \u003Cimg> влияют на DOM, загрузку, выполнение и отрисовку; async/defer/module, lazy/decoding.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","article",{"siteName":127,"siteUrl":128},"GOOD WEB JOB!","https://goodwebjob.ru",[130],{"label":131,"slug":132,"to":133},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":135,"navigationSublist":143},[136,139],{"path":133,"isActive":103,"name":137,"icon":138,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":140,"isActive":8,"name":141,"icon":142,"isNavbarMobileDisabled":103},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[144,153,180,192,198,339,363,372,378,441,461,467],{"title":145,"list":146,"isOpened":103},"Bash",[147,150],{"name":148,"path":149,"isActive":103},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":151,"path":152,"isActive":103},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":154,"list":155,"isOpened":103},"CSS",[156,159,162,165,168,171,174,177],{"name":157,"path":158,"isActive":103},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":160,"path":161,"isActive":103},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":163,"path":164,"isActive":103},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":166,"path":167,"isActive":103},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":169,"path":170,"isActive":103},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":172,"path":173,"isActive":103},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":175,"path":176,"isActive":103},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":178,"path":179,"isActive":103},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":181,"list":182,"isOpened":103},"Git",[183,186,189],{"name":184,"path":185,"isActive":103},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":187,"path":188,"isActive":103},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":190,"path":191,"isActive":103},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":193,"list":194,"isOpened":103},"HTML",[195],{"name":196,"path":197,"isActive":103},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":199,"list":200,"isOpened":103},"JavaScript",[201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336],{"name":202,"path":203,"isActive":103},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":205,"path":206,"isActive":103},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":208,"path":209,"isActive":103},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":211,"path":212,"isActive":103},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":214,"path":215,"isActive":103},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":217,"path":218,"isActive":103},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":220,"path":221,"isActive":103},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":223,"path":224,"isActive":103},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":226,"path":227,"isActive":103},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":229,"path":230,"isActive":103},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":232,"path":233,"isActive":103},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":235,"path":236,"isActive":103},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":238,"path":239,"isActive":103},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":241,"path":242,"isActive":103},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":244,"path":245,"isActive":103},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":247,"path":248,"isActive":103},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":250,"path":251,"isActive":103},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":253,"path":254,"isActive":103},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":256,"path":257,"isActive":103},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":259,"path":260,"isActive":103},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":262,"path":263,"isActive":103},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":265,"path":266,"isActive":103},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":268,"path":269,"isActive":103},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":271,"path":272,"isActive":103},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":274,"path":275,"isActive":103},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":277,"path":278,"isActive":103},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":280,"path":281,"isActive":103},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":283,"path":284,"isActive":103},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":286,"path":287,"isActive":103},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":289,"path":290,"isActive":103},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":292,"path":293,"isActive":103},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":295,"path":296,"isActive":103},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":298,"path":299,"isActive":103},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":301,"path":302,"isActive":103},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":304,"path":305,"isActive":103},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":307,"path":308,"isActive":103},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":310,"path":311,"isActive":103}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":313,"path":314,"isActive":103},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":316,"path":317,"isActive":103},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":319,"path":320,"isActive":103},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":322,"path":323,"isActive":103},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":325,"path":326,"isActive":103},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":328,"path":329,"isActive":103},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":331,"path":332,"isActive":103},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":334,"path":335,"isActive":103},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":337,"path":338,"isActive":103},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":340,"list":341,"isOpened":103},"React",[342,345,348,351,354,357,360],{"name":343,"path":344,"isActive":103},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":346,"path":347,"isActive":103},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":349,"path":350,"isActive":103},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":352,"path":353,"isActive":103},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":355,"path":356,"isActive":103},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":358,"path":359,"isActive":103},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":361,"path":362,"isActive":103},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":364,"list":365,"isOpened":103},"Алгоритмы",[366,369],{"name":367,"path":368,"isActive":103},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":370,"path":371,"isActive":103},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":373,"list":374,"isOpened":103},"Дебаггинг",[375],{"name":376,"path":377,"isActive":103},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":379,"list":380,"isOpened":103},"Компьютерные сети",[381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438],{"name":382,"path":383,"isActive":103},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":385,"path":386,"isActive":103},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":388,"path":389,"isActive":103},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":391,"path":392,"isActive":103},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":394,"path":395,"isActive":103},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":397,"path":398,"isActive":103},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":400,"path":401,"isActive":103},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":403,"path":404,"isActive":103},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":406,"path":407,"isActive":103},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":409,"path":410,"isActive":103},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":412,"path":413,"isActive":103},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":415,"path":416,"isActive":103},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":418,"path":419,"isActive":103},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":421,"path":422,"isActive":103},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":424,"path":425,"isActive":103},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":427,"path":428,"isActive":103},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":430,"path":431,"isActive":103},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":433,"path":434,"isActive":103},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":436,"path":437,"isActive":103},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":439,"path":440,"isActive":103},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":442,"list":443,"isOpened":103},"Отрисовка в браузере",[444,447,449,452,455,458],{"name":445,"path":446,"isActive":103},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":115,"path":448,"isActive":103},"/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":450,"path":451,"isActive":103},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":453,"path":454,"isActive":103},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":456,"path":457,"isActive":103},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":459,"path":460,"isActive":103},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":462,"list":463,"isOpened":103},"Ревью кода",[464],{"name":465,"path":466,"isActive":103},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":468,"list":469,"isOpened":103},"Теория вероятности",[470,473,476],{"name":471,"path":472,"isActive":103},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":474,"path":475,"isActive":103},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":477,"path":478,"isActive":103},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"slugs":480},[481,484,486,488,490,493,496,498,500,502,504,506,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690,691,693,695,697,699],{"name":482,"value":483},"Теоретические задания","theoretical-tasks",{"name":238,"value":485},"what-this-code-will-return-typeof-function",{"name":137,"value":487},"where-to-begin",{"name":205,"value":489},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":491,"value":492},"Backend","backend",{"name":494,"value":495},"Frontend","frontend",{"name":202,"value":497},"prototype-what-logical-values-will-be-received-in-console-log",{"name":319,"value":499},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":310,"value":501},"find-non-repeating-numbers-in-an-array",{"name":283,"value":503},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":289,"value":505},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":507,"value":508},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":295,"value":510},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":211,"value":512},"what-value-will-the-console-output-with-object-property",{"name":214,"value":514},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":286,"value":516},"returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":316,"value":518},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":322,"value":520},"determines-whether-a-word-is-a-palindrome",{"name":301,"value":522},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":328,"value":524},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":292,"value":526},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":298,"value":528},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":304,"value":530},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":337,"value":532},"the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":307,"value":534},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":313,"value":536},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":217,"value":538},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":220,"value":540},"there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":232,"value":542},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":235,"value":544},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":334,"value":546},"unifying-values-in-an-array",{"name":325,"value":548},"flattening-the-array",{"name":223,"value":550},"what-will-the-book-get-upper-name-method-return",{"name":331,"value":552},"string-compression",{"name":229,"value":554},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":241,"value":556},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":382,"value":558},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":388,"value":560},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":391,"value":562},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":394,"value":564},"key-differences-between-tcp-and-udp",{"name":397,"value":566},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":400,"value":568},"what-is-http-and-what-does-it-consist-of",{"name":403,"value":570},"what-are-http-headers-and-why-do-we-need-them",{"name":406,"value":572},"what-are-http-parameters",{"name":409,"value":574},"where-is-the-html-code-located-in-the-http-response-structure",{"name":196,"value":576},"what-is-html",{"name":412,"value":578},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":415,"value":580},"the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":418,"value":582},"what-is-a-cookie",{"name":421,"value":584},"who-initiates-the-cookie-recording-in-the-browser",{"name":424,"value":586},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":588,"value":589},"Лайвкодинг","livecoding",{"name":208,"value":591},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":430,"value":593},"is-everything-that-goes-through-https-secure",{"name":433,"value":595},"all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":436,"value":597},"there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":115,"value":599},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":445,"value":601},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":450,"value":603},"what-is-blocking-the-page-rendering-in-the-browser",{"name":453,"value":605},"what-is-dom-in-a-browser-what-is-cssom",{"name":456,"value":607},"what-are-nodes-in-the-dom",{"name":459,"value":609},"what-does-cssom-consist-of",{"name":157,"value":611},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":160,"value":613},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":163,"value":615},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":166,"value":617},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":169,"value":619},"there-is-an-html-code-will-font-weight-affect-span",{"name":172,"value":621},"what-are-the-differences-between-flexbox-and-grid",{"name":175,"value":623},"do-flexbox-and-grid-replace-each-other",{"name":178,"value":625},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":141,"value":627},"tasks",{"name":244,"value":629},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":247,"value":631},"what-is-this-in-javascript",{"name":250,"value":633},"what-is-an-event-loop-and-how-does-it-work",{"name":253,"value":635},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":256,"value":637},"what-does-the-typeof-operator-show-in-javascript",{"name":259,"value":639},"what-types-of-data-exist-in-javascript",{"name":262,"value":641},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":265,"value":643},"what-will-typeof-return-for-an-array",{"name":268,"value":645},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":271,"value":647},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":274,"value":649},"what-does-typeof-return-for-new-set-in-javascript",{"name":343,"value":651},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":349,"value":653},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":352,"value":655},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":355,"value":657},"there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":358,"value":659},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":376,"value":661},"how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":184,"value":663},"developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":187,"value":665},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":190,"value":667},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":465,"value":669},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":148,"value":671},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":151,"value":673},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":367,"value":675},"what-is-algorithmic-complexity",{"name":370,"value":677},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":277,"value":679},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":439,"value":681},"how-can-a-user-be-authorized-on-a-website",{"name":280,"value":683},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":471,"value":685},"there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":474,"value":687},"there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":477,"value":689},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":131,"value":132},{"name":427,"value":692},"is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":385,"value":694},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":226,"value":696},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":346,"value":698},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":361,"value":700},"what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"cooperation":702,"copyright":705,"reportError":706,"socialNetwork":708},{"link":703,"title":704},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":707,"link":703},"Сообщить об ошибке",{"label":709,"socialNetworkList":710},"Мы в соцсетях:",[711,714,717],{"icon":26,"link":712,"title":713},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":715,"link":703,"title":716},"ic:baseline-telegram","Telegram",{"icon":718,"link":719,"title":720},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":722,"body":723},{},{"type":724,"children":725},"root",[726],{"type":727,"tag":728,"props":729,"children":730},"element","p",{},[731],{"type":732,"value":115},"text",{"data":734,"body":735},{},{"type":724,"children":736},[737],{"type":727,"tag":728,"props":738,"children":739},{},[740,742,749,751,757,759,765],{"type":732,"value":741},"При встрече ",{"type":727,"tag":743,"props":744,"children":746},"code",{"className":745},[],[747],{"type":732,"value":748},"\u003Cscript>",{"type":732,"value":750}," HTML-парсер всегда продолжает разбор, потому что скрипты выполняются только после полной загрузки страницы; ",{"type":727,"tag":743,"props":752,"children":754},{"className":753},[],[755],{"type":732,"value":756},"async",{"type":732,"value":758}," и ",{"type":727,"tag":743,"props":760,"children":762},{"className":761},[],[763],{"type":732,"value":764},"defer",{"type":732,"value":766}," влияют лишь на скорость скачивания, но не на момент выполнения. Изображения, наоборот, всегда блокируют парсер до полного декодирования, так как без пикселей невозможно построить DOM. Поэтому оптимизация в первую очередь сводится к уменьшению размера картинок, а порядок подключения JS не играет роли.",{"data":768,"body":769},{},{"type":724,"children":770},[771],{"type":727,"tag":728,"props":772,"children":773},{},[774,776,781,783,788,789,794,796,801,803,808,810,815,817,822,824,829,831,837,839,845,847,853,854,860],{"type":732,"value":775},"При встрече внешних классических скриптов ",{"type":727,"tag":743,"props":777,"children":779},{"className":778},[],[780],{"type":732,"value":748},{"type":732,"value":782}," без атрибутов парсер обычно останавливается: скрипт загружается и выполняется, после чего парсинг продолжается; с ",{"type":727,"tag":743,"props":784,"children":786},{"className":785},[],[787],{"type":732,"value":764},{"type":732,"value":758},{"type":727,"tag":743,"props":790,"children":792},{"className":791},[],[793],{"type":732,"value":756},{"type":732,"value":795}," загрузка идёт параллельно, но ",{"type":727,"tag":743,"props":797,"children":799},{"className":798},[],[800],{"type":732,"value":764},{"type":732,"value":802}," выполняется после завершения парсинга, а ",{"type":727,"tag":743,"props":804,"children":806},{"className":805},[],[807],{"type":732,"value":756},{"type":732,"value":809}," — сразу после готовности, без гарантий порядка. Для ",{"type":727,"tag":743,"props":811,"children":813},{"className":812},[],[814],{"type":732,"value":50},{"type":732,"value":816}," выполнение по умолчанию откладывается до окончания парсинга (если не задан ",{"type":727,"tag":743,"props":818,"children":820},{"className":819},[],[821],{"type":732,"value":756},{"type":732,"value":823},"), а ",{"type":727,"tag":743,"props":825,"children":827},{"className":826},[],[828],{"type":732,"value":764},{"type":732,"value":830}," на модуль не влияет. ",{"type":727,"tag":743,"props":832,"children":834},{"className":833},[],[835],{"type":732,"value":836},"\u003Cimg>",{"type":732,"value":838}," чаще не блокирует парсинг, но может влиять на layout и paint из‑за размеров и декодирования; ",{"type":727,"tag":743,"props":840,"children":842},{"className":841},[],[843],{"type":732,"value":844},"loading",{"type":732,"value":846},", ",{"type":727,"tag":743,"props":848,"children":850},{"className":849},[],[851],{"type":732,"value":852},"decoding",{"type":732,"value":846},{"type":727,"tag":743,"props":855,"children":857},{"className":856},[],[858],{"type":732,"value":859},"fetchpriority",{"type":732,"value":861}," управляют тем, когда грузить и как «вписывать» декодирование в отрисовку.",{"data":863,"body":864},{},{"type":724,"children":865},[866],{"type":727,"tag":728,"props":867,"children":868},{},[869,871,877,879,884,886,891,893,898,900,906],{"type":732,"value":870},"Classic-скрипты по умолчанию всегда выполняются после события ",{"type":727,"tag":743,"props":872,"children":874},{"className":873},[],[875],{"type":732,"value":876},"DOMContentLoaded",{"type":732,"value":878},", а ",{"type":727,"tag":743,"props":880,"children":882},{"className":881},[],[883],{"type":732,"value":764},{"type":732,"value":885}," заставляет их выполниться как можно раньше — ещё до построения DOM; ",{"type":727,"tag":743,"props":887,"children":889},{"className":888},[],[890],{"type":732,"value":756},{"type":732,"value":892}," при этом гарантирует порядок, потому что браузер сортирует скрипты по месту в HTML. У модулей наоборот: без ",{"type":727,"tag":743,"props":894,"children":896},{"className":895},[],[897],{"type":732,"value":764},{"type":732,"value":899}," они блокируют парсер до окончания всех импортов. Для изображений ",{"type":727,"tag":743,"props":901,"children":903},{"className":902},[],[904],{"type":732,"value":905},"loading=\"lazy\"",{"type":732,"value":907}," означает, что файл полностью скачивается заранее, но не рисуется до прокрутки, поэтому трафик не экономится, а экономится только время на декодирование.",{"data":909,"body":910},{},{"type":724,"children":911},[912],{"type":727,"tag":728,"props":913,"children":914},{},[915,917,922,924,930,932,937,939,945,947,952,954,959,960,966],{"type":732,"value":916},"При разборе HTML браузер сначала строит финальный render tree, и только потом начинает скачивать скрипты и изображения, чтобы не тратить сеть на лишнее. Поэтому ",{"type":727,"tag":743,"props":918,"children":920},{"className":919},[],[921],{"type":732,"value":748},{"type":732,"value":923}," не влияет на парсинг, а влияет лишь на готовность CSS; атрибуты ",{"type":727,"tag":743,"props":925,"children":927},{"className":926},[],[928],{"type":732,"value":929},"async/defer",{"type":732,"value":931}," нужны только для совместимости. Для ",{"type":727,"tag":743,"props":933,"children":935},{"className":934},[],[936],{"type":732,"value":836},{"type":732,"value":938}," ",{"type":727,"tag":743,"props":940,"children":942},{"className":941},[],[943],{"type":732,"value":944},"decoding=\"async\"",{"type":732,"value":946}," ускоряет сеть, а ",{"type":727,"tag":743,"props":948,"children":950},{"className":949},[],[951],{"type":732,"value":859},{"type":732,"value":953}," управляет тем, когда картинка появится на экране, не меняя сетевой очереди. Следовательно, корректная стратегия — всегда ставить ",{"type":727,"tag":743,"props":955,"children":957},{"className":956},[],[958],{"type":732,"value":905},{"type":732,"value":758},{"type":727,"tag":743,"props":961,"children":963},{"className":962},[],[964],{"type":732,"value":965},"decoding=\"sync\"",{"type":732,"value":967}," для стабильности.",{"data":969,"body":970},{},{"type":724,"children":971},[972,977],{"type":727,"tag":728,"props":973,"children":974},{},[975],{"type":732,"value":976},"Cледует проверять утверждения по двум пунктам:",{"type":727,"tag":978,"props":979,"children":980},"ol",{},[981,987],{"type":727,"tag":982,"props":983,"children":984},"li",{},[985],{"type":732,"value":986},"Блокируется ли HTML‑парсер при встрече тега",{"type":727,"tag":982,"props":988,"children":989},{},[990,992,997,999,1004,1006,1011],{"type":732,"value":991},"Когда именно выполняется/показывается ресурс (момент выполнения JS и момент декодирования/отрисовки изображения). Если встречаются формулировки «всегда» или «никогда», требуется сверка с документацией: для ",{"type":727,"tag":743,"props":993,"children":995},{"className":994},[],[996],{"type":732,"value":748},{"type":732,"value":998}," поведение строго зависит от classic/module и ",{"type":727,"tag":743,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":732,"value":929},{"type":732,"value":1005},", а для ",{"type":727,"tag":743,"props":1007,"children":1009},{"className":1008},[],[1010],{"type":732,"value":836},{"type":732,"value":1012}," важно различать сеть (когда начинать загрузку и с каким приоритетом) и декодирование (как планировать работу по распаковке изображения).",{"data":1014,"body":1015},{},{"type":724,"children":1016},[1017],{"type":727,"tag":728,"props":1018,"children":1019},{},[1020,1026,1028,1033,1034,1039,1040,1045,1046,1051,1052,1057,1058,1063,1064,1069,1070,1075,1076,1081,1082,1087,1088,1093,1094,1099],{"type":727,"tag":1021,"props":1022,"children":1023},"strong",{},[1024],{"type":732,"value":1025},"Правильный вариант: 2",{"type":732,"value":1027}," - При встрече внешних классических скриптов ",{"type":727,"tag":743,"props":1029,"children":1031},{"className":1030},[],[1032],{"type":732,"value":748},{"type":732,"value":782},{"type":727,"tag":743,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":732,"value":764},{"type":732,"value":758},{"type":727,"tag":743,"props":1041,"children":1043},{"className":1042},[],[1044],{"type":732,"value":756},{"type":732,"value":795},{"type":727,"tag":743,"props":1047,"children":1049},{"className":1048},[],[1050],{"type":732,"value":764},{"type":732,"value":802},{"type":727,"tag":743,"props":1053,"children":1055},{"className":1054},[],[1056],{"type":732,"value":756},{"type":732,"value":809},{"type":727,"tag":743,"props":1059,"children":1061},{"className":1060},[],[1062],{"type":732,"value":50},{"type":732,"value":816},{"type":727,"tag":743,"props":1065,"children":1067},{"className":1066},[],[1068],{"type":732,"value":756},{"type":732,"value":823},{"type":727,"tag":743,"props":1071,"children":1073},{"className":1072},[],[1074],{"type":732,"value":764},{"type":732,"value":830},{"type":727,"tag":743,"props":1077,"children":1079},{"className":1078},[],[1080],{"type":732,"value":836},{"type":732,"value":838},{"type":727,"tag":743,"props":1083,"children":1085},{"className":1084},[],[1086],{"type":732,"value":844},{"type":732,"value":846},{"type":727,"tag":743,"props":1089,"children":1091},{"className":1090},[],[1092],{"type":732,"value":852},{"type":732,"value":846},{"type":727,"tag":743,"props":1095,"children":1097},{"className":1096},[],[1098],{"type":732,"value":859},{"type":732,"value":861},{"data":1101,"body":1102},{},{"type":724,"children":1103},[1104,1109,1114],{"type":727,"tag":728,"props":1105,"children":1106},{},[1107],{"type":732,"value":1108},"Во время загрузки документа HTML‑парсер читает HTML потоково и строит DOM‑дерево по мере появления токенов.",{"type":727,"tag":728,"props":1110,"children":1111},{},[1112],{"type":732,"value":1113},"Затем (упрощенно) выполняются вычисление стилей и этапы layout/paint, но в контексте задачи важнее следующее: синхронные (блокирующие) скрипты способны остановить парсинг, а изображения обычно грузятся параллельно и не мешают завершить построение DOM.",{"type":727,"tag":1115,"props":1116,"children":1120},"pre",{"className":1117,"code":1119,"language":732},[1118],"language-text","Сильно упрощенная схема:\n\nHTML bytes\n   |\n   v\nHTML parser  --->  DOM  ----\\\n   |                         \\\n   | (находит \u003Cscript>)       +--> Style calculation --> Layout --> Paint/Composite --> Pixels\n   | (находит \u003Cimg>)         /\n   v                        /\nNetwork requests (JS, images, fonts, ...) \n",[1121],{"type":727,"tag":743,"props":1122,"children":1124},{"__ignoreMap":1123},"",[1125],{"type":732,"value":1119},{"data":1127,"body":1128},{},{"type":724,"children":1129},[1130,1156],{"type":727,"tag":728,"props":1131,"children":1132},{},[1133,1135,1140,1142,1147,1149,1154],{"type":732,"value":1134},"Событие ",{"type":727,"tag":743,"props":1136,"children":1138},{"className":1137},[],[1139],{"type":732,"value":876},{"type":732,"value":1141}," наступает, когда HTML распарсен и отложенные скрипты (например, ",{"type":727,"tag":743,"props":1143,"children":1145},{"className":1144},[],[1146],{"type":732,"value":764},{"type":732,"value":1148}," и модульные без ",{"type":727,"tag":743,"props":1150,"children":1152},{"className":1151},[],[1153],{"type":732,"value":756},{"type":732,"value":1155},") завершили выполнение.",{"type":727,"tag":728,"props":1157,"children":1158},{},[1159,1164],{"type":727,"tag":743,"props":1160,"children":1162},{"className":1161},[],[1163],{"type":732,"value":876},{"type":732,"value":1165}," не обязано ждать загрузки изображений, поэтому тяжелые картинки сами по себе обычно не задерживают это событие, если отсутствуют другие блокировки.",{"data":1167,"body":1168},{},{"type":724,"children":1169},[1170],{"type":727,"tag":728,"props":1171,"children":1172},{},[1173,1175,1181,1183,1188,1190,1195],{"type":732,"value":1174},"Для корректной инициализации часто проверяется ",{"type":727,"tag":743,"props":1176,"children":1178},{"className":1177},[],[1179],{"type":732,"value":1180},"document.readyState",{"type":732,"value":1182},", и обработчик ",{"type":727,"tag":743,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":732,"value":876},{"type":732,"value":1189}," добавляется только если состояние равно ",{"type":727,"tag":743,"props":1191,"children":1193},{"className":1192},[],[1194],{"type":732,"value":844},{"type":732,"value":1196},".",{"data":1198,"body":1199},{},{"type":724,"children":1200},[1201],{"type":727,"tag":1115,"props":1202,"children":1205},{"className":1203,"code":1204,"language":732},[1118],"// Схема подписки без дублирования\nif (document.readyState === 'loading') {\n  document.addEventListener('DOMContentLoaded', init);\n} else {\n  init();\n}\n\nfunction init() {\n  // Инициализация интерфейса\n}\n",[1206],{"type":727,"tag":743,"props":1207,"children":1208},{"__ignoreMap":1123},[1209],{"type":732,"value":1204},{"data":1211,"body":1212},{},{"type":724,"children":1213},[1214,1240,1245],{"type":727,"tag":728,"props":1215,"children":1216},{},[1217,1219,1225,1227,1232,1233,1238],{"type":732,"value":1218},"Внешний классический ",{"type":727,"tag":743,"props":1220,"children":1222},{"className":1221},[],[1223],{"type":732,"value":1224},"\u003Cscript src=\"...\">\u003C/script>",{"type":732,"value":1226}," без ",{"type":727,"tag":743,"props":1228,"children":1230},{"className":1229},[],[1231],{"type":732,"value":756},{"type":732,"value":758},{"type":727,"tag":743,"props":1234,"children":1236},{"className":1235},[],[1237],{"type":732,"value":764},{"type":732,"value":1239}," обычно является парсер‑блокирующим: HTML‑парсер приостанавливается, скрипт загружается и выполняется, после чего парсинг продолжается.",{"type":727,"tag":728,"props":1241,"children":1242},{},[1243],{"type":732,"value":1244},"Из‑за этого порядок подключения JS в HTML имеет значение: следующий HTML не будет распарсен, пока текущий скрипт не выполнится.",{"type":727,"tag":1115,"props":1246,"children":1249},{"className":1247,"code":1248,"language":732},[1118],"\u003C!-- Блокирующий пример: парсинг останавливается на script -->\n\u003Cscript src=\"heavy-lib.js\">\u003C/script>\n\u003Cdiv id=\"app\">Этот div будет распарсен только после выполнения heavy-lib.js\u003C/div>\n",[1250],{"type":727,"tag":743,"props":1251,"children":1252},{"__ignoreMap":1123},[1253],{"type":732,"value":1248},{"data":1255,"body":1256},{},{"type":724,"children":1257},[1258,1275,1292],{"type":727,"tag":728,"props":1259,"children":1260},{},[1261,1266,1268,1273],{"type":727,"tag":743,"props":1262,"children":1264},{"className":1263},[],[1265],{"type":732,"value":764},{"type":732,"value":1267}," означает: загрузка идет параллельно парсингу, выполнение откладывается до завершения парсинга; порядок выполнения нескольких ",{"type":727,"tag":743,"props":1269,"children":1271},{"className":1270},[],[1272],{"type":732,"value":764},{"type":732,"value":1274},"‑скриптов сохраняется по порядку в HTML.",{"type":727,"tag":728,"props":1276,"children":1277},{},[1278,1283,1285,1290],{"type":727,"tag":743,"props":1279,"children":1281},{"className":1280},[],[1282],{"type":732,"value":756},{"type":732,"value":1284}," означает: загрузка идет параллельно парсингу, но выполнение начинается «как только готово», поэтому порядок между несколькими ",{"type":727,"tag":743,"props":1286,"children":1288},{"className":1287},[],[1289],{"type":732,"value":756},{"type":732,"value":1291},"‑скриптами не гарантируется.",{"type":727,"tag":1115,"props":1293,"children":1296},{"className":1294,"code":1295,"language":732},[1118],"\u003C!-- defer: порядок сохраняется, выполнение после парсинга -->\n\u003Cscript defer src=\"vendor.js\">\u003C/script>\n\u003Cscript defer src=\"app.js\">\u003C/script>\n\n\u003C!-- async: порядок не гарантируется, выполнение по готовности -->\n\u003Cscript async src=\"analytics.js\">\u003C/script>\n\u003Cscript async src=\"ads.js\">\u003C/script>\n",[1297],{"type":727,"tag":743,"props":1298,"children":1299},{"__ignoreMap":1123},[1300],{"type":732,"value":1295},{"data":1302,"body":1303},{},{"type":724,"children":1304},[1305,1323,1349],{"type":727,"tag":728,"props":1306,"children":1307},{},[1308,1314,1316,1321],{"type":727,"tag":743,"props":1309,"children":1311},{"className":1310},[],[1312],{"type":732,"value":1313},"\u003Cscript type=\"module\">",{"type":732,"value":1315}," по умолчанию выполняется после завершения парсинга (если ",{"type":727,"tag":743,"props":1317,"children":1319},{"className":1318},[],[1320],{"type":732,"value":756},{"type":732,"value":1322}," не задан), то есть ведет себя «как defer по умолчанию».",{"type":727,"tag":728,"props":1324,"children":1325},{},[1326,1328,1333,1335,1340,1342,1347],{"type":732,"value":1327},"Атрибут ",{"type":727,"tag":743,"props":1329,"children":1331},{"className":1330},[],[1332],{"type":732,"value":764},{"type":732,"value":1334}," для модулей обычно не меняет поведение, а ",{"type":727,"tag":743,"props":1336,"children":1338},{"className":1337},[],[1339],{"type":732,"value":756},{"type":732,"value":1341}," переводит модуль в режим выполнения по готовности, без гарантий порядка относительно других ",{"type":727,"tag":743,"props":1343,"children":1345},{"className":1344},[],[1346],{"type":732,"value":756},{"type":732,"value":1348},"‑скриптов.",{"type":727,"tag":1115,"props":1350,"children":1353},{"className":1351,"code":1352,"language":732},[1118],"\u003C!-- module: по умолчанию выполнится после парсинга -->\n\u003Cscript type=\"module\" src=\"app.mjs\">\u003C/script>\n\n\u003C!-- module + async: выполнится по готовности, порядок не гарантируется -->\n\u003Cscript type=\"module\" async src=\"feature-a.mjs\">\u003C/script>\n\u003Cscript type=\"module\" async src=\"feature-b.mjs\">\u003C/script>\n",[1354],{"type":727,"tag":743,"props":1355,"children":1356},{"__ignoreMap":1123},[1357],{"type":732,"value":1352},{"data":1359,"body":1360},{},{"type":724,"children":1361},[1362],{"type":727,"tag":1363,"props":1364,"children":1365},"table",{},[1366,1400],{"type":727,"tag":1367,"props":1368,"children":1369},"thead",{},[1370],{"type":727,"tag":1371,"props":1372,"children":1373},"tr",{},[1374,1380,1385,1390,1395],{"type":727,"tag":1375,"props":1376,"children":1377},"th",{},[1378],{"type":732,"value":1379},"Вариант подключения",{"type":727,"tag":1375,"props":1381,"children":1382},{},[1383],{"type":732,"value":1384},"Скачивание",{"type":727,"tag":1375,"props":1386,"children":1387},{},[1388],{"type":732,"value":1389},"Выполнение",{"type":727,"tag":1375,"props":1391,"children":1392},{},[1393],{"type":732,"value":1394},"Порядок",{"type":727,"tag":1375,"props":1396,"children":1397},{},[1398],{"type":732,"value":1399},"Блокирует парсинг HTML",{"type":727,"tag":1401,"props":1402,"children":1403},"tbody",{},[1404,1433,1466,1497],{"type":727,"tag":1371,"props":1405,"children":1406},{},[1407,1413,1418,1423,1428],{"type":727,"tag":1408,"props":1409,"children":1410},"td",{},[1411],{"type":732,"value":1412},"Classic без атрибутов",{"type":727,"tag":1408,"props":1414,"children":1415},{},[1416],{"type":732,"value":1417},"Часто «в лоб»: парсер ждет, пока скрипт загрузится",{"type":727,"tag":1408,"props":1419,"children":1420},{},[1421],{"type":732,"value":1422},"Немедленно при встрече тега",{"type":727,"tag":1408,"props":1424,"children":1425},{},[1426],{"type":732,"value":1427},"По месту в HTML",{"type":727,"tag":1408,"props":1429,"children":1430},{},[1431],{"type":732,"value":1432},"Да",{"type":727,"tag":1371,"props":1434,"children":1435},{},[1436,1446,1451,1456,1461],{"type":727,"tag":1408,"props":1437,"children":1438},{},[1439,1441],{"type":732,"value":1440},"Classic ",{"type":727,"tag":743,"props":1442,"children":1444},{"className":1443},[],[1445],{"type":732,"value":764},{"type":727,"tag":1408,"props":1447,"children":1448},{},[1449],{"type":732,"value":1450},"Параллельно парсингу",{"type":727,"tag":1408,"props":1452,"children":1453},{},[1454],{"type":732,"value":1455},"После завершения парсинга",{"type":727,"tag":1408,"props":1457,"children":1458},{},[1459],{"type":732,"value":1460},"Гарантирован",{"type":727,"tag":1408,"props":1462,"children":1463},{},[1464],{"type":732,"value":1465},"Нет",{"type":727,"tag":1371,"props":1467,"children":1468},{},[1469,1478,1482,1487,1492],{"type":727,"tag":1408,"props":1470,"children":1471},{},[1472,1473],{"type":732,"value":1440},{"type":727,"tag":743,"props":1474,"children":1476},{"className":1475},[],[1477],{"type":732,"value":756},{"type":727,"tag":1408,"props":1479,"children":1480},{},[1481],{"type":732,"value":1450},{"type":727,"tag":1408,"props":1483,"children":1484},{},[1485],{"type":732,"value":1486},"По готовности (возможно до конца парсинга)",{"type":727,"tag":1408,"props":1488,"children":1489},{},[1490],{"type":732,"value":1491},"Не гарантирован",{"type":727,"tag":1408,"props":1493,"children":1494},{},[1495],{"type":732,"value":1496},"Во время загрузки нет, но выполнение прерывает работу",{"type":727,"tag":1371,"props":1498,"children":1499},{},[1500,1510,1515,1519,1524],{"type":727,"tag":1408,"props":1501,"children":1502},{},[1503,1508],{"type":727,"tag":743,"props":1504,"children":1506},{"className":1505},[],[1507],{"type":732,"value":50},{"type":732,"value":1509}," (без async)",{"type":727,"tag":1408,"props":1511,"children":1512},{},[1513],{"type":732,"value":1514},"Параллельно парсингу, включая зависимости",{"type":727,"tag":1408,"props":1516,"children":1517},{},[1518],{"type":732,"value":1455},{"type":727,"tag":1408,"props":1520,"children":1521},{},[1522],{"type":732,"value":1523},"На практике предсказуемо, ключевое — «после парсинга»",{"type":727,"tag":1408,"props":1525,"children":1526},{},[1527],{"type":732,"value":1465},{"data":1529,"body":1530},{},{"type":724,"children":1531},[1532],{"type":727,"tag":728,"props":1533,"children":1534},{},[1535],{"type":732,"value":63},{"data":1537,"body":1538},{},{"type":724,"children":1539},[1540,1545],{"type":727,"tag":728,"props":1541,"children":1542},{},[1543],{"type":732,"value":1544},"Построение DOM не требует, чтобы изображения были загружены и декодированы, поэтому HTML может быть распарсен полностью, даже если картинки еще в процессе загрузки.",{"type":727,"tag":728,"props":1546,"children":1547},{},[1548],{"type":732,"value":1549},"При этом изображения влияют на то, насколько быстро страница выглядит «готовой», потому что для показа нужен декодированный bitmap, а декодирование может занимать заметное время.",{"data":1551,"body":1552},{},{"type":724,"children":1553},[1554,1574,1579],{"type":727,"tag":728,"props":1555,"children":1556},{},[1557,1559,1565,1566,1572],{"type":732,"value":1558},"Атрибуты ",{"type":727,"tag":743,"props":1560,"children":1562},{"className":1561},[],[1563],{"type":732,"value":1564},"width",{"type":732,"value":758},{"type":727,"tag":743,"props":1567,"children":1569},{"className":1568},[],[1570],{"type":732,"value":1571},"height",{"type":732,"value":1573}," позволяют заранее зарезервировать место под изображение до загрузки файла, снижая вероятность перерасчета макета при появлении картинки.",{"type":727,"tag":728,"props":1575,"children":1576},{},[1577],{"type":732,"value":1578},"Если размеры не заданы, место под изображение может уточняться поздно, что повышает вероятность сдвигов layout.",{"type":727,"tag":1115,"props":1580,"children":1583},{"className":1581,"code":1582,"language":732},[1118],"\u003Cimg\n  src=\"photo.jpg\"\n  alt=\"Описание\"\n  width=\"800\"\n  height=\"600\"\n  decoding=\"async\"\n  fetchpriority=\"low\"\n>\n",[1584],{"type":727,"tag":743,"props":1585,"children":1586},{"__ignoreMap":1123},[1587],{"type":732,"value":1582},{"data":1589,"body":1590},{},{"type":724,"children":1591},[1592,1597,1614],{"type":727,"tag":728,"props":1593,"children":1594},{},[1595],{"type":732,"value":1596},"Декодирование — это преобразование сжатых данных изображения в формат пикселей для отрисовки.",{"type":727,"tag":728,"props":1598,"children":1599},{},[1600,1605,1607,1612],{"type":727,"tag":743,"props":1601,"children":1603},{"className":1602},[],[1604],{"type":732,"value":965},{"type":732,"value":1606}," является подсказкой предпочесть синхронное декодирование, а ",{"type":727,"tag":743,"props":1608,"children":1610},{"className":1609},[],[1611],{"type":732,"value":944},{"type":732,"value":1613}," — подсказкой предпочесть асинхронное декодирование, чтобы уменьшить вероятность задержки отрисовки другого контента.",{"type":727,"tag":728,"props":1615,"children":1616},{},[1617,1623],{"type":727,"tag":743,"props":1618,"children":1620},{"className":1619},[],[1621],{"type":732,"value":1622},"decoding=\"auto\"",{"type":732,"value":1624}," означает, что решение остается за браузером.",{"data":1626,"body":1627},{},{"type":724,"children":1628},[1629,1639,1649],{"type":727,"tag":728,"props":1630,"children":1631},{},[1632,1637],{"type":727,"tag":743,"props":1633,"children":1635},{"className":1634},[],[1636],{"type":732,"value":905},{"type":732,"value":1638}," включает ленивую загрузку: запрос на изображение обычно откладывается до приближения к области видимости.",{"type":727,"tag":728,"props":1640,"children":1641},{},[1642,1647],{"type":727,"tag":743,"props":1643,"children":1645},{"className":1644},[],[1646],{"type":732,"value":859},{"type":732,"value":1648}," предназначен для влияния на приоритет загрузки: для важного изображения первого экрана может устанавливаться высокий приоритет, а для второстепенных — низкий.",{"type":727,"tag":1115,"props":1650,"children":1653},{"className":1651,"code":1652,"language":732},[1118],"\u003C!-- Типовой вариант: важное изображение первого экрана — eager/high,\n     изображения ниже — lazy/low -->\n\n\u003Cimg\n  src=\"hero.jpg\"\n  alt=\"Hero\"\n  width=\"1200\"\n  height=\"630\"\n  loading=\"eager\"\n  fetchpriority=\"high\"\n  decoding=\"async\"\n>\n\n\u003Cimg\n  src=\"gallery-1.jpg\"\n  alt=\"Gallery 1\"\n  width=\"800\"\n  height=\"600\"\n  loading=\"lazy\"\n  fetchpriority=\"low\"\n  decoding=\"async\"\n>\n",[1654],{"type":727,"tag":743,"props":1655,"children":1656},{"__ignoreMap":1123},[1657],{"type":732,"value":1652},{"data":1659,"body":1660},{},{"type":724,"children":1661},[1662],{"type":727,"tag":728,"props":1663,"children":1664},{},[1665,1667,1672,1674,1679,1681,1686,1688,1693,1695,1700,1702,1708],{"type":732,"value":1666},"Кратко: верным является вариант 2 — классический ",{"type":727,"tag":743,"props":1668,"children":1670},{"className":1669},[],[1671],{"type":732,"value":748},{"type":732,"value":1673}," без атрибутов блокирует парсинг, ",{"type":727,"tag":743,"props":1675,"children":1677},{"className":1676},[],[1678],{"type":732,"value":764},{"type":732,"value":1680}," выполняется после парсинга и сохраняет порядок, ",{"type":727,"tag":743,"props":1682,"children":1684},{"className":1683},[],[1685],{"type":732,"value":756},{"type":732,"value":1687}," выполняется по готовности без гарантий порядка, а ",{"type":727,"tag":743,"props":1689,"children":1691},{"className":1690},[],[1692],{"type":732,"value":50},{"type":732,"value":1694}," по умолчанию откладывает выполнение до конца парсинга. ",{"type":727,"tag":743,"props":1696,"children":1698},{"className":1697},[],[1699],{"type":732,"value":836},{"type":732,"value":1701}," обычно не блокирует парсинг, но влияет на визуальную стабильность через размеры и на производительность через время декодирования; ",{"type":727,"tag":743,"props":1703,"children":1705},{"className":1704},[],[1706],{"type":732,"value":1707},"loading/decoding/fetchpriority",{"type":732,"value":1709}," управляют моментом загрузки, планированием декодирования и приоритетом запроса.",1775735659010]