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