[{"data":1,"prerenderedAt":1428},["ShallowReactive",2],{"$fT6R67cIYsLSKCgrlYyPb0Ri9GQxTicPs59Cr9yP0ff8":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":107,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":110,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":115,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":460,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":682,"mdc--9j21eh-key":702,"mdc--kkcobx-key":714,"mdc--wkeuzk-key":722,"mdc-ku2zsx-key":748,"mdc-vzfq0v-key":756,"mdc--quikrc-key":773,"mdc--5uqf8s-key":781,"mdc--ye1gkx-key":846,"mdc--jcbshi-key":877,"mdc-no0fok-key":885,"mdc-ts7xb6-key":912,"mdc--3ktsgj-key":952,"mdc-8kuyyw-key":1038,"mdc-eiua0t-key":1055,"mdc--ot8mk5-key":1107,"mdc-m66ykx-key":1326,"mdc-lisxot-key":1335,"mdc-hbwdlk-key":1396,"mdc--41mv4w-key":1404},{"content":4,"quizQuestionContent":78,"type":97,"pageMeta":98},[5,9,13,16,20,24,27,31,34,38,41,45,48,52,55,59,62,65,69,72,75],{"id":6,"value":7,"isTypeH1":8},"1932","Что блокирует рендеринг страницы в браузере",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4461","Теория: критический путь рендера","critical-rendering-path-theory",{"id":14,"value":15,"isTypeParagraph":8},"10266","Критический путь рендера (Critical Rendering Path) — это цепочка шагов, которая превращает HTML/CSS/JS в пиксели на экране: построение DOM, построение CSSOM, сборка render tree, затем layout (расчёт геометрии) и paint (отрисовка).\n\nDOM строится постепенно, по мере того как парсер читает HTML, поэтому не требуется ждать «весь документ целиком», чтобы начать построение структуры. CSSOM устроен иначе: чтобы корректно вычислить итоговые стили, часто необходимо иметь уже загруженные и разобранные критические CSS, иначе возможна «вспышка» неправильного оформления.\n\nУпрощённая схема, где видны типовые места блокировок:\n\n```\nHTML bytes\n  ↓ (tokenize/parse)\nDOM (строится постепенно) ------------------------------┐\n                                                       ├→ Render Tree → Layout → Paint (пиксели)\nCSS (скачивание+парсинг) → CSSOM (нужен для стилей) ----┘\n\nJS (classic, синхронный) может:\n- остановить парсинг HTML\n- занять main thread и отложить layout/paint\n```\n",{"id":17,"description":18,"titleAlert":19,"isTypeAlertWarning":8},"730","Даже при полностью загруженных HTML и CSS отрисовка может задерживаться из‑за «длинных задач» на main thread: пока выполняется тяжёлая функция JavaScript, браузер не может одновременно делать layout и paint, потому что эти этапы тоже требуют времени основного потока.",null,{"id":21,"value":22,"anchor":23,"isTypeH2":8},"4462","Что именно блокирует рендер","what-exactly-blocks-render",{"id":25,"value":26,"isTypeParagraph":8},"10267","Чаще всего рендеринг задерживают ресурсы критического пути: таблицы стилей (нужны для CSSOM), синхронные скрипты без `async`/`defer` (могут остановить парсер и вмешаться в построение DOM), а также длительное выполнение кода, мешающее layout/paint.\n\nНиже — последовательное объяснение по категориям.",{"id":28,"value":29,"anchor":30,"isTypeH3":8},"4486","CSS (таблицы стилей)","css",{"id":32,"value":33,"isTypeParagraph":8},"10268","- По умолчанию `\u003Clink rel=\"stylesheet\" ...>` является блокирующим для первой отрисовки, потому что без CSSOM нельзя корректно вычислить стили элементов и собрать render tree.\n- Чем больше критических CSS подключено в начале документа, тем позже появляется первый «правильный» кадр.\n\nПример (обычное блокирующее подключение стилей):\n```\n\u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n```",{"id":35,"value":36,"anchor":37,"isTypeH3":8},"4487","JavaScript (синхронные скрипты)","javascript",{"id":39,"value":40,"isTypeParagraph":8},"10269","- Classic script без `async`/`defer` обычно останавливает парсинг HTML: браузеру требуется дождаться загрузки файла и выполнить его «сейчас», прежде чем идти дальше по разметке.\n- Такой скрипт способен задержать и рендер, потому что меняет DOM/CSSOM и занимает main thread.\n\nПример (парсер-блокирующий скрипт):\n\n```\n\u003Cscript src=\"/heavy.js\">\u003C/script>\n```\n\nПример (не останавливать парсер, выполнить после разбора HTML):\n\n```\n\u003Cscript src=\"/app.js\" defer>\u003C/script>\n```\n\nПояснение по атрибутам:\n- `async`: файл загружается параллельно, выполнение происходит сразу после готовности файла; порядок относительно HTML может быть непредсказуемым, а выполнение всё равно занимает main thread.\n- `defer`: файл загружается параллельно, выполнение происходит после завершения парсинга HTML; порядок нескольких defer-скриптов сохраняется.",{"id":42,"value":43,"anchor":44,"isTypeH3":8},"4488","Main thread (длинные задачи)","main-thread",{"id":46,"value":47,"isTypeParagraph":8},"10270","- Блокировка бывает не только «сетевой» (пока ресурс скачивается), но и «вычислительной»: если JavaScript выполняется долго, то браузер не успевает рассчитать layout и выполнить paint.\n- В результате интерфейс может долго не обновляться даже при загруженных ресурсах.\n",{"id":49,"value":50,"anchor":51,"isTypeH3":8},"4489","Шрифты (webfonts)","webfonts",{"id":53,"value":54,"isTypeParagraph":8},"10271","- Шрифты могут задерживать появление текста: иногда текст скрывается до загрузки шрифта (FOIT), иногда сначала показывается запасной шрифт, а затем происходит замена (FOUT).\n- Управление поведением задаётся через `font-display` в `@font-face`, поэтому утверждение «страница всегда ждёт все шрифты целиком» является некорректным.\n\nПример (стратегия отображения текста через `font-display`):\n\n```\n@font-face {\n  font-family: \"MyFont\";\n  src: url(\"/fonts/myfont.woff2\") format(\"woff2\");\n  font-display: swap;\n}\n```",{"id":56,"value":57,"anchor":58,"isTypeH3":8},"4490","Изображения и медиа","image",{"id":60,"value":61,"isTypeParagraph":8},"10272","- Изображения обычно загружаются асинхронно и дорисовываются, когда готовы; это важно для полноты контента и визуального качества, но обычно не является главным «стоп‑фактором» первой отрисовки всей страницы.\n- Возможна ситуация, когда каркас страницы уже виден, а изображения ещё нет.\n\nПример (картинка может дорисоваться позже):\n```\n\u003Cimg src=\"/hero.jpg\" alt=\"Hero\">\n```\n\nТаблица «ресурс → эффект»\n- Для начинающего уровня полезно запомнить: CSS и синхронный JS — главные кандидаты на блокировку первой отрисовки, шрифты — частый источник проблем с текстом, длинные задачи — частая причина «пустого» или «замершего» экрана.\n\n| Что встречено в HTML | Что задерживается | Причина (упрощённо) |\n|---|---|---|\n| `\u003Clink rel=\"stylesheet\" href=\"...\">` | Первая корректная отрисовка | Нужен CSSOM для вычисления стилей и сборки render tree |\n| `\u003Cscript src=\"...\">\u003C/script>` (без async/defer) | Парсинг HTML и часто рендер | Скрипт выполняется синхронно, парсер ждёт загрузку и выполнение |\n| `\u003Cscript async src=\"...\">` | Может «сдвинуть» рендер по времени | Выполнение происходит при готовности, может занять main thread |\n| `\u003Cscript defer src=\"...\">` | Рендер обычно менее задерживается | Парсинг не блокируется, выполнение после парсинга HTML |\n| `@font-face` webfonts | Появление текста/перерисовка | Стратегия зависит от `font-display` (FOIT/FOUT) |\n| `\u003Cimg>` | Обычно не блокирует первый кадр целиком | Рисуется по готовности, каркас может появиться раньше |",{"id":63,"description":64,"titleAlert":19,"isTypeAlertInfo":8},"672","Смысл «критического пути» в том, что для первого кадра важнее всего быстро получить HTML для DOM, быстро получить критические CSS для CSSOM и не занять main thread тяжёлыми синхронными задачами.\n",{"id":66,"value":67,"anchor":68,"isTypeH2":8},"4463","Практика: как проверить на странице","how-to-check-in-practice",{"id":70,"value":71,"isTypeParagraph":8},"10273","Для диагностики обычно достаточно инструментов разработчика браузера.\n\nЧто следует проверять:\n- Network: ранние запросы в head; особенно CSS и скрипты без `defer/async`, затем сопоставление с водопадом загрузки.\n- Performance: наличие длинных задач на main thread до первого отображения; часто именно они объясняют задержку layout/paint.\n- Fonts: наличие FOIT/FOUT и значение `font-display` в стилях.\n\nПример базового head (упрощённо: CSS — критичен, JS — отложен):\n\n```\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n  \u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n\n  \u003Cscript src=\"/app.js\" defer>\u003C/script>\n\u003C/head>\n```",{"id":73,"description":74,"titleAlert":19,"isTypeAlertWarning":8},"731","Если в head расположен тяжёлый синхронный скрипт, то даже маленькая страница может долго оставаться без первой отрисовки, потому что парсер HTML остановится и будет ожидать выполнение JavaScript.",{"id":76,"value":77,"isTypeParagraph":8},"10274","Кратко: рендеринг чаще всего блокируют CSS (для построения CSSOM), синхронные скрипты без `async/defer` и длительные задачи на main thread; изображения обычно не блокируют первый кадр целиком, а шрифты влияют главным образом на момент появления текста и зависят от настроек вроде `font-display`.",{"id":79,"options":80,"hint":94,"solution":95,"description":96},"1161",[81,85,88,91],{"id":82,"label":83,"isCorrect":84},"4788","Рендеринг в основном блокируется изображениями, потому что без полной загрузки всех картинок браузер не может собрать DOM и начать рисовать, поэтому сначала всегда ждутся медиа‑ресурсы",false,{"id":86,"label":87,"isCorrect":8},"4789","Рендеринг чаще всего блокируют ресурсы, необходимые для критического пути: таблицы стилей для CSSOM и синхронные скрипты без `async`/`defer`, а также длительные задачи на main thread, мешающие layout/paint",{"id":89,"label":90,"isCorrect":84},"4790","Рендеринг блокируется только HTML‑разметкой: пока не придёт весь документ целиком, браузер не строит DOM и не выполняет никакие ресурсы, поэтому CSS и JS на отрисовку не влияют",{"id":92,"label":93,"isCorrect":84},"4791","Рендеринг всегда блокируется шрифтами: до загрузки всех `@font-face` браузер не имеет права показывать элементы интерфейса, поэтому любая страница ждёт шрифты целиком","Следует мысленно пройти шаги критического пути рендера и ответить на два вопроса — «нужен ли ресурс до первого paint (CSSOM/синхронный JS)?» и «может ли выполнение на main thread задержать layout/paint даже при готовых ресурсах?».","**Правильный ответ: 2** - Рендеринг чаще всего блокируют ресурсы, необходимые для критического пути: таблицы стилей для CSSOM и синхронные скрипты без `async`/`defer`, а также длительные задачи на main thread, мешающие layout/paint\n\nПочему не остальные:\n1) Неверно: изображения и медиа обычно не относятся к основным «render-blocking» ресурсам; DOM строится по мере получения HTML, а картинки, как правило, догружаются параллельно и дорисовываются позже.\n3) Неверно: HTML важен для построения DOM, но CSS и JavaScript напрямую влияют на момент первой отрисовки (CSS нужен для CSSOM, а синхронный script может останавливать парсинг и задерживать рендер).\n4) Неверно как универсальное правило: шрифты способны задерживать отображение текста (например, делать текст временно невидимым или показывать запасной шрифт), но это зависит от стратегии загрузки и настройки `font-display`, а не «всегда блокирует всю страницу».\n\nТермин «блокирует рендеринг» означает, что браузер откладывает вывод пикселей (или части вывода), чтобы не показывать «неоформленную» страницу и не создавать сильные визуальные скачки.\n","Что в браузере блокирует рендеринг страницы?","quizQuestion",{"title":96,"description":99,"ogTitle":7,"ogDescription":99,"ogImageUrl":100,"canonical":19,"ogLocale":101,"ogSiteName":102,"ogImageType":103,"ogImageWidth":104,"ogImageHeight":105,"ogType":106,"ogUrl":19},"Разбор критического пути рендеринга: css, синхронный js, шрифты и задачи main thread, с примерами и вариантами ответов","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":108,"siteUrl":109},"GOOD WEB JOB!","https://goodwebjob.ru",[111],{"label":112,"slug":113,"to":114},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":116,"navigationSublist":124},[117,120],{"path":114,"isActive":84,"name":118,"icon":119,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":121,"isActive":8,"name":122,"icon":123,"isNavbarMobileDisabled":84},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[125,134,161,173,179,320,344,353,359,422,442,448],{"title":126,"list":127,"isOpened":84},"Bash",[128,131],{"name":129,"path":130,"isActive":84},"Дан фрагмент 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":132,"path":133,"isActive":84},"Дан фрагмент 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":135,"list":136,"isOpened":84},"CSS",[137,140,143,146,149,152,155,158],{"name":138,"path":139,"isActive":84},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":141,"path":142,"isActive":84},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":144,"path":145,"isActive":84},"Есть шаблон вложенного 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":147,"path":148,"isActive":84},"Есть шаблон вложенного 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":150,"path":151,"isActive":84},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":153,"path":154,"isActive":84},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":156,"path":157,"isActive":84},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":159,"path":160,"isActive":84},"Есть 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":162,"list":163,"isOpened":84},"Git",[164,167,170],{"name":165,"path":166,"isActive":84},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/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":168,"path":169,"isActive":84},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":171,"path":172,"isActive":84},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":174,"list":175,"isOpened":84},"HTML",[176],{"name":177,"path":178,"isActive":84},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":180,"list":181,"isOpened":84},"JavaScript",[182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317],{"name":183,"path":184,"isActive":84},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":186,"path":187,"isActive":84},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":189,"path":190,"isActive":84},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":192,"path":193,"isActive":84},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":195,"path":196,"isActive":84},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":198,"path":199,"isActive":84},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":201,"path":202,"isActive":84},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение 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":204,"path":205,"isActive":84},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":207,"path":208,"isActive":84},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":210,"path":211,"isActive":84},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":213,"path":214,"isActive":84},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":216,"path":217,"isActive":84},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":219,"path":220,"isActive":84},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":222,"path":223,"isActive":84},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":225,"path":226,"isActive":84},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":228,"path":229,"isActive":84},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":231,"path":232,"isActive":84},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":234,"path":235,"isActive":84},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":237,"path":238,"isActive":84},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":240,"path":241,"isActive":84},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":243,"path":244,"isActive":84},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":246,"path":247,"isActive":84},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":249,"path":250,"isActive":84},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":252,"path":253,"isActive":84},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":255,"path":256,"isActive":84},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":258,"path":259,"isActive":84},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":261,"path":262,"isActive":84},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":264,"path":265,"isActive":84},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":267,"path":268,"isActive":84},"Вернуть массив от 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":270,"path":271,"isActive":84},"Дана строка: '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":273,"path":274,"isActive":84},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":276,"path":277,"isActive":84},"Для каждого вложенного объекта нужно добавить свойство 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":279,"path":280,"isActive":84},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":282,"path":283,"isActive":84},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":285,"path":286,"isActive":84},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":288,"path":289,"isActive":84},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":291,"path":292,"isActive":84}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":294,"path":295,"isActive":84},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":297,"path":298,"isActive":84},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":300,"path":301,"isActive":84},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":303,"path":304,"isActive":84},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":306,"path":307,"isActive":84},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":309,"path":310,"isActive":84},"Реализовать функцию, принимающую аргументы \"*\", \"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":312,"path":313,"isActive":84},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":315,"path":316,"isActive":84},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":318,"path":319,"isActive":84},"Числа от 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":321,"list":322,"isOpened":84},"React",[323,326,329,332,335,338,341],{"name":324,"path":325,"isActive":84},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":327,"path":328,"isActive":84},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":330,"path":331,"isActive":84},"Если убрать в 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":333,"path":334,"isActive":84},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":336,"path":337,"isActive":84},"Есть код, в котором список и кнопка. Что в реальном 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":339,"path":340,"isActive":84},"Зачем нужен 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":342,"path":343,"isActive":84},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/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":345,"list":346,"isOpened":84},"Алгоритмы",[347,350],{"name":348,"path":349,"isActive":84},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":351,"path":352,"isActive":84},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":354,"list":355,"isOpened":84},"Дебаггинг",[356],{"name":357,"path":358,"isActive":84},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/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":360,"list":361,"isOpened":84},"Компьютерные сети",[362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419],{"name":363,"path":364,"isActive":84},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":366,"path":367,"isActive":84},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":369,"path":370,"isActive":84},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":372,"path":373,"isActive":84},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":375,"path":376,"isActive":84},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":378,"path":379,"isActive":84},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":381,"path":382,"isActive":84},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":384,"path":385,"isActive":84},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":387,"path":388,"isActive":84},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":390,"path":391,"isActive":84},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":393,"path":394,"isActive":84},"Чем отличаются 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":396,"path":397,"isActive":84},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/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":399,"path":400,"isActive":84},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":402,"path":403,"isActive":84},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":405,"path":406,"isActive":84},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":408,"path":409,"isActive":84},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/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":411,"path":412,"isActive":84},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":414,"path":415,"isActive":84},"Все данные зашифрованы, используется 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":417,"path":418,"isActive":84},"Есть веб-приложение. Помимо 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":420,"path":421,"isActive":84},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":423,"list":424,"isOpened":84},"Отрисовка в браузере",[425,428,431,433,436,439],{"name":426,"path":427,"isActive":84},"Что происходит, когда 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":429,"path":430,"isActive":84},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":96,"path":432,"isActive":84},"/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":434,"path":435,"isActive":84},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":437,"path":438,"isActive":84},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":440,"path":441,"isActive":84},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":443,"list":444,"isOpened":84},"Ревью кода",[445],{"name":446,"path":447,"isActive":84},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":449,"list":450,"isOpened":84},"Теория вероятности",[451,454,457],{"name":452,"path":453,"isActive":84},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/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":455,"path":456,"isActive":84},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/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":458,"path":459,"isActive":84},"Как гарантированно найти лёгкую фальшивую монету среди 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":461},[462,465,467,469,471,474,477,479,481,483,485,487,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,544,546,548,550,552,554,556,558,560,562,564,566,568,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,647,649,651,653,655,657,659,661,663,665,667,669,671,672,674,676,678,680],{"name":463,"value":464},"Теоретические задания","theoretical-tasks",{"name":219,"value":466},"what-this-code-will-return-typeof-function",{"name":118,"value":468},"where-to-begin",{"name":186,"value":470},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":472,"value":473},"Backend","backend",{"name":475,"value":476},"Frontend","frontend",{"name":183,"value":478},"prototype-what-logical-values-will-be-received-in-console-log",{"name":300,"value":480},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":291,"value":482},"find-non-repeating-numbers-in-an-array",{"name":264,"value":484},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":270,"value":486},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":488,"value":489},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":276,"value":491},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":192,"value":493},"what-value-will-the-console-output-with-object-property",{"name":195,"value":495},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":267,"value":497},"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":297,"value":499},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":303,"value":501},"determines-whether-a-word-is-a-palindrome",{"name":282,"value":503},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":309,"value":505},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":273,"value":507},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":279,"value":509},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":285,"value":511},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":318,"value":513},"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":288,"value":515},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":294,"value":517},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":198,"value":519},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":201,"value":521},"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":213,"value":523},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":216,"value":525},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":315,"value":527},"unifying-values-in-an-array",{"name":306,"value":529},"flattening-the-array",{"name":204,"value":531},"what-will-the-book-get-upper-name-method-return",{"name":312,"value":533},"string-compression",{"name":210,"value":535},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":222,"value":537},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":363,"value":539},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":369,"value":541},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":372,"value":543},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":375,"value":545},"key-differences-between-tcp-and-udp",{"name":378,"value":547},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":381,"value":549},"what-is-http-and-what-does-it-consist-of",{"name":384,"value":551},"what-are-http-headers-and-why-do-we-need-them",{"name":387,"value":553},"what-are-http-parameters",{"name":390,"value":555},"where-is-the-html-code-located-in-the-http-response-structure",{"name":177,"value":557},"what-is-html",{"name":393,"value":559},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":396,"value":561},"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":399,"value":563},"what-is-a-cookie",{"name":402,"value":565},"who-initiates-the-cookie-recording-in-the-browser",{"name":405,"value":567},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":569,"value":570},"Лайвкодинг","livecoding",{"name":189,"value":572},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":411,"value":574},"is-everything-that-goes-through-https-secure",{"name":414,"value":576},"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":417,"value":578},"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":429,"value":580},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":426,"value":582},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":96,"value":584},"what-is-blocking-the-page-rendering-in-the-browser",{"name":434,"value":586},"what-is-dom-in-a-browser-what-is-cssom",{"name":437,"value":588},"what-are-nodes-in-the-dom",{"name":440,"value":590},"what-does-cssom-consist-of",{"name":138,"value":592},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":141,"value":594},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":144,"value":596},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":147,"value":598},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":150,"value":600},"there-is-an-html-code-will-font-weight-affect-span",{"name":153,"value":602},"what-are-the-differences-between-flexbox-and-grid",{"name":156,"value":604},"do-flexbox-and-grid-replace-each-other",{"name":159,"value":606},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":122,"value":608},"tasks",{"name":225,"value":610},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":228,"value":612},"what-is-this-in-javascript",{"name":231,"value":614},"what-is-an-event-loop-and-how-does-it-work",{"name":234,"value":616},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":237,"value":618},"what-does-the-typeof-operator-show-in-javascript",{"name":240,"value":620},"what-types-of-data-exist-in-javascript",{"name":243,"value":622},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":246,"value":624},"what-will-typeof-return-for-an-array",{"name":249,"value":626},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":252,"value":628},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":255,"value":630},"what-does-typeof-return-for-new-set-in-javascript",{"name":324,"value":632},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":330,"value":634},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":333,"value":636},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":336,"value":638},"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":339,"value":640},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":357,"value":642},"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":165,"value":644},"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":168,"value":646},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":171,"value":648},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":446,"value":650},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":129,"value":652},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":132,"value":654},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":348,"value":656},"what-is-algorithmic-complexity",{"name":351,"value":658},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":258,"value":660},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":420,"value":662},"how-can-a-user-be-authorized-on-a-website",{"name":261,"value":664},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":452,"value":666},"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":455,"value":668},"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":458,"value":670},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":112,"value":113},{"name":408,"value":673},"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":366,"value":675},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":207,"value":677},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":327,"value":679},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":342,"value":681},"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":683,"copyright":686,"reportError":687,"socialNetwork":689},{"link":684,"title":685},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":688,"link":684},"Сообщить об ошибке",{"label":690,"socialNetworkList":691},"Мы в соцсетях:",[692,695,698],{"icon":19,"link":693,"title":694},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":696,"link":684,"title":697},"ic:baseline-telegram","Telegram",{"icon":699,"link":700,"title":701},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":703,"body":704},{},{"type":705,"children":706},"root",[707],{"type":708,"tag":709,"props":710,"children":711},"element","p",{},[712],{"type":713,"value":96},"text",{"data":715,"body":716},{},{"type":705,"children":717},[718],{"type":708,"tag":709,"props":719,"children":720},{},[721],{"type":713,"value":83},{"data":723,"body":724},{},{"type":705,"children":725},[726],{"type":708,"tag":709,"props":727,"children":728},{},[729,731,738,740,746],{"type":713,"value":730},"Рендеринг чаще всего блокируют ресурсы, необходимые для критического пути: таблицы стилей для CSSOM и синхронные скрипты без ",{"type":708,"tag":732,"props":733,"children":735},"code",{"className":734},[],[736],{"type":713,"value":737},"async",{"type":713,"value":739},"/",{"type":708,"tag":732,"props":741,"children":743},{"className":742},[],[744],{"type":713,"value":745},"defer",{"type":713,"value":747},", а также длительные задачи на main thread, мешающие layout/paint",{"data":749,"body":750},{},{"type":705,"children":751},[752],{"type":708,"tag":709,"props":753,"children":754},{},[755],{"type":713,"value":90},{"data":757,"body":758},{},{"type":705,"children":759},[760],{"type":708,"tag":709,"props":761,"children":762},{},[763,765,771],{"type":713,"value":764},"Рендеринг всегда блокируется шрифтами: до загрузки всех ",{"type":708,"tag":732,"props":766,"children":768},{"className":767},[],[769],{"type":713,"value":770},"@font-face",{"type":713,"value":772}," браузер не имеет права показывать элементы интерфейса, поэтому любая страница ждёт шрифты целиком",{"data":774,"body":775},{},{"type":705,"children":776},[777],{"type":708,"tag":709,"props":778,"children":779},{},[780],{"type":713,"value":94},{"data":782,"body":783},{},{"type":705,"children":784},[785,808,813,841],{"type":708,"tag":709,"props":786,"children":787},{},[788,794,796,801,802,807],{"type":708,"tag":789,"props":790,"children":791},"strong",{},[792],{"type":713,"value":793},"Правильный ответ: 2",{"type":713,"value":795}," - Рендеринг чаще всего блокируют ресурсы, необходимые для критического пути: таблицы стилей для CSSOM и синхронные скрипты без ",{"type":708,"tag":732,"props":797,"children":799},{"className":798},[],[800],{"type":713,"value":737},{"type":713,"value":739},{"type":708,"tag":732,"props":803,"children":805},{"className":804},[],[806],{"type":713,"value":745},{"type":713,"value":747},{"type":708,"tag":709,"props":809,"children":810},{},[811],{"type":713,"value":812},"Почему не остальные:",{"type":708,"tag":814,"props":815,"children":816},"ol",{},[817,823,828],{"type":708,"tag":818,"props":819,"children":820},"li",{},[821],{"type":713,"value":822},"Неверно: изображения и медиа обычно не относятся к основным «render-blocking» ресурсам; DOM строится по мере получения HTML, а картинки, как правило, догружаются параллельно и дорисовываются позже.",{"type":708,"tag":818,"props":824,"children":825},{},[826],{"type":713,"value":827},"Неверно: HTML важен для построения DOM, но CSS и JavaScript напрямую влияют на момент первой отрисовки (CSS нужен для CSSOM, а синхронный script может останавливать парсинг и задерживать рендер).",{"type":708,"tag":818,"props":829,"children":830},{},[831,833,839],{"type":713,"value":832},"Неверно как универсальное правило: шрифты способны задерживать отображение текста (например, делать текст временно невидимым или показывать запасной шрифт), но это зависит от стратегии загрузки и настройки ",{"type":708,"tag":732,"props":834,"children":836},{"className":835},[],[837],{"type":713,"value":838},"font-display",{"type":713,"value":840},", а не «всегда блокирует всю страницу».",{"type":708,"tag":709,"props":842,"children":843},{},[844],{"type":713,"value":845},"Термин «блокирует рендеринг» означает, что браузер откладывает вывод пикселей (или части вывода), чтобы не показывать «неоформленную» страницу и не создавать сильные визуальные скачки.",{"data":847,"body":848},{},{"type":705,"children":849},[850,855,860,865],{"type":708,"tag":709,"props":851,"children":852},{},[853],{"type":713,"value":854},"Критический путь рендера (Critical Rendering Path) — это цепочка шагов, которая превращает HTML/CSS/JS в пиксели на экране: построение DOM, построение CSSOM, сборка render tree, затем layout (расчёт геометрии) и paint (отрисовка).",{"type":708,"tag":709,"props":856,"children":857},{},[858],{"type":713,"value":859},"DOM строится постепенно, по мере того как парсер читает HTML, поэтому не требуется ждать «весь документ целиком», чтобы начать построение структуры. CSSOM устроен иначе: чтобы корректно вычислить итоговые стили, часто необходимо иметь уже загруженные и разобранные критические CSS, иначе возможна «вспышка» неправильного оформления.",{"type":708,"tag":709,"props":861,"children":862},{},[863],{"type":713,"value":864},"Упрощённая схема, где видны типовые места блокировок:",{"type":708,"tag":866,"props":867,"children":871},"pre",{"className":868,"code":870,"language":713},[869],"language-text","HTML bytes\n  ↓ (tokenize/parse)\nDOM (строится постепенно) ------------------------------┐\n                                                       ├→ Render Tree → Layout → Paint (пиксели)\nCSS (скачивание+парсинг) → CSSOM (нужен для стилей) ----┘\n\nJS (classic, синхронный) может:\n- остановить парсинг HTML\n- занять main thread и отложить layout/paint\n",[872],{"type":708,"tag":732,"props":873,"children":875},{"__ignoreMap":874},"",[876],{"type":713,"value":870},{"data":878,"body":879},{},{"type":705,"children":880},[881],{"type":708,"tag":709,"props":882,"children":883},{},[884],{"type":713,"value":18},{"data":886,"body":887},{},{"type":705,"children":888},[889,907],{"type":708,"tag":709,"props":890,"children":891},{},[892,894,899,900,905],{"type":713,"value":893},"Чаще всего рендеринг задерживают ресурсы критического пути: таблицы стилей (нужны для CSSOM), синхронные скрипты без ",{"type":708,"tag":732,"props":895,"children":897},{"className":896},[],[898],{"type":713,"value":737},{"type":713,"value":739},{"type":708,"tag":732,"props":901,"children":903},{"className":902},[],[904],{"type":713,"value":745},{"type":713,"value":906}," (могут остановить парсер и вмешаться в построение DOM), а также длительное выполнение кода, мешающее layout/paint.",{"type":708,"tag":709,"props":908,"children":909},{},[910],{"type":713,"value":911},"Ниже — последовательное объяснение по категориям.",{"data":913,"body":914},{},{"type":705,"children":915},[916,938,943],{"type":708,"tag":917,"props":918,"children":919},"ul",{},[920,933],{"type":708,"tag":818,"props":921,"children":922},{},[923,925,931],{"type":713,"value":924},"По умолчанию ",{"type":708,"tag":732,"props":926,"children":928},{"className":927},[],[929],{"type":713,"value":930},"\u003Clink rel=\"stylesheet\" ...>",{"type":713,"value":932}," является блокирующим для первой отрисовки, потому что без CSSOM нельзя корректно вычислить стили элементов и собрать render tree.",{"type":708,"tag":818,"props":934,"children":935},{},[936],{"type":713,"value":937},"Чем больше критических CSS подключено в начале документа, тем позже появляется первый «правильный» кадр.",{"type":708,"tag":709,"props":939,"children":940},{},[941],{"type":713,"value":942},"Пример (обычное блокирующее подключение стилей):",{"type":708,"tag":866,"props":944,"children":947},{"className":945,"code":946,"language":713},[869],"\u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n",[948],{"type":708,"tag":732,"props":949,"children":950},{"__ignoreMap":874},[951],{"type":713,"value":946},{"data":953,"body":954},{},{"type":705,"children":955},[956,982,987,996,1001,1010,1015],{"type":708,"tag":917,"props":957,"children":958},{},[959,977],{"type":708,"tag":818,"props":960,"children":961},{},[962,964,969,970,975],{"type":713,"value":963},"Classic script без ",{"type":708,"tag":732,"props":965,"children":967},{"className":966},[],[968],{"type":713,"value":737},{"type":713,"value":739},{"type":708,"tag":732,"props":971,"children":973},{"className":972},[],[974],{"type":713,"value":745},{"type":713,"value":976}," обычно останавливает парсинг HTML: браузеру требуется дождаться загрузки файла и выполнить его «сейчас», прежде чем идти дальше по разметке.",{"type":708,"tag":818,"props":978,"children":979},{},[980],{"type":713,"value":981},"Такой скрипт способен задержать и рендер, потому что меняет DOM/CSSOM и занимает main thread.",{"type":708,"tag":709,"props":983,"children":984},{},[985],{"type":713,"value":986},"Пример (парсер-блокирующий скрипт):",{"type":708,"tag":866,"props":988,"children":991},{"className":989,"code":990,"language":713},[869],"\u003Cscript src=\"/heavy.js\">\u003C/script>\n",[992],{"type":708,"tag":732,"props":993,"children":994},{"__ignoreMap":874},[995],{"type":713,"value":990},{"type":708,"tag":709,"props":997,"children":998},{},[999],{"type":713,"value":1000},"Пример (не останавливать парсер, выполнить после разбора HTML):",{"type":708,"tag":866,"props":1002,"children":1005},{"className":1003,"code":1004,"language":713},[869],"\u003Cscript src=\"/app.js\" defer>\u003C/script>\n",[1006],{"type":708,"tag":732,"props":1007,"children":1008},{"__ignoreMap":874},[1009],{"type":713,"value":1004},{"type":708,"tag":709,"props":1011,"children":1012},{},[1013],{"type":713,"value":1014},"Пояснение по атрибутам:",{"type":708,"tag":917,"props":1016,"children":1017},{},[1018,1028],{"type":708,"tag":818,"props":1019,"children":1020},{},[1021,1026],{"type":708,"tag":732,"props":1022,"children":1024},{"className":1023},[],[1025],{"type":713,"value":737},{"type":713,"value":1027},": файл загружается параллельно, выполнение происходит сразу после готовности файла; порядок относительно HTML может быть непредсказуемым, а выполнение всё равно занимает main thread.",{"type":708,"tag":818,"props":1029,"children":1030},{},[1031,1036],{"type":708,"tag":732,"props":1032,"children":1034},{"className":1033},[],[1035],{"type":713,"value":745},{"type":713,"value":1037},": файл загружается параллельно, выполнение происходит после завершения парсинга HTML; порядок нескольких defer-скриптов сохраняется.",{"data":1039,"body":1040},{},{"type":705,"children":1041},[1042],{"type":708,"tag":917,"props":1043,"children":1044},{},[1045,1050],{"type":708,"tag":818,"props":1046,"children":1047},{},[1048],{"type":713,"value":1049},"Блокировка бывает не только «сетевой» (пока ресурс скачивается), но и «вычислительной»: если JavaScript выполняется долго, то браузер не успевает рассчитать layout и выполнить paint.",{"type":708,"tag":818,"props":1051,"children":1052},{},[1053],{"type":713,"value":1054},"В результате интерфейс может долго не обновляться даже при загруженных ресурсах.",{"data":1056,"body":1057},{},{"type":705,"children":1058},[1059,1086,1098],{"type":708,"tag":917,"props":1060,"children":1061},{},[1062,1067],{"type":708,"tag":818,"props":1063,"children":1064},{},[1065],{"type":713,"value":1066},"Шрифты могут задерживать появление текста: иногда текст скрывается до загрузки шрифта (FOIT), иногда сначала показывается запасной шрифт, а затем происходит замена (FOUT).",{"type":708,"tag":818,"props":1068,"children":1069},{},[1070,1072,1077,1079,1084],{"type":713,"value":1071},"Управление поведением задаётся через ",{"type":708,"tag":732,"props":1073,"children":1075},{"className":1074},[],[1076],{"type":713,"value":838},{"type":713,"value":1078}," в ",{"type":708,"tag":732,"props":1080,"children":1082},{"className":1081},[],[1083],{"type":713,"value":770},{"type":713,"value":1085},", поэтому утверждение «страница всегда ждёт все шрифты целиком» является некорректным.",{"type":708,"tag":709,"props":1087,"children":1088},{},[1089,1091,1096],{"type":713,"value":1090},"Пример (стратегия отображения текста через ",{"type":708,"tag":732,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":713,"value":838},{"type":713,"value":1097},"):",{"type":708,"tag":866,"props":1099,"children":1102},{"className":1100,"code":1101,"language":713},[869],"@font-face {\n  font-family: \"MyFont\";\n  src: url(\"/fonts/myfont.woff2\") format(\"woff2\");\n  font-display: swap;\n}\n",[1103],{"type":708,"tag":732,"props":1104,"children":1105},{"__ignoreMap":874},[1106],{"type":713,"value":1101},{"data":1108,"body":1109},{},{"type":705,"children":1110},[1111,1124,1129,1138,1143,1151],{"type":708,"tag":917,"props":1112,"children":1113},{},[1114,1119],{"type":708,"tag":818,"props":1115,"children":1116},{},[1117],{"type":713,"value":1118},"Изображения обычно загружаются асинхронно и дорисовываются, когда готовы; это важно для полноты контента и визуального качества, но обычно не является главным «стоп‑фактором» первой отрисовки всей страницы.",{"type":708,"tag":818,"props":1120,"children":1121},{},[1122],{"type":713,"value":1123},"Возможна ситуация, когда каркас страницы уже виден, а изображения ещё нет.",{"type":708,"tag":709,"props":1125,"children":1126},{},[1127],{"type":713,"value":1128},"Пример (картинка может дорисоваться позже):",{"type":708,"tag":866,"props":1130,"children":1133},{"className":1131,"code":1132,"language":713},[869],"\u003Cimg src=\"/hero.jpg\" alt=\"Hero\">\n",[1134],{"type":708,"tag":732,"props":1135,"children":1136},{"__ignoreMap":874},[1137],{"type":713,"value":1132},{"type":708,"tag":709,"props":1139,"children":1140},{},[1141],{"type":713,"value":1142},"Таблица «ресурс → эффект»",{"type":708,"tag":917,"props":1144,"children":1145},{},[1146],{"type":708,"tag":818,"props":1147,"children":1148},{},[1149],{"type":713,"value":1150},"Для начинающего уровня полезно запомнить: CSS и синхронный JS — главные кандидаты на блокировку первой отрисовки, шрифты — частый источник проблем с текстом, длинные задачи — частая причина «пустого» или «замершего» экрана.",{"type":708,"tag":1152,"props":1153,"children":1154},"table",{},[1155,1179],{"type":708,"tag":1156,"props":1157,"children":1158},"thead",{},[1159],{"type":708,"tag":1160,"props":1161,"children":1162},"tr",{},[1163,1169,1174],{"type":708,"tag":1164,"props":1165,"children":1166},"th",{},[1167],{"type":713,"value":1168},"Что встречено в HTML",{"type":708,"tag":1164,"props":1170,"children":1171},{},[1172],{"type":713,"value":1173},"Что задерживается",{"type":708,"tag":1164,"props":1175,"children":1176},{},[1177],{"type":713,"value":1178},"Причина (упрощённо)",{"type":708,"tag":1180,"props":1181,"children":1182},"tbody",{},[1183,1206,1230,1252,1274,1304],{"type":708,"tag":1160,"props":1184,"children":1185},{},[1186,1196,1201],{"type":708,"tag":1187,"props":1188,"children":1189},"td",{},[1190],{"type":708,"tag":732,"props":1191,"children":1193},{"className":1192},[],[1194],{"type":713,"value":1195},"\u003Clink rel=\"stylesheet\" href=\"...\">",{"type":708,"tag":1187,"props":1197,"children":1198},{},[1199],{"type":713,"value":1200},"Первая корректная отрисовка",{"type":708,"tag":1187,"props":1202,"children":1203},{},[1204],{"type":713,"value":1205},"Нужен CSSOM для вычисления стилей и сборки render tree",{"type":708,"tag":1160,"props":1207,"children":1208},{},[1209,1220,1225],{"type":708,"tag":1187,"props":1210,"children":1211},{},[1212,1218],{"type":708,"tag":732,"props":1213,"children":1215},{"className":1214},[],[1216],{"type":713,"value":1217},"\u003Cscript src=\"...\">\u003C/script>",{"type":713,"value":1219}," (без async/defer)",{"type":708,"tag":1187,"props":1221,"children":1222},{},[1223],{"type":713,"value":1224},"Парсинг HTML и часто рендер",{"type":708,"tag":1187,"props":1226,"children":1227},{},[1228],{"type":713,"value":1229},"Скрипт выполняется синхронно, парсер ждёт загрузку и выполнение",{"type":708,"tag":1160,"props":1231,"children":1232},{},[1233,1242,1247],{"type":708,"tag":1187,"props":1234,"children":1235},{},[1236],{"type":708,"tag":732,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":713,"value":1241},"\u003Cscript async src=\"...\">",{"type":708,"tag":1187,"props":1243,"children":1244},{},[1245],{"type":713,"value":1246},"Может «сдвинуть» рендер по времени",{"type":708,"tag":1187,"props":1248,"children":1249},{},[1250],{"type":713,"value":1251},"Выполнение происходит при готовности, может занять main thread",{"type":708,"tag":1160,"props":1253,"children":1254},{},[1255,1264,1269],{"type":708,"tag":1187,"props":1256,"children":1257},{},[1258],{"type":708,"tag":732,"props":1259,"children":1261},{"className":1260},[],[1262],{"type":713,"value":1263},"\u003Cscript defer src=\"...\">",{"type":708,"tag":1187,"props":1265,"children":1266},{},[1267],{"type":713,"value":1268},"Рендер обычно менее задерживается",{"type":708,"tag":1187,"props":1270,"children":1271},{},[1272],{"type":713,"value":1273},"Парсинг не блокируется, выполнение после парсинга HTML",{"type":708,"tag":1160,"props":1275,"children":1276},{},[1277,1287,1292],{"type":708,"tag":1187,"props":1278,"children":1279},{},[1280,1285],{"type":708,"tag":732,"props":1281,"children":1283},{"className":1282},[],[1284],{"type":713,"value":770},{"type":713,"value":1286}," webfonts",{"type":708,"tag":1187,"props":1288,"children":1289},{},[1290],{"type":713,"value":1291},"Появление текста/перерисовка",{"type":708,"tag":1187,"props":1293,"children":1294},{},[1295,1297,1302],{"type":713,"value":1296},"Стратегия зависит от ",{"type":708,"tag":732,"props":1298,"children":1300},{"className":1299},[],[1301],{"type":713,"value":838},{"type":713,"value":1303}," (FOIT/FOUT)",{"type":708,"tag":1160,"props":1305,"children":1306},{},[1307,1316,1321],{"type":708,"tag":1187,"props":1308,"children":1309},{},[1310],{"type":708,"tag":732,"props":1311,"children":1313},{"className":1312},[],[1314],{"type":713,"value":1315},"\u003Cimg>",{"type":708,"tag":1187,"props":1317,"children":1318},{},[1319],{"type":713,"value":1320},"Обычно не блокирует первый кадр целиком",{"type":708,"tag":1187,"props":1322,"children":1323},{},[1324],{"type":713,"value":1325},"Рисуется по готовности, каркас может появиться раньше",{"data":1327,"body":1328},{},{"type":705,"children":1329},[1330],{"type":708,"tag":709,"props":1331,"children":1332},{},[1333],{"type":713,"value":1334},"Смысл «критического пути» в том, что для первого кадра важнее всего быстро получить HTML для DOM, быстро получить критические CSS для CSSOM и не занять main thread тяжёлыми синхронными задачами.",{"data":1336,"body":1337},{},{"type":705,"children":1338},[1339,1344,1349,1382,1387],{"type":708,"tag":709,"props":1340,"children":1341},{},[1342],{"type":713,"value":1343},"Для диагностики обычно достаточно инструментов разработчика браузера.",{"type":708,"tag":709,"props":1345,"children":1346},{},[1347],{"type":713,"value":1348},"Что следует проверять:",{"type":708,"tag":917,"props":1350,"children":1351},{},[1352,1365,1370],{"type":708,"tag":818,"props":1353,"children":1354},{},[1355,1357,1363],{"type":713,"value":1356},"Network: ранние запросы в head; особенно CSS и скрипты без ",{"type":708,"tag":732,"props":1358,"children":1360},{"className":1359},[],[1361],{"type":713,"value":1362},"defer/async",{"type":713,"value":1364},", затем сопоставление с водопадом загрузки.",{"type":708,"tag":818,"props":1366,"children":1367},{},[1368],{"type":713,"value":1369},"Performance: наличие длинных задач на main thread до первого отображения; часто именно они объясняют задержку layout/paint.",{"type":708,"tag":818,"props":1371,"children":1372},{},[1373,1375,1380],{"type":713,"value":1374},"Fonts: наличие FOIT/FOUT и значение ",{"type":708,"tag":732,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":713,"value":838},{"type":713,"value":1381}," в стилях.",{"type":708,"tag":709,"props":1383,"children":1384},{},[1385],{"type":713,"value":1386},"Пример базового head (упрощённо: CSS — критичен, JS — отложен):",{"type":708,"tag":866,"props":1388,"children":1391},{"className":1389,"code":1390,"language":713},[869],"\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n  \u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n\n  \u003Cscript src=\"/app.js\" defer>\u003C/script>\n\u003C/head>\n",[1392],{"type":708,"tag":732,"props":1393,"children":1394},{"__ignoreMap":874},[1395],{"type":713,"value":1390},{"data":1397,"body":1398},{},{"type":705,"children":1399},[1400],{"type":708,"tag":709,"props":1401,"children":1402},{},[1403],{"type":713,"value":74},{"data":1405,"body":1406},{},{"type":705,"children":1407},[1408],{"type":708,"tag":709,"props":1409,"children":1410},{},[1411,1413,1419,1421,1426],{"type":713,"value":1412},"Кратко: рендеринг чаще всего блокируют CSS (для построения CSSOM), синхронные скрипты без ",{"type":708,"tag":732,"props":1414,"children":1416},{"className":1415},[],[1417],{"type":713,"value":1418},"async/defer",{"type":713,"value":1420}," и длительные задачи на main thread; изображения обычно не блокируют первый кадр целиком, а шрифты влияют главным образом на момент появления текста и зависят от настроек вроде ",{"type":708,"tag":732,"props":1422,"children":1424},{"className":1423},[],[1425],{"type":713,"value":838},{"type":713,"value":1427},".",1775735659004]