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