[{"data":1,"prerenderedAt":1241},["ShallowReactive",2],{"$fXAVPBQ1_M5h2-T2OuNe_4keIpKeMRDhEjEEPfzfa-S8":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":81,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":84,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":89,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":434,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":656,"mdc-ztrb8-key":676,"mdc--wolgk8-key":688,"mdc--x4xh4p-key":697,"mdc--g1jho5-key":706,"mdc-hwfwiy-key":715,"mdc-olljbg-key":733,"mdc--bz5lq3-key":741,"mdc--ytvpsd-key":762,"mdc-nazm58-key":823,"mdc--gcw3af-key":831,"mdc--cnz7kd-key":885,"mdc--kgtvmo-key":893,"mdc-5n9tt1-key":1105,"mdc--5ljfy4-key":1233},{"content":4,"quizQuestionContent":51,"type":70,"pageMeta":71},[5,9,13,17,20,24,28,31,34,38,41,45,48],{"id":6,"value":7,"isTypeH1":8},"1946","Что делает браузер после получения HTML по HTTP",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4511","Теория по задаче","theory-on-the-task",{"id":14,"value":15,"anchor":16,"isTypeH3":8},"4538","Контекст: от HTTP до HTML","context-from-http-to-html",{"id":18,"value":19,"isTypeParagraph":8},"10375","После получения ответа по HTTP определяется, как интерпретировать тело ответа: важны статус, заголовки и прежде всего медиатип, например `Content-Type: text/html`.  \n\nДалее байтовый поток преобразуется в поток символов (Unicode-кодпоинтов) с учетом кодировки. Для HTML применяется механизм определения кодировки: учитываются BOM, параметр `charset` в `Content-Type`, а также метатеги вида `meta charset=\"utf-8\"` в начале документа.  \n\nЕсли HTML валидный, это означает корректность разметки относительно правил, но сам конвейер обработки не меняется: браузер все равно выполняет декодирование, потоковый разбор, построение DOM, загрузку подресурсов и рендеринг. Валидность снижает вероятность «неожиданных» исправлений разметки парсером, но не отменяет его работу.\n\nУпрощенная цепочка на этом этапе:\n`HTTP bytes → decode/encoding sniffing → Unicode code points → HTML parsing`",{"id":21,"description":22,"titleAlert":23,"isTypeAlertInfo":8},"682","Даже при 'валидной' HTML (в смысле отсутствия синтаксических ошибок) этап кодировки остаётся критичным: один и тот же набор байтов при разной кодировке даёт разные символы, а значит — другой DOM и другую интерпретацию документа.",null,{"id":25,"value":26,"anchor":27,"isTypeH3":8},"4539","Парсинг HTML и построение DOM","html-parsing-and-dom-construction",{"id":29,"value":30,"isTypeParagraph":8},"10376","HTML парсится потоково: по мере поступления символов запускается токенизация (превращение текста в токены), а затем построение дерева (добавление узлов в DOM). Итогом является объект `Document` и дерево узлов (элементов, текстовых узлов, комментариев и т. п.).  \n\nПарсер не «читает HTML как XML». Вместо этого применяется специализированный алгоритм с режимами вставки (insertion modes), которые зависят от контекста: одинаковый токен может обрабатываться по-разному в `\u003Chead>`, `\u003Cbody>`, таблицах и т. п. Это сделано для совместимости с историческим Web и для предсказуемого результата на реальных страницах.  \n\nДаже при валидной разметке возможны технические остановки/возобновления парсинга. Например, выполнение некоторых скриптов может «вмешаться» в процесс (изменить DOM, вставить HTML), поэтому основной парсер обязан корректно синхронизировать построение дерева с выполнением JavaScript.\n\nУпрощенная схема внутренностей:\n`code points → tokenizer → tokens → tree construction → DOM`",{"id":32,"description":33,"titleAlert":23,"isTypeAlertWarning":8},"743","В представлении браузеров 'валидная HTML' не означает «простая»: даже идеально корректная разметка может приводить к паузам парсера из‑за синхронных 'script', а также к повторным перерасчётам отображения по мере загрузки CSS/JS и изменения DOM.",{"id":35,"value":36,"anchor":37,"isTypeH2":8},"4512","Подресурсы и блокировки парсинга/рендеринга","subresources-and-parser-render-blocking",{"id":39,"value":40,"isTypeParagraph":8},"10377","По мере разбора HTML обнаруживаются подресурсы: стили, скрипты, изображения, шрифты, iframe и т. п. Браузер старается запрашивать их как можно раньше, чтобы сократить общее время загрузки страницы.  \n\nНекоторые ресурсы и действия могут блокировать основной парсер или откладывать визуальный вывод:\n- Синхронные `\u003Cscript src=\"...\">` без `async`/`defer` обычно приостанавливают разбор HTML до загрузки и выполнения, потому что скрипт может изменить документ и продолжать парсинг «вперед» небезопасно с точки зрения корректности результата.\n- Стили из `\u003Clink rel=\"stylesheet\" href=\"...\">` обычно блокируют рендеринг (показ), чтобы не показывать пользователю «голую» страницу без CSS и не провоцировать резкие визуальные скачки.\n\nЧтобы уменьшить простои, в современных браузерах существует «спекулятивный» механизм раннего обнаружения ресурсов (preload scanner). Он сканирует HTML разметку параллельно основному парсеру и пытается заранее поставить в очередь загрузку ресурсов, даже если основной парсер временно остановлен скриптом.  \n\nОграничения такого подхода важны для понимания поведения:\n- Ресурсы, создаваемые только через JavaScript (например, `const img = new Image(); img.src = \"...\"`), не будут обнаружены заранее, пока скрипт не выполнится.\n- Ресурсы, упомянутые только внутри CSS (например, `background-image: url(...)`), не извлекаются из HTML-сканирования и появятся в сети позже — после загрузки и разбора CSS.\n\nМини-таблица типичных эффектов:\n\n| Ситуация в документе | Что тормозится | Причина |\n|---|---|---|\n| `\u003Cscript src=\"app.js\">` без `async`/`defer` | Парсинг HTML и часто первый показ | Скрипт может менять DOM и поток разбора. |\n| `\u003Clink rel=\"stylesheet\" href=\"styles.css\">` | Рендеринг (визуальный показ) | Избежание отображения без стилей и скачков оформления. |\n| Основной парсер «стоит» на скрипте | Сеть продолжает работу через раннее сканирование | Ранние запросы подресурсов сокращают общий критический путь. |",{"id":42,"value":43,"anchor":44,"isTypeH2":8},"4513","Рендеринг: от DOM/CSSOM к пикселям","rendering-from-dom-cssom-to-pixels",{"id":46,"value":47,"isTypeParagraph":8},"10378","После (или параллельно) построения DOM загружаются и разбираются CSS-ресурсы, формируя CSSOM — внутреннюю модель правил стилей. Затем выполняется сопоставление стилей: для каждого узла DOM вычисляются итоговые значения CSS-свойств (cascade → computed values).  \n\nДалее строится render tree (дерево рендеринга): оно похоже на DOM, но учитывает визуальные особенности (например, элементы с `display: none` не попадают в render tree). На основе render tree выполняются:\n- Layout (reflow): вычисление размеров и позиций боксов.\n- Paint: превращение боксов в команды рисования и затем в пиксели.\n- Compositing: сборка слоев (например, при `transform`, `opacity`, фиксированных элементах) в финальную картинку кадра.\n\nВажные практические последствия:\n- Любые изменения DOM или CSS (в том числе из JavaScript) могут вызвать перерасчет стилей и layout, что дорого по времени и влияет на плавность.\n- Длительное выполнение JavaScript на главном потоке может задерживать и обработку событий, и рендеринг, даже если сеть уже все скачала.\n\nУпрощенная цепочка для запоминания:\n`HTML → DOM` + `CSS → CSSOM` → `style calculation` → `render tree` → `layout` → `paint` → `composite`",{"id":49,"value":50,"isTypeParagraph":8},"10379","Итого: после получения HTML браузер декодирует байты в символы, потоково парсит HTML в DOM, параллельно инициирует загрузку подресурсов и может приостанавливать парсинг/показ из‑за скриптов и стилей, затем строит CSSOM и render tree и выполняет layout/paint/compositing для вывода пикселей на экран.",{"id":52,"options":53,"hint":67,"solution":68,"description":69},"1175",[54,58,61,64],{"id":55,"label":56,"isCorrect":57},"4844","После ответа HTTP выполняется строгая валидация HTML, и только при 100% отсутствии ошибок запускается парсер; при любой ошибке DOM не создается и документ не отображается, а подресурсы не запрашиваются до завершения проверки всего файла.  ",false,{"id":59,"label":60,"isCorrect":57},"4845","После ответа HTTP сначала выполняется весь JavaScript «как отдельная стадия», затем полученный результат сериализуется в новый HTML и только потом однократно строится DOM; CSSOM отдельной модели не имеет, стили применяются напрямую во время рисования, а render tree не формируется.  ",{"id":62,"label":63,"isCorrect":57},"4846","После ответа HTTP браузер сначала обязан целиком скачать все изображения, шрифты и CSS, затем превратить HTML сразу в пиксельную картинку без DOM; скрипты запускаются только после появления финального кадра, поэтому не могут влиять на разбор документа и порядок загрузки ресурсов. ",{"id":65,"label":66,"isCorrect":8},"4847","После ответа HTTP определяется `Content-Type`, выполняется декодирование байтов в символы, затем HTML потоково токенизируется и строится DOM; по ходу обнаруживаются подресурсы, синхронные скрипты могут ставить парсер на паузу, стили обычно задерживают показ, после чего формируются CSSOM и render tree и выполняются layout/paint/composite.  ","Удобно мысленно разделять процесс на 3 линии: (1) сеть и кодировка: байты → символы, (2) структура: HTML tokenizer + tree construction → DOM, (3) визуализация: CSSOM → render tree → layout → paint → composite; отдельно следует помнить о блокировках синхронными скриптами и о раннем сканировании ресурсов во время пауз парсера.","**Правильный ответ: 4** - После ответа HTTP определяется `Content-Type`, выполняется декодирование байтов в символы, затем HTML потоково токенизируется и строится DOM; по ходу обнаруживаются подресурсы, синхронные скрипты могут ставить парсер на паузу, стили обычно задерживают показ, после чего формируются CSSOM и render tree и выполняются layout/paint/composite.  ","Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","quizQuestion",{"title":72,"description":73,"ogTitle":7,"ogDescription":73,"ogImageUrl":74,"canonical":23,"ogLocale":75,"ogSiteName":76,"ogImageType":77,"ogImageWidth":78,"ogImageHeight":79,"ogType":80,"ogUrl":23},"Что происходит, когда браузер получает HTML?","Пошагово: декодирование, HTML-парсер, DOM/CSSOM, загрузка ресурсов, блокировки, рендеринг, DOMContentLoaded и load.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":82,"siteUrl":83},"GOOD WEB JOB!","https://goodwebjob.ru",[85],{"label":86,"slug":87,"to":88},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":90,"navigationSublist":98},[91,94],{"path":88,"isActive":57,"name":92,"icon":93,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":95,"isActive":8,"name":96,"icon":97,"isNavbarMobileDisabled":57},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[99,108,135,147,153,294,318,327,333,396,416,422],{"title":100,"list":101,"isOpened":57},"Bash",[102,105],{"name":103,"path":104,"isActive":57},"Дан фрагмент 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":106,"path":107,"isActive":57},"Дан фрагмент 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":109,"list":110,"isOpened":57},"CSS",[111,114,117,120,123,126,129,132],{"name":112,"path":113,"isActive":57},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":115,"path":116,"isActive":57},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":118,"path":119,"isActive":57},"Есть шаблон вложенного 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":121,"path":122,"isActive":57},"Есть шаблон вложенного 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":124,"path":125,"isActive":57},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":127,"path":128,"isActive":57},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":130,"path":131,"isActive":57},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":133,"path":134,"isActive":57},"Есть 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":136,"list":137,"isOpened":57},"Git",[138,141,144],{"name":139,"path":140,"isActive":57},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/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":142,"path":143,"isActive":57},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":145,"path":146,"isActive":57},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":148,"list":149,"isOpened":57},"HTML",[150],{"name":151,"path":152,"isActive":57},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":154,"list":155,"isOpened":57},"JavaScript",[156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,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],{"name":157,"path":158,"isActive":57},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":160,"path":161,"isActive":57},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":163,"path":164,"isActive":57},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":166,"path":167,"isActive":57},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":169,"path":170,"isActive":57},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":172,"path":173,"isActive":57},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":175,"path":176,"isActive":57},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение 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":178,"path":179,"isActive":57},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":181,"path":182,"isActive":57},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":184,"path":185,"isActive":57},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":187,"path":188,"isActive":57},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":190,"path":191,"isActive":57},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":193,"path":194,"isActive":57},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":196,"path":197,"isActive":57},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":199,"path":200,"isActive":57},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":202,"path":203,"isActive":57},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":205,"path":206,"isActive":57},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":208,"path":209,"isActive":57},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":211,"path":212,"isActive":57},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":214,"path":215,"isActive":57},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":217,"path":218,"isActive":57},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":220,"path":221,"isActive":57},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":223,"path":224,"isActive":57},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":226,"path":227,"isActive":57},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":229,"path":230,"isActive":57},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":232,"path":233,"isActive":57},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":235,"path":236,"isActive":57},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":238,"path":239,"isActive":57},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":241,"path":242,"isActive":57},"Вернуть массив от 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":244,"path":245,"isActive":57},"Дана строка: '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":247,"path":248,"isActive":57},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":250,"path":251,"isActive":57},"Для каждого вложенного объекта нужно добавить свойство 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":253,"path":254,"isActive":57},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":256,"path":257,"isActive":57},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":259,"path":260,"isActive":57},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":262,"path":263,"isActive":57},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":265,"path":266,"isActive":57}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":268,"path":269,"isActive":57},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":271,"path":272,"isActive":57},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":274,"path":275,"isActive":57},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":277,"path":278,"isActive":57},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":280,"path":281,"isActive":57},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":283,"path":284,"isActive":57},"Реализовать функцию, принимающую аргументы \"*\", \"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":286,"path":287,"isActive":57},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":289,"path":290,"isActive":57},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":292,"path":293,"isActive":57},"Числа от 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":295,"list":296,"isOpened":57},"React",[297,300,303,306,309,312,315],{"name":298,"path":299,"isActive":57},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":301,"path":302,"isActive":57},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":304,"path":305,"isActive":57},"Если убрать в 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":307,"path":308,"isActive":57},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":310,"path":311,"isActive":57},"Есть код, в котором список и кнопка. Что в реальном 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":313,"path":314,"isActive":57},"Зачем нужен 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":316,"path":317,"isActive":57},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/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":319,"list":320,"isOpened":57},"Алгоритмы",[321,324],{"name":322,"path":323,"isActive":57},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":325,"path":326,"isActive":57},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":328,"list":329,"isOpened":57},"Дебаггинг",[330],{"name":331,"path":332,"isActive":57},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/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":334,"list":335,"isOpened":57},"Компьютерные сети",[336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393],{"name":337,"path":338,"isActive":57},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":340,"path":341,"isActive":57},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":343,"path":344,"isActive":57},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":346,"path":347,"isActive":57},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":349,"path":350,"isActive":57},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":352,"path":353,"isActive":57},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":355,"path":356,"isActive":57},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":358,"path":359,"isActive":57},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":361,"path":362,"isActive":57},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":364,"path":365,"isActive":57},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":367,"path":368,"isActive":57},"Чем отличаются 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":370,"path":371,"isActive":57},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/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":373,"path":374,"isActive":57},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":376,"path":377,"isActive":57},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":379,"path":380,"isActive":57},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":382,"path":383,"isActive":57},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/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":385,"path":386,"isActive":57},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":388,"path":389,"isActive":57},"Все данные зашифрованы, используется 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":391,"path":392,"isActive":57},"Есть веб-приложение. Помимо 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":394,"path":395,"isActive":57},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":397,"list":398,"isOpened":57},"Отрисовка в браузере",[399,401,404,407,410,413],{"name":69,"path":400,"isActive":57},"/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":402,"path":403,"isActive":57},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":405,"path":406,"isActive":57},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":408,"path":409,"isActive":57},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":411,"path":412,"isActive":57},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":414,"path":415,"isActive":57},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":417,"list":418,"isOpened":57},"Ревью кода",[419],{"name":420,"path":421,"isActive":57},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":423,"list":424,"isOpened":57},"Теория вероятности",[425,428,431],{"name":426,"path":427,"isActive":57},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/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":429,"path":430,"isActive":57},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/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":432,"path":433,"isActive":57},"Как гарантированно найти лёгкую фальшивую монету среди 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":435},[436,439,441,443,445,448,451,453,455,457,459,461,464,466,468,470,472,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,542,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643,645,646,648,650,652,654],{"name":437,"value":438},"Теоретические задания","theoretical-tasks",{"name":193,"value":440},"what-this-code-will-return-typeof-function",{"name":92,"value":442},"where-to-begin",{"name":160,"value":444},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":446,"value":447},"Backend","backend",{"name":449,"value":450},"Frontend","frontend",{"name":157,"value":452},"prototype-what-logical-values-will-be-received-in-console-log",{"name":274,"value":454},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":265,"value":456},"find-non-repeating-numbers-in-an-array",{"name":238,"value":458},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":244,"value":460},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":462,"value":463},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":250,"value":465},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":166,"value":467},"what-value-will-the-console-output-with-object-property",{"name":169,"value":469},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":241,"value":471},"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":271,"value":473},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":277,"value":475},"determines-whether-a-word-is-a-palindrome",{"name":256,"value":477},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":283,"value":479},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":247,"value":481},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":253,"value":483},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":259,"value":485},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":292,"value":487},"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":262,"value":489},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":268,"value":491},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":172,"value":493},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":175,"value":495},"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":187,"value":497},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":190,"value":499},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":289,"value":501},"unifying-values-in-an-array",{"name":280,"value":503},"flattening-the-array",{"name":178,"value":505},"what-will-the-book-get-upper-name-method-return",{"name":286,"value":507},"string-compression",{"name":184,"value":509},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":196,"value":511},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":337,"value":513},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":343,"value":515},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":346,"value":517},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":349,"value":519},"key-differences-between-tcp-and-udp",{"name":352,"value":521},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":355,"value":523},"what-is-http-and-what-does-it-consist-of",{"name":358,"value":525},"what-are-http-headers-and-why-do-we-need-them",{"name":361,"value":527},"what-are-http-parameters",{"name":364,"value":529},"where-is-the-html-code-located-in-the-http-response-structure",{"name":151,"value":531},"what-is-html",{"name":367,"value":533},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":370,"value":535},"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":373,"value":537},"what-is-a-cookie",{"name":376,"value":539},"who-initiates-the-cookie-recording-in-the-browser",{"name":379,"value":541},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":543,"value":544},"Лайвкодинг","livecoding",{"name":163,"value":546},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":385,"value":548},"is-everything-that-goes-through-https-secure",{"name":388,"value":550},"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":391,"value":552},"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":402,"value":554},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":69,"value":556},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":405,"value":558},"what-is-blocking-the-page-rendering-in-the-browser",{"name":408,"value":560},"what-is-dom-in-a-browser-what-is-cssom",{"name":411,"value":562},"what-are-nodes-in-the-dom",{"name":414,"value":564},"what-does-cssom-consist-of",{"name":112,"value":566},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":115,"value":568},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":118,"value":570},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":121,"value":572},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":124,"value":574},"there-is-an-html-code-will-font-weight-affect-span",{"name":127,"value":576},"what-are-the-differences-between-flexbox-and-grid",{"name":130,"value":578},"do-flexbox-and-grid-replace-each-other",{"name":133,"value":580},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":96,"value":582},"tasks",{"name":199,"value":584},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":202,"value":586},"what-is-this-in-javascript",{"name":205,"value":588},"what-is-an-event-loop-and-how-does-it-work",{"name":208,"value":590},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":211,"value":592},"what-does-the-typeof-operator-show-in-javascript",{"name":214,"value":594},"what-types-of-data-exist-in-javascript",{"name":217,"value":596},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":220,"value":598},"what-will-typeof-return-for-an-array",{"name":223,"value":600},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":226,"value":602},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":229,"value":604},"what-does-typeof-return-for-new-set-in-javascript",{"name":298,"value":606},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":304,"value":608},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":307,"value":610},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":310,"value":612},"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":313,"value":614},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":331,"value":616},"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":139,"value":618},"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":142,"value":620},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":145,"value":622},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":420,"value":624},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":103,"value":626},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":106,"value":628},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":322,"value":630},"what-is-algorithmic-complexity",{"name":325,"value":632},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":232,"value":634},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":394,"value":636},"how-can-a-user-be-authorized-on-a-website",{"name":235,"value":638},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":426,"value":640},"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":429,"value":642},"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":432,"value":644},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":86,"value":87},{"name":382,"value":647},"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":340,"value":649},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":181,"value":651},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":301,"value":653},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":316,"value":655},"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":657,"copyright":660,"reportError":661,"socialNetwork":663},{"link":658,"title":659},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":662,"link":658},"Сообщить об ошибке",{"label":664,"socialNetworkList":665},"Мы в соцсетях:",[666,669,672],{"icon":23,"link":667,"title":668},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":670,"link":658,"title":671},"ic:baseline-telegram","Telegram",{"icon":673,"link":674,"title":675},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":677,"body":678},{},{"type":679,"children":680},"root",[681],{"type":682,"tag":683,"props":684,"children":685},"element","p",{},[686],{"type":687,"value":69},"text",{"data":689,"body":690},{},{"type":679,"children":691},[692],{"type":682,"tag":683,"props":693,"children":694},{},[695],{"type":687,"value":696},"После ответа HTTP выполняется строгая валидация HTML, и только при 100% отсутствии ошибок запускается парсер; при любой ошибке DOM не создается и документ не отображается, а подресурсы не запрашиваются до завершения проверки всего файла.",{"data":698,"body":699},{},{"type":679,"children":700},[701],{"type":682,"tag":683,"props":702,"children":703},{},[704],{"type":687,"value":705},"После ответа HTTP сначала выполняется весь JavaScript «как отдельная стадия», затем полученный результат сериализуется в новый HTML и только потом однократно строится DOM; CSSOM отдельной модели не имеет, стили применяются напрямую во время рисования, а render tree не формируется.",{"data":707,"body":708},{},{"type":679,"children":709},[710],{"type":682,"tag":683,"props":711,"children":712},{},[713],{"type":687,"value":714},"После ответа HTTP браузер сначала обязан целиком скачать все изображения, шрифты и CSS, затем превратить HTML сразу в пиксельную картинку без DOM; скрипты запускаются только после появления финального кадра, поэтому не могут влиять на разбор документа и порядок загрузки ресурсов.",{"data":716,"body":717},{},{"type":679,"children":718},[719],{"type":682,"tag":683,"props":720,"children":721},{},[722,724,731],{"type":687,"value":723},"После ответа HTTP определяется ",{"type":682,"tag":725,"props":726,"children":728},"code",{"className":727},[],[729],{"type":687,"value":730},"Content-Type",{"type":687,"value":732},", выполняется декодирование байтов в символы, затем HTML потоково токенизируется и строится DOM; по ходу обнаруживаются подресурсы, синхронные скрипты могут ставить парсер на паузу, стили обычно задерживают показ, после чего формируются CSSOM и render tree и выполняются layout/paint/composite.",{"data":734,"body":735},{},{"type":679,"children":736},[737],{"type":682,"tag":683,"props":738,"children":739},{},[740],{"type":687,"value":67},{"data":742,"body":743},{},{"type":679,"children":744},[745],{"type":682,"tag":683,"props":746,"children":747},{},[748,754,756,761],{"type":682,"tag":749,"props":750,"children":751},"strong",{},[752],{"type":687,"value":753},"Правильный ответ: 4",{"type":687,"value":755}," - После ответа HTTP определяется ",{"type":682,"tag":725,"props":757,"children":759},{"className":758},[],[760],{"type":687,"value":730},{"type":687,"value":732},{"data":763,"body":764},{},{"type":679,"children":765},[766,779,807,812],{"type":682,"tag":683,"props":767,"children":768},{},[769,771,777],{"type":687,"value":770},"После получения ответа по HTTP определяется, как интерпретировать тело ответа: важны статус, заголовки и прежде всего медиатип, например ",{"type":682,"tag":725,"props":772,"children":774},{"className":773},[],[775],{"type":687,"value":776},"Content-Type: text/html",{"type":687,"value":778},".",{"type":682,"tag":683,"props":780,"children":781},{},[782,784,790,792,797,799,805],{"type":687,"value":783},"Далее байтовый поток преобразуется в поток символов (Unicode-кодпоинтов) с учетом кодировки. Для HTML применяется механизм определения кодировки: учитываются BOM, параметр ",{"type":682,"tag":725,"props":785,"children":787},{"className":786},[],[788],{"type":687,"value":789},"charset",{"type":687,"value":791}," в ",{"type":682,"tag":725,"props":793,"children":795},{"className":794},[],[796],{"type":687,"value":730},{"type":687,"value":798},", а также метатеги вида ",{"type":682,"tag":725,"props":800,"children":802},{"className":801},[],[803],{"type":687,"value":804},"meta charset=\"utf-8\"",{"type":687,"value":806}," в начале документа.",{"type":682,"tag":683,"props":808,"children":809},{},[810],{"type":687,"value":811},"Если HTML валидный, это означает корректность разметки относительно правил, но сам конвейер обработки не меняется: браузер все равно выполняет декодирование, потоковый разбор, построение DOM, загрузку подресурсов и рендеринг. Валидность снижает вероятность «неожиданных» исправлений разметки парсером, но не отменяет его работу.",{"type":682,"tag":683,"props":813,"children":814},{},[815,817],{"type":687,"value":816},"Упрощенная цепочка на этом этапе:\n",{"type":682,"tag":725,"props":818,"children":820},{"className":819},[],[821],{"type":687,"value":822},"HTTP bytes → decode/encoding sniffing → Unicode code points → HTML parsing",{"data":824,"body":825},{},{"type":679,"children":826},[827],{"type":682,"tag":683,"props":828,"children":829},{},[830],{"type":687,"value":22},{"data":832,"body":833},{},{"type":679,"children":834},[835,848,869,874],{"type":682,"tag":683,"props":836,"children":837},{},[838,840,846],{"type":687,"value":839},"HTML парсится потоково: по мере поступления символов запускается токенизация (превращение текста в токены), а затем построение дерева (добавление узлов в DOM). Итогом является объект ",{"type":682,"tag":725,"props":841,"children":843},{"className":842},[],[844],{"type":687,"value":845},"Document",{"type":687,"value":847}," и дерево узлов (элементов, текстовых узлов, комментариев и т. п.).",{"type":682,"tag":683,"props":849,"children":850},{},[851,853,859,861,867],{"type":687,"value":852},"Парсер не «читает HTML как XML». Вместо этого применяется специализированный алгоритм с режимами вставки (insertion modes), которые зависят от контекста: одинаковый токен может обрабатываться по-разному в ",{"type":682,"tag":725,"props":854,"children":856},{"className":855},[],[857],{"type":687,"value":858},"\u003Chead>",{"type":687,"value":860},", ",{"type":682,"tag":725,"props":862,"children":864},{"className":863},[],[865],{"type":687,"value":866},"\u003Cbody>",{"type":687,"value":868},", таблицах и т. п. Это сделано для совместимости с историческим Web и для предсказуемого результата на реальных страницах.",{"type":682,"tag":683,"props":870,"children":871},{},[872],{"type":687,"value":873},"Даже при валидной разметке возможны технические остановки/возобновления парсинга. Например, выполнение некоторых скриптов может «вмешаться» в процесс (изменить DOM, вставить HTML), поэтому основной парсер обязан корректно синхронизировать построение дерева с выполнением JavaScript.",{"type":682,"tag":683,"props":875,"children":876},{},[877,879],{"type":687,"value":878},"Упрощенная схема внутренностей:\n",{"type":682,"tag":725,"props":880,"children":882},{"className":881},[],[883],{"type":687,"value":884},"code points → tokenizer → tokens → tree construction → DOM",{"data":886,"body":887},{},{"type":679,"children":888},[889],{"type":682,"tag":683,"props":890,"children":891},{},[892],{"type":687,"value":33},{"data":894,"body":895},{},{"type":679,"children":896},[897,902,907,954,959,964,993,998],{"type":682,"tag":683,"props":898,"children":899},{},[900],{"type":687,"value":901},"По мере разбора HTML обнаруживаются подресурсы: стили, скрипты, изображения, шрифты, iframe и т. п. Браузер старается запрашивать их как можно раньше, чтобы сократить общее время загрузки страницы.",{"type":682,"tag":683,"props":903,"children":904},{},[905],{"type":687,"value":906},"Некоторые ресурсы и действия могут блокировать основной парсер или откладывать визуальный вывод:",{"type":682,"tag":908,"props":909,"children":910},"ul",{},[911,941],{"type":682,"tag":912,"props":913,"children":914},"li",{},[915,917,923,925,931,933,939],{"type":687,"value":916},"Синхронные ",{"type":682,"tag":725,"props":918,"children":920},{"className":919},[],[921],{"type":687,"value":922},"\u003Cscript src=\"...\">",{"type":687,"value":924}," без ",{"type":682,"tag":725,"props":926,"children":928},{"className":927},[],[929],{"type":687,"value":930},"async",{"type":687,"value":932},"/",{"type":682,"tag":725,"props":934,"children":936},{"className":935},[],[937],{"type":687,"value":938},"defer",{"type":687,"value":940}," обычно приостанавливают разбор HTML до загрузки и выполнения, потому что скрипт может изменить документ и продолжать парсинг «вперед» небезопасно с точки зрения корректности результата.",{"type":682,"tag":912,"props":942,"children":943},{},[944,946,952],{"type":687,"value":945},"Стили из ",{"type":682,"tag":725,"props":947,"children":949},{"className":948},[],[950],{"type":687,"value":951},"\u003Clink rel=\"stylesheet\" href=\"...\">",{"type":687,"value":953}," обычно блокируют рендеринг (показ), чтобы не показывать пользователю «голую» страницу без CSS и не провоцировать резкие визуальные скачки.",{"type":682,"tag":683,"props":955,"children":956},{},[957],{"type":687,"value":958},"Чтобы уменьшить простои, в современных браузерах существует «спекулятивный» механизм раннего обнаружения ресурсов (preload scanner). Он сканирует HTML разметку параллельно основному парсеру и пытается заранее поставить в очередь загрузку ресурсов, даже если основной парсер временно остановлен скриптом.",{"type":682,"tag":683,"props":960,"children":961},{},[962],{"type":687,"value":963},"Ограничения такого подхода важны для понимания поведения:",{"type":682,"tag":908,"props":965,"children":966},{},[967,980],{"type":682,"tag":912,"props":968,"children":969},{},[970,972,978],{"type":687,"value":971},"Ресурсы, создаваемые только через JavaScript (например, ",{"type":682,"tag":725,"props":973,"children":975},{"className":974},[],[976],{"type":687,"value":977},"const img = new Image(); img.src = \"...\"",{"type":687,"value":979},"), не будут обнаружены заранее, пока скрипт не выполнится.",{"type":682,"tag":912,"props":981,"children":982},{},[983,985,991],{"type":687,"value":984},"Ресурсы, упомянутые только внутри CSS (например, ",{"type":682,"tag":725,"props":986,"children":988},{"className":987},[],[989],{"type":687,"value":990},"background-image: url(...)",{"type":687,"value":992},"), не извлекаются из HTML-сканирования и появятся в сети позже — после загрузки и разбора CSS.",{"type":682,"tag":683,"props":994,"children":995},{},[996],{"type":687,"value":997},"Мини-таблица типичных эффектов:",{"type":682,"tag":999,"props":1000,"children":1001},"table",{},[1002,1026],{"type":682,"tag":1003,"props":1004,"children":1005},"thead",{},[1006],{"type":682,"tag":1007,"props":1008,"children":1009},"tr",{},[1010,1016,1021],{"type":682,"tag":1011,"props":1012,"children":1013},"th",{},[1014],{"type":687,"value":1015},"Ситуация в документе",{"type":682,"tag":1011,"props":1017,"children":1018},{},[1019],{"type":687,"value":1020},"Что тормозится",{"type":682,"tag":1011,"props":1022,"children":1023},{},[1024],{"type":687,"value":1025},"Причина",{"type":682,"tag":1027,"props":1028,"children":1029},"tbody",{},[1030,1065,1087],{"type":682,"tag":1007,"props":1031,"children":1032},{},[1033,1055,1060],{"type":682,"tag":1034,"props":1035,"children":1036},"td",{},[1037,1043,1044,1049,1050],{"type":682,"tag":725,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":687,"value":1042},"\u003Cscript src=\"app.js\">",{"type":687,"value":924},{"type":682,"tag":725,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":687,"value":930},{"type":687,"value":932},{"type":682,"tag":725,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":687,"value":938},{"type":682,"tag":1034,"props":1056,"children":1057},{},[1058],{"type":687,"value":1059},"Парсинг HTML и часто первый показ",{"type":682,"tag":1034,"props":1061,"children":1062},{},[1063],{"type":687,"value":1064},"Скрипт может менять DOM и поток разбора.",{"type":682,"tag":1007,"props":1066,"children":1067},{},[1068,1077,1082],{"type":682,"tag":1034,"props":1069,"children":1070},{},[1071],{"type":682,"tag":725,"props":1072,"children":1074},{"className":1073},[],[1075],{"type":687,"value":1076},"\u003Clink rel=\"stylesheet\" href=\"styles.css\">",{"type":682,"tag":1034,"props":1078,"children":1079},{},[1080],{"type":687,"value":1081},"Рендеринг (визуальный показ)",{"type":682,"tag":1034,"props":1083,"children":1084},{},[1085],{"type":687,"value":1086},"Избежание отображения без стилей и скачков оформления.",{"type":682,"tag":1007,"props":1088,"children":1089},{},[1090,1095,1100],{"type":682,"tag":1034,"props":1091,"children":1092},{},[1093],{"type":687,"value":1094},"Основной парсер «стоит» на скрипте",{"type":682,"tag":1034,"props":1096,"children":1097},{},[1098],{"type":687,"value":1099},"Сеть продолжает работу через раннее сканирование",{"type":682,"tag":1034,"props":1101,"children":1102},{},[1103],{"type":687,"value":1104},"Ранние запросы подресурсов сокращают общий критический путь.",{"data":1106,"body":1107},{},{"type":679,"children":1108},[1109,1114,1127,1160,1165,1178],{"type":682,"tag":683,"props":1110,"children":1111},{},[1112],{"type":687,"value":1113},"После (или параллельно) построения DOM загружаются и разбираются CSS-ресурсы, формируя CSSOM — внутреннюю модель правил стилей. Затем выполняется сопоставление стилей: для каждого узла DOM вычисляются итоговые значения CSS-свойств (cascade → computed values).",{"type":682,"tag":683,"props":1115,"children":1116},{},[1117,1119,1125],{"type":687,"value":1118},"Далее строится render tree (дерево рендеринга): оно похоже на DOM, но учитывает визуальные особенности (например, элементы с ",{"type":682,"tag":725,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":687,"value":1124},"display: none",{"type":687,"value":1126}," не попадают в render tree). На основе render tree выполняются:",{"type":682,"tag":908,"props":1128,"children":1129},{},[1130,1135,1140],{"type":682,"tag":912,"props":1131,"children":1132},{},[1133],{"type":687,"value":1134},"Layout (reflow): вычисление размеров и позиций боксов.",{"type":682,"tag":912,"props":1136,"children":1137},{},[1138],{"type":687,"value":1139},"Paint: превращение боксов в команды рисования и затем в пиксели.",{"type":682,"tag":912,"props":1141,"children":1142},{},[1143,1145,1151,1152,1158],{"type":687,"value":1144},"Compositing: сборка слоев (например, при ",{"type":682,"tag":725,"props":1146,"children":1148},{"className":1147},[],[1149],{"type":687,"value":1150},"transform",{"type":687,"value":860},{"type":682,"tag":725,"props":1153,"children":1155},{"className":1154},[],[1156],{"type":687,"value":1157},"opacity",{"type":687,"value":1159},", фиксированных элементах) в финальную картинку кадра.",{"type":682,"tag":683,"props":1161,"children":1162},{},[1163],{"type":687,"value":1164},"Важные практические последствия:",{"type":682,"tag":908,"props":1166,"children":1167},{},[1168,1173],{"type":682,"tag":912,"props":1169,"children":1170},{},[1171],{"type":687,"value":1172},"Любые изменения DOM или CSS (в том числе из JavaScript) могут вызвать перерасчет стилей и layout, что дорого по времени и влияет на плавность.",{"type":682,"tag":912,"props":1174,"children":1175},{},[1176],{"type":687,"value":1177},"Длительное выполнение JavaScript на главном потоке может задерживать и обработку событий, и рендеринг, даже если сеть уже все скачала.",{"type":682,"tag":683,"props":1179,"children":1180},{},[1181,1183,1189,1191,1197,1199,1205,1206,1212,1213,1219,1220,1226,1227],{"type":687,"value":1182},"Упрощенная цепочка для запоминания:\n",{"type":682,"tag":725,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":687,"value":1188},"HTML → DOM",{"type":687,"value":1190}," + ",{"type":682,"tag":725,"props":1192,"children":1194},{"className":1193},[],[1195],{"type":687,"value":1196},"CSS → CSSOM",{"type":687,"value":1198}," → ",{"type":682,"tag":725,"props":1200,"children":1202},{"className":1201},[],[1203],{"type":687,"value":1204},"style calculation",{"type":687,"value":1198},{"type":682,"tag":725,"props":1207,"children":1209},{"className":1208},[],[1210],{"type":687,"value":1211},"render tree",{"type":687,"value":1198},{"type":682,"tag":725,"props":1214,"children":1216},{"className":1215},[],[1217],{"type":687,"value":1218},"layout",{"type":687,"value":1198},{"type":682,"tag":725,"props":1221,"children":1223},{"className":1222},[],[1224],{"type":687,"value":1225},"paint",{"type":687,"value":1198},{"type":682,"tag":725,"props":1228,"children":1230},{"className":1229},[],[1231],{"type":687,"value":1232},"composite",{"data":1234,"body":1235},{},{"type":679,"children":1236},[1237],{"type":682,"tag":683,"props":1238,"children":1239},{},[1240],{"type":687,"value":50},1775735659017]