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