[{"data":1,"prerenderedAt":1538},["ShallowReactive",2],{"$f7DoJn0_rc9NkrTvQlZ7K0aZb3zLNEZTrRMoE92iriD8":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":80,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":83,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":88,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":434,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":656,"mdc--3ncovo-key":676,"mdc--btfnc5-key":688,"mdc--1wmv7c-key":697,"mdc-38iytd-key":705,"mdc-14kyzt-key":731,"mdc-iy64zy-key":756,"mdc--oeaylw-key":816,"mdc--4akwm4-key":844,"mdc-fxtd03-key":873,"mdc--ltdepe-key":902,"mdc--v0kjbk-key":1008,"mdc--7gx43d-key":1038,"mdc-12dqow-key":1079,"mdc--xjt9k5-key":1271,"mdc--gwo325-key":1501},{"content":4,"quizQuestionContent":50,"type":69,"pageMeta":70},[5,9,13,16,20,23,26,30,33,37,40,44,47],{"id":6,"value":7,"isTypeH1":8},"1868","Микро- и макро-таски (tasks) в JavaScript: порядок",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4251","Теория: что и когда выполняется","theory-what-runs-when",{"id":14,"value":15,"isTypeParagraph":8},"9792","JavaScript выполняет синхронный код «до конца» (пока стек вызовов не опустеет), а всё асинхронное раскладывается по очередям и затем подхватывается циклом событий (event loop).  \nСуществует как минимум две разные очереди: очередь `task` (обычные задачи, иногда их называют «макро-тасками») и очередь `microtask` (микрозадачи).",{"id":17,"description":18,"titleAlert":19,"isTypeAlertInfo":8},"603","В спецификациях и документации чаще используется термин `task` (задача) и `microtask` (микрозадача); слово «макро-таска» — распространённое разговорное обозначение обычной `task`.",null,{"id":21,"value":22,"isTypeParagraph":8},"9793","`Task` — это то, что планируется механизмами платформы: старт выполнения скрипта, обработка событий, срабатывание `setTimeout()`/`setInterval()` и т.п.; всё это попадает в очередь задач (`task queue`).  \n`Microtask` — это короткая функция, которая выполняется после того, как завершится код, который её создал, и когда стек вызовов пуст, но при этом — до того, как управление вернётся в event loop для выбора следующей `task`.\n\nКлючевое правило порядка такое: после завершения одной `task` (например, выполнения всего «тела» скрипта или колбэка таймера) выполняются `microtask` до полного опустошения очереди `microtask`, и только потом начинается следующая `task`.  \nЕсли `microtask` во время выполнения добавляет ещё `microtask`, они также выполняются в этом же проходе до полного опустошения очереди; процесс продолжается, пока очередь не станет пустой.",{"id":24,"description":25,"titleAlert":19,"isTypeAlertWarning":8},"656","Поскольку `microtask` могут бесконечно порождать новые `microtask`, существует риск «захватить» поток выполнения и надолго не дать event loop перейти к следующей `task` (таймерам, событиям, а также действиям, связанным с обновлением интерфейса).\n",{"id":27,"value":28,"anchor":29,"isTypeH3":8},"4276","Упрощённая схема одного тика","simplified-one-tick-scheme",{"id":31,"value":32,"isTypeParagraph":8},"9794","```\n[синхронный код / одна task]\n          |\n          v\n[очистка microtask queue до пустоты]\n          |\n          v\n[взятие следующей task из task queue]\n          |\n         ...\n```\n\nВажно: «приоритет» `microtask` проявляется не потому, что они «важнее по времени», а потому что платформа обязана очистить очередь `microtask` перед тем, как брать следующую `task`.",{"id":34,"value":35,"anchor":36,"isTypeH2":8},"4252","Таблица: типичные источники задач","table-common-sources",{"id":38,"value":39,"isTypeParagraph":8},"9795","| Что планирует выполнение | Куда попадает | Примеры |\n|---|---|---|\n| Таймеры/интервалы | `task queue` | `setTimeout(fn, 0)`, `setInterval(fn, 1000)` |\n| События и их обработчики | `task queue` | обработка `click`, `message` и т.п. как отдельные задачи |\n| Реакции промисов | `microtask queue` | `Promise.resolve().then(...)`, `.catch(...)`, `.finally(...)` |\n| Явная постановка микрозадачи | `microtask queue` | `queueMicrotask(() => ...)` |\n| Некоторые Web API | `microtask queue` | например, колбэки Mutation Observer |\n",{"id":41,"value":42,"anchor":43,"isTypeH2":8},"4253","Примеры: Promise.then vs setTimeout(0)","examples-promise-vs-timeout",{"id":45,"value":46,"isTypeParagraph":8},"9796","Пример 1 — ожидается порядок: синхронный код → `microtask` → таймеры.\n\n```\nconsole.log('start');\n\nsetTimeout(() => {\n  console.log('timeout');\n}, 0);\n\nPromise.resolve().then(() => {\n  console.log('promise');\n});\n\nconsole.log('end');\n```\n\nОжидаемый порядок вывода: `start`, `end`, `promise`, `timeout`.  \nПричина: обработчик `.then(...)` попадает в очередь `microtask` и выполняется после завершения текущего синхронного кода, а `setTimeout` ставит колбэк в очередь `task` и будет взят только после очистки очереди `microtask`.\n\nПример 2 — `microtask` внутри `task`: микрозадача «вклинивается» между задачами, но не прерывает текущий синхронный участок.\n\n```\nsetTimeout(() => {\n  console.log('timer-1 start');\n\n  queueMicrotask(() => {\n    console.log('microtask inside timer-1');\n  });\n\n  console.log('timer-1 end');\n}, 0);\n\nsetTimeout(() => {\n  console.log('timer-2');\n}, 0);\n```\n\nОжидаемая логика: сначала выполняется одна timer-`task` (здесь: `timer-1 start`, затем `timer-1 end`), далее перед тем как перейти ко второй timer-`task`, очередь `microtask` очищается, поэтому строка `microtask inside timer-1` должна появиться до `timer-2`.\n\nПример 3 — опасная ситуация: `microtask` могут «голодать» задачи, если постоянно добавлять новые `microtask`.\n\n```\nlet i = 0;\n\nfunction spinMicrotasks() {\n  queueMicrotask(() => {\n    i += 1;\n    if (i \u003C 1_000_000) {\n      spinMicrotasks();\n    }\n  });\n}\n\nspinMicrotasks();\n\nsetTimeout(() => {\n  console.log('timeout after microtasks');\n}, 0);\n```\n\nСмысл примера: `setTimeout` будет ждать, пока очередь `microtask` не опустеет; если очередь долго не пустеет из‑за самопополнения, таймер (и другие задачи) могут выполняться с большой задержкой.",{"id":48,"value":49,"isTypeParagraph":8},"9797","Итого: корректное утверждение — 4; `microtask` (обработчики промисов, `queueMicrotask`) выполняются сразу после завершения текущего синхронного кода и полностью очищаются перед переходом к следующей `task` (например, `setTimeout`).",{"id":51,"options":52,"hint":66,"solution":67,"description":68},"1114",[53,57,60,63],{"id":54,"label":55,"isCorrect":56},"4584","Микро- и макро-таски — это одно и то же, различие является историческим и не влияет на порядок выполнения.\n",false,{"id":58,"label":59,"isCorrect":56},"4585","Макро-таски выполняются «внутри» микро-тасок, поэтому таймеры являются более приоритетными и блокируют промисы.",{"id":61,"label":62,"isCorrect":56},"4586","Микро-таски выполняются только после всех макро-тасок текущего тика, поэтому `setTimeout(..., 0)` всегда опережает `Promise.then(...)`.\"\"",{"id":64,"label":65,"isCorrect":8},"4587","Микро-таски (например, обработчики промисов и `queueMicrotask(...)`) выполняются сразу после завершения текущего синхронного кода и очищаются полностью перед тем, как event loop возьмет следующую макро-таску (например, `setTimeout(...)`).\n\n","Выполнение удобно делить на «одну `task`» и «очистку `microtask` после неё»; если в коде есть `Promise.then(...)` или `queueMicrotask(...)`, то они сработают перед `setTimeout(..., 0)`, потому что очередь `microtask` очищается раньше, чем event loop возьмёт следующую `task`.","**Правильный ответ: 4** - «Микро-таски (например, обработчики промисов и `queueMicrotask(...)`) выполняются сразу после завершения текущего синхронного кода и очищаются полностью перед тем, как event loop возьмет следующую макро-таску (например, `setTimeout(...)`).»","В чем разница между микро и макро-тасками в JavaScript?","quizQuestion",{"title":71,"description":72,"ogTitle":7,"ogDescription":72,"ogImageUrl":73,"canonical":19,"ogLocale":74,"ogSiteName":75,"ogImageType":76,"ogImageWidth":77,"ogImageHeight":78,"ogType":79,"ogUrl":19},"Микро- и макро-таски в JavaScript: разница","Разница microtask/task, когда выполняются Promise.then и setTimeout(0), примеры, таблицы и частые ошибки.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":81,"siteUrl":82},"GOOD WEB JOB!","https://goodwebjob.ru",[84],{"label":85,"slug":86,"to":87},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":89,"navigationSublist":97},[90,93],{"path":87,"isActive":56,"name":91,"icon":92,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":94,"isActive":8,"name":95,"icon":96,"isNavbarMobileDisabled":56},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[98,107,134,146,152,293,317,326,332,395,416,422],{"title":99,"list":100,"isOpened":56},"Bash",[101,104],{"name":102,"path":103,"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":105,"path":106,"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":108,"list":109,"isOpened":56},"CSS",[110,113,116,119,122,125,128,131],{"name":111,"path":112,"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":114,"path":115,"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":117,"path":118,"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":120,"path":121,"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":123,"path":124,"isActive":56},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":126,"path":127,"isActive":56},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":129,"path":130,"isActive":56},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":132,"path":133,"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":135,"list":136,"isOpened":56},"Git",[137,140,143],{"name":138,"path":139,"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":141,"path":142,"isActive":56},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":144,"path":145,"isActive":56},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":147,"list":148,"isOpened":56},"HTML",[149],{"name":150,"path":151,"isActive":56},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":153,"list":154,"isOpened":56},"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":56},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":159,"path":160,"isActive":56},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":162,"path":163,"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":165,"path":166,"isActive":56},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":168,"path":169,"isActive":56},"Что выведется в 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":56},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":174,"path":175,"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":177,"path":178,"isActive":56},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":180,"path":181,"isActive":56},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":183,"path":184,"isActive":56},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/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":56},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/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":56},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":192,"path":193,"isActive":56},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":195,"path":196,"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":198,"path":199,"isActive":56},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":201,"path":202,"isActive":56},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":204,"path":205,"isActive":56},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":207,"path":208,"isActive":56},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":210,"path":211,"isActive":56},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":213,"path":214,"isActive":56},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":216,"path":217,"isActive":56},"Какую структуру использовать для хранения упорядоченного списка строк в 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":56},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":222,"path":223,"isActive":56},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":225,"path":226,"isActive":56},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":228,"path":229,"isActive":56},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":231,"path":232,"isActive":56},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":234,"path":235,"isActive":56},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":237,"path":238,"isActive":56},"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":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":243,"path":244,"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":246,"path":247,"isActive":56},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":249,"path":250,"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":252,"path":253,"isActive":56},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":255,"path":256,"isActive":56},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":258,"path":259,"isActive":56},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/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":56},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/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":56}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":267,"path":268,"isActive":56},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":270,"path":271,"isActive":56},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":273,"path":274,"isActive":56},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/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":56},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":279,"path":280,"isActive":56},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":282,"path":283,"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":285,"path":286,"isActive":56},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":288,"path":289,"isActive":56},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":291,"path":292,"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":294,"list":295,"isOpened":56},"React",[296,299,302,305,308,311,314],{"name":297,"path":298,"isActive":56},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":300,"path":301,"isActive":56},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":303,"path":304,"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":306,"path":307,"isActive":56},"Есть блок кода. Что в реальном 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":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":312,"path":313,"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":315,"path":316,"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":318,"list":319,"isOpened":56},"Алгоритмы",[320,323],{"name":321,"path":322,"isActive":56},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":324,"path":325,"isActive":56},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":327,"list":328,"isOpened":56},"Дебаггинг",[329],{"name":330,"path":331,"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":333,"list":334,"isOpened":56},"Компьютерные сети",[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":56},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":339,"path":340,"isActive":56},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":342,"path":343,"isActive":56},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":345,"path":346,"isActive":56},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":348,"path":349,"isActive":56},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":351,"path":352,"isActive":56},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":354,"path":355,"isActive":56},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":357,"path":358,"isActive":56},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":360,"path":361,"isActive":56},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":363,"path":364,"isActive":56},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":366,"path":367,"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":369,"path":370,"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":372,"path":373,"isActive":56},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":375,"path":376,"isActive":56},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":378,"path":379,"isActive":56},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":381,"path":382,"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":384,"path":385,"isActive":56},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":387,"path":388,"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":390,"path":391,"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":393,"path":394,"isActive":56},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":396,"list":397,"isOpened":56},"Отрисовка в браузере",[398,401,404,407,410,413],{"name":399,"path":400,"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":402,"path":403,"isActive":56},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":405,"path":406,"isActive":56},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":408,"path":409,"isActive":56},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":411,"path":412,"isActive":56},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":414,"path":415,"isActive":56},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":417,"list":418,"isOpened":56},"Ревью кода",[419],{"name":420,"path":421,"isActive":56},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":423,"list":424,"isOpened":56},"Теория вероятности",[425,428,431],{"name":426,"path":427,"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":429,"path":430,"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":432,"path":433,"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":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":91,"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":111,"value":566},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":114,"value":568},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":117,"value":570},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":120,"value":572},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":123,"value":574},"there-is-an-html-code-will-font-weight-affect-span",{"name":126,"value":576},"what-are-the-differences-between-flexbox-and-grid",{"name":129,"value":578},"do-flexbox-and-grid-replace-each-other",{"name":132,"value":580},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":95,"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":102,"value":626},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":105,"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":85,"value":86},{"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":19,"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":68},"text",{"data":689,"body":690},{},{"type":679,"children":691},[692],{"type":682,"tag":683,"props":693,"children":694},{},[695],{"type":687,"value":696},"Микро- и макро-таски — это одно и то же, различие является историческим и не влияет на порядок выполнения.",{"data":698,"body":699},{},{"type":679,"children":700},[701],{"type":682,"tag":683,"props":702,"children":703},{},[704],{"type":687,"value":59},{"data":706,"body":707},{},{"type":679,"children":708},[709],{"type":682,"tag":683,"props":710,"children":711},{},[712,714,721,723,729],{"type":687,"value":713},"Микро-таски выполняются только после всех макро-тасок текущего тика, поэтому ",{"type":682,"tag":715,"props":716,"children":718},"code",{"className":717},[],[719],{"type":687,"value":720},"setTimeout(..., 0)",{"type":687,"value":722}," всегда опережает ",{"type":682,"tag":715,"props":724,"children":726},{"className":725},[],[727],{"type":687,"value":728},"Promise.then(...)",{"type":687,"value":730},".\"\"",{"data":732,"body":733},{},{"type":679,"children":734},[735],{"type":682,"tag":683,"props":736,"children":737},{},[738,740,746,748,754],{"type":687,"value":739},"Микро-таски (например, обработчики промисов и ",{"type":682,"tag":715,"props":741,"children":743},{"className":742},[],[744],{"type":687,"value":745},"queueMicrotask(...)",{"type":687,"value":747},") выполняются сразу после завершения текущего синхронного кода и очищаются полностью перед тем, как event loop возьмет следующую макро-таску (например, ",{"type":682,"tag":715,"props":749,"children":751},{"className":750},[],[752],{"type":687,"value":753},"setTimeout(...)",{"type":687,"value":755},").",{"data":757,"body":758},{},{"type":679,"children":759},[760],{"type":682,"tag":683,"props":761,"children":762},{},[763,765,771,773,779,781,786,788,793,795,800,802,807,809,814],{"type":687,"value":764},"Выполнение удобно делить на «одну ",{"type":682,"tag":715,"props":766,"children":768},{"className":767},[],[769],{"type":687,"value":770},"task",{"type":687,"value":772},"» и «очистку ",{"type":682,"tag":715,"props":774,"children":776},{"className":775},[],[777],{"type":687,"value":778},"microtask",{"type":687,"value":780}," после неё»; если в коде есть ",{"type":682,"tag":715,"props":782,"children":784},{"className":783},[],[785],{"type":687,"value":728},{"type":687,"value":787}," или ",{"type":682,"tag":715,"props":789,"children":791},{"className":790},[],[792],{"type":687,"value":745},{"type":687,"value":794},", то они сработают перед ",{"type":682,"tag":715,"props":796,"children":798},{"className":797},[],[799],{"type":687,"value":720},{"type":687,"value":801},", потому что очередь ",{"type":682,"tag":715,"props":803,"children":805},{"className":804},[],[806],{"type":687,"value":778},{"type":687,"value":808}," очищается раньше, чем event loop возьмёт следующую ",{"type":682,"tag":715,"props":810,"children":812},{"className":811},[],[813],{"type":687,"value":770},{"type":687,"value":815},".",{"data":817,"body":818},{},{"type":679,"children":819},[820],{"type":682,"tag":683,"props":821,"children":822},{},[823,829,831,836,837,842],{"type":682,"tag":824,"props":825,"children":826},"strong",{},[827],{"type":687,"value":828},"Правильный ответ: 4",{"type":687,"value":830}," - «Микро-таски (например, обработчики промисов и ",{"type":682,"tag":715,"props":832,"children":834},{"className":833},[],[835],{"type":687,"value":745},{"type":687,"value":747},{"type":682,"tag":715,"props":838,"children":840},{"className":839},[],[841],{"type":687,"value":753},{"type":687,"value":843},").»",{"data":845,"body":846},{},{"type":679,"children":847},[848],{"type":682,"tag":683,"props":849,"children":850},{},[851,853,857,859,864,866,871],{"type":687,"value":852},"JavaScript выполняет синхронный код «до конца» (пока стек вызовов не опустеет), а всё асинхронное раскладывается по очередям и затем подхватывается циклом событий (event loop).",{"type":682,"tag":854,"props":855,"children":856},"br",{},[],{"type":687,"value":858},"\nСуществует как минимум две разные очереди: очередь ",{"type":682,"tag":715,"props":860,"children":862},{"className":861},[],[863],{"type":687,"value":770},{"type":687,"value":865}," (обычные задачи, иногда их называют «макро-тасками») и очередь ",{"type":682,"tag":715,"props":867,"children":869},{"className":868},[],[870],{"type":687,"value":778},{"type":687,"value":872}," (микрозадачи).",{"data":874,"body":875},{},{"type":679,"children":876},[877],{"type":682,"tag":683,"props":878,"children":879},{},[880,882,887,889,894,896,901],{"type":687,"value":881},"В спецификациях и документации чаще используется термин ",{"type":682,"tag":715,"props":883,"children":885},{"className":884},[],[886],{"type":687,"value":770},{"type":687,"value":888}," (задача) и ",{"type":682,"tag":715,"props":890,"children":892},{"className":891},[],[893],{"type":687,"value":778},{"type":687,"value":895}," (микрозадача); слово «макро-таска» — распространённое разговорное обозначение обычной ",{"type":682,"tag":715,"props":897,"children":899},{"className":898},[],[900],{"type":687,"value":770},{"type":687,"value":815},{"data":903,"body":904},{},{"type":679,"children":905},[906,957],{"type":682,"tag":683,"props":907,"children":908},{},[909,915,917,923,925,931,933,939,940,943,949,951,956],{"type":682,"tag":715,"props":910,"children":912},{"className":911},[],[913],{"type":687,"value":914},"Task",{"type":687,"value":916}," — это то, что планируется механизмами платформы: старт выполнения скрипта, обработка событий, срабатывание ",{"type":682,"tag":715,"props":918,"children":920},{"className":919},[],[921],{"type":687,"value":922},"setTimeout()",{"type":687,"value":924},"/",{"type":682,"tag":715,"props":926,"children":928},{"className":927},[],[929],{"type":687,"value":930},"setInterval()",{"type":687,"value":932}," и т.п.; всё это попадает в очередь задач (",{"type":682,"tag":715,"props":934,"children":936},{"className":935},[],[937],{"type":687,"value":938},"task queue",{"type":687,"value":755},{"type":682,"tag":854,"props":941,"children":942},{},[],{"type":682,"tag":715,"props":944,"children":946},{"className":945},[],[947],{"type":687,"value":948},"Microtask",{"type":687,"value":950}," — это короткая функция, которая выполняется после того, как завершится код, который её создал, и когда стек вызовов пуст, но при этом — до того, как управление вернётся в event loop для выбора следующей ",{"type":682,"tag":715,"props":952,"children":954},{"className":953},[],[955],{"type":687,"value":770},{"type":687,"value":815},{"type":682,"tag":683,"props":958,"children":959},{},[960,962,967,969,974,976,981,983,988,989,992,994,999,1001,1006],{"type":687,"value":961},"Ключевое правило порядка такое: после завершения одной ",{"type":682,"tag":715,"props":963,"children":965},{"className":964},[],[966],{"type":687,"value":770},{"type":687,"value":968}," (например, выполнения всего «тела» скрипта или колбэка таймера) выполняются ",{"type":682,"tag":715,"props":970,"children":972},{"className":971},[],[973],{"type":687,"value":778},{"type":687,"value":975}," до полного опустошения очереди ",{"type":682,"tag":715,"props":977,"children":979},{"className":978},[],[980],{"type":687,"value":778},{"type":687,"value":982},", и только потом начинается следующая ",{"type":682,"tag":715,"props":984,"children":986},{"className":985},[],[987],{"type":687,"value":770},{"type":687,"value":815},{"type":682,"tag":854,"props":990,"children":991},{},[],{"type":687,"value":993},"\nЕсли ",{"type":682,"tag":715,"props":995,"children":997},{"className":996},[],[998],{"type":687,"value":778},{"type":687,"value":1000}," во время выполнения добавляет ещё ",{"type":682,"tag":715,"props":1002,"children":1004},{"className":1003},[],[1005],{"type":687,"value":778},{"type":687,"value":1007},", они также выполняются в этом же проходе до полного опустошения очереди; процесс продолжается, пока очередь не станет пустой.",{"data":1009,"body":1010},{},{"type":679,"children":1011},[1012],{"type":682,"tag":683,"props":1013,"children":1014},{},[1015,1017,1022,1024,1029,1031,1036],{"type":687,"value":1016},"Поскольку ",{"type":682,"tag":715,"props":1018,"children":1020},{"className":1019},[],[1021],{"type":687,"value":778},{"type":687,"value":1023}," могут бесконечно порождать новые ",{"type":682,"tag":715,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":687,"value":778},{"type":687,"value":1030},", существует риск «захватить» поток выполнения и надолго не дать event loop перейти к следующей ",{"type":682,"tag":715,"props":1032,"children":1034},{"className":1033},[],[1035],{"type":687,"value":770},{"type":687,"value":1037}," (таймерам, событиям, а также действиям, связанным с обновлением интерфейса).",{"data":1039,"body":1040},{},{"type":679,"children":1041},[1042,1054],{"type":682,"tag":1043,"props":1044,"children":1048},"pre",{"className":1045,"code":1047,"language":687},[1046],"language-text","[синхронный код / одна task]\n          |\n          v\n[очистка microtask queue до пустоты]\n          |\n          v\n[взятие следующей task из task queue]\n          |\n         ...\n",[1049],{"type":682,"tag":715,"props":1050,"children":1052},{"__ignoreMap":1051},"",[1053],{"type":687,"value":1047},{"type":682,"tag":683,"props":1055,"children":1056},{},[1057,1059,1064,1066,1071,1073,1078],{"type":687,"value":1058},"Важно: «приоритет» ",{"type":682,"tag":715,"props":1060,"children":1062},{"className":1061},[],[1063],{"type":687,"value":778},{"type":687,"value":1065}," проявляется не потому, что они «важнее по времени», а потому что платформа обязана очистить очередь ",{"type":682,"tag":715,"props":1067,"children":1069},{"className":1068},[],[1070],{"type":687,"value":778},{"type":687,"value":1072}," перед тем, как брать следующую ",{"type":682,"tag":715,"props":1074,"children":1076},{"className":1075},[],[1077],{"type":687,"value":770},{"type":687,"value":815},{"data":1080,"body":1081},{},{"type":679,"children":1082},[1083],{"type":682,"tag":1084,"props":1085,"children":1086},"table",{},[1087,1111],{"type":682,"tag":1088,"props":1089,"children":1090},"thead",{},[1091],{"type":682,"tag":1092,"props":1093,"children":1094},"tr",{},[1095,1101,1106],{"type":682,"tag":1096,"props":1097,"children":1098},"th",{},[1099],{"type":687,"value":1100},"Что планирует выполнение",{"type":682,"tag":1096,"props":1102,"children":1103},{},[1104],{"type":687,"value":1105},"Куда попадает",{"type":682,"tag":1096,"props":1107,"children":1108},{},[1109],{"type":687,"value":1110},"Примеры",{"type":682,"tag":1112,"props":1113,"children":1114},"tbody",{},[1115,1149,1185,1225,1250],{"type":682,"tag":1092,"props":1116,"children":1117},{},[1118,1124,1132],{"type":682,"tag":1119,"props":1120,"children":1121},"td",{},[1122],{"type":687,"value":1123},"Таймеры/интервалы",{"type":682,"tag":1119,"props":1125,"children":1126},{},[1127],{"type":682,"tag":715,"props":1128,"children":1130},{"className":1129},[],[1131],{"type":687,"value":938},{"type":682,"tag":1119,"props":1133,"children":1134},{},[1135,1141,1143],{"type":682,"tag":715,"props":1136,"children":1138},{"className":1137},[],[1139],{"type":687,"value":1140},"setTimeout(fn, 0)",{"type":687,"value":1142},", ",{"type":682,"tag":715,"props":1144,"children":1146},{"className":1145},[],[1147],{"type":687,"value":1148},"setInterval(fn, 1000)",{"type":682,"tag":1092,"props":1150,"children":1151},{},[1152,1157,1165],{"type":682,"tag":1119,"props":1153,"children":1154},{},[1155],{"type":687,"value":1156},"События и их обработчики",{"type":682,"tag":1119,"props":1158,"children":1159},{},[1160],{"type":682,"tag":715,"props":1161,"children":1163},{"className":1162},[],[1164],{"type":687,"value":938},{"type":682,"tag":1119,"props":1166,"children":1167},{},[1168,1170,1176,1177,1183],{"type":687,"value":1169},"обработка ",{"type":682,"tag":715,"props":1171,"children":1173},{"className":1172},[],[1174],{"type":687,"value":1175},"click",{"type":687,"value":1142},{"type":682,"tag":715,"props":1178,"children":1180},{"className":1179},[],[1181],{"type":687,"value":1182},"message",{"type":687,"value":1184}," и т.п. как отдельные задачи",{"type":682,"tag":1092,"props":1186,"children":1187},{},[1188,1193,1202],{"type":682,"tag":1119,"props":1189,"children":1190},{},[1191],{"type":687,"value":1192},"Реакции промисов",{"type":682,"tag":1119,"props":1194,"children":1195},{},[1196],{"type":682,"tag":715,"props":1197,"children":1199},{"className":1198},[],[1200],{"type":687,"value":1201},"microtask queue",{"type":682,"tag":1119,"props":1203,"children":1204},{},[1205,1211,1212,1218,1219],{"type":682,"tag":715,"props":1206,"children":1208},{"className":1207},[],[1209],{"type":687,"value":1210},"Promise.resolve().then(...)",{"type":687,"value":1142},{"type":682,"tag":715,"props":1213,"children":1215},{"className":1214},[],[1216],{"type":687,"value":1217},".catch(...)",{"type":687,"value":1142},{"type":682,"tag":715,"props":1220,"children":1222},{"className":1221},[],[1223],{"type":687,"value":1224},".finally(...)",{"type":682,"tag":1092,"props":1226,"children":1227},{},[1228,1233,1241],{"type":682,"tag":1119,"props":1229,"children":1230},{},[1231],{"type":687,"value":1232},"Явная постановка микрозадачи",{"type":682,"tag":1119,"props":1234,"children":1235},{},[1236],{"type":682,"tag":715,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":687,"value":1201},{"type":682,"tag":1119,"props":1242,"children":1243},{},[1244],{"type":682,"tag":715,"props":1245,"children":1247},{"className":1246},[],[1248],{"type":687,"value":1249},"queueMicrotask(() => ...)",{"type":682,"tag":1092,"props":1251,"children":1252},{},[1253,1258,1266],{"type":682,"tag":1119,"props":1254,"children":1255},{},[1256],{"type":687,"value":1257},"Некоторые Web API",{"type":682,"tag":1119,"props":1259,"children":1260},{},[1261],{"type":682,"tag":715,"props":1262,"children":1264},{"className":1263},[],[1265],{"type":687,"value":1201},{"type":682,"tag":1119,"props":1267,"children":1268},{},[1269],{"type":687,"value":1270},"например, колбэки Mutation Observer",{"data":1272,"body":1273},{},{"type":679,"children":1274},[1275,1287,1296,1370,1389,1398,1455,1473,1482],{"type":682,"tag":683,"props":1276,"children":1277},{},[1278,1280,1285],{"type":687,"value":1279},"Пример 1 — ожидается порядок: синхронный код → ",{"type":682,"tag":715,"props":1281,"children":1283},{"className":1282},[],[1284],{"type":687,"value":778},{"type":687,"value":1286}," → таймеры.",{"type":682,"tag":1043,"props":1288,"children":1291},{"className":1289,"code":1290,"language":687},[1046],"console.log('start');\n\nsetTimeout(() => {\n  console.log('timeout');\n}, 0);\n\nPromise.resolve().then(() => {\n  console.log('promise');\n});\n\nconsole.log('end');\n",[1292],{"type":682,"tag":715,"props":1293,"children":1294},{"__ignoreMap":1051},[1295],{"type":687,"value":1290},{"type":682,"tag":683,"props":1297,"children":1298},{},[1299,1301,1307,1308,1314,1315,1321,1322,1328,1329,1332,1334,1340,1342,1347,1349,1355,1357,1362,1364,1369],{"type":687,"value":1300},"Ожидаемый порядок вывода: ",{"type":682,"tag":715,"props":1302,"children":1304},{"className":1303},[],[1305],{"type":687,"value":1306},"start",{"type":687,"value":1142},{"type":682,"tag":715,"props":1309,"children":1311},{"className":1310},[],[1312],{"type":687,"value":1313},"end",{"type":687,"value":1142},{"type":682,"tag":715,"props":1316,"children":1318},{"className":1317},[],[1319],{"type":687,"value":1320},"promise",{"type":687,"value":1142},{"type":682,"tag":715,"props":1323,"children":1325},{"className":1324},[],[1326],{"type":687,"value":1327},"timeout",{"type":687,"value":815},{"type":682,"tag":854,"props":1330,"children":1331},{},[],{"type":687,"value":1333},"\nПричина: обработчик ",{"type":682,"tag":715,"props":1335,"children":1337},{"className":1336},[],[1338],{"type":687,"value":1339},".then(...)",{"type":687,"value":1341}," попадает в очередь ",{"type":682,"tag":715,"props":1343,"children":1345},{"className":1344},[],[1346],{"type":687,"value":778},{"type":687,"value":1348}," и выполняется после завершения текущего синхронного кода, а ",{"type":682,"tag":715,"props":1350,"children":1352},{"className":1351},[],[1353],{"type":687,"value":1354},"setTimeout",{"type":687,"value":1356}," ставит колбэк в очередь ",{"type":682,"tag":715,"props":1358,"children":1360},{"className":1359},[],[1361],{"type":687,"value":770},{"type":687,"value":1363}," и будет взят только после очистки очереди ",{"type":682,"tag":715,"props":1365,"children":1367},{"className":1366},[],[1368],{"type":687,"value":778},{"type":687,"value":815},{"type":682,"tag":683,"props":1371,"children":1372},{},[1373,1375,1380,1382,1387],{"type":687,"value":1374},"Пример 2 — ",{"type":682,"tag":715,"props":1376,"children":1378},{"className":1377},[],[1379],{"type":687,"value":778},{"type":687,"value":1381}," внутри ",{"type":682,"tag":715,"props":1383,"children":1385},{"className":1384},[],[1386],{"type":687,"value":770},{"type":687,"value":1388},": микрозадача «вклинивается» между задачами, но не прерывает текущий синхронный участок.",{"type":682,"tag":1043,"props":1390,"children":1393},{"className":1391,"code":1392,"language":687},[1046],"setTimeout(() => {\n  console.log('timer-1 start');\n\n  queueMicrotask(() => {\n    console.log('microtask inside timer-1');\n  });\n\n  console.log('timer-1 end');\n}, 0);\n\nsetTimeout(() => {\n  console.log('timer-2');\n}, 0);\n",[1394],{"type":682,"tag":715,"props":1395,"children":1396},{"__ignoreMap":1051},[1397],{"type":687,"value":1392},{"type":682,"tag":683,"props":1399,"children":1400},{},[1401,1403,1408,1410,1416,1418,1424,1426,1431,1433,1438,1440,1446,1448,1454],{"type":687,"value":1402},"Ожидаемая логика: сначала выполняется одна timer-",{"type":682,"tag":715,"props":1404,"children":1406},{"className":1405},[],[1407],{"type":687,"value":770},{"type":687,"value":1409}," (здесь: ",{"type":682,"tag":715,"props":1411,"children":1413},{"className":1412},[],[1414],{"type":687,"value":1415},"timer-1 start",{"type":687,"value":1417},", затем ",{"type":682,"tag":715,"props":1419,"children":1421},{"className":1420},[],[1422],{"type":687,"value":1423},"timer-1 end",{"type":687,"value":1425},"), далее перед тем как перейти ко второй timer-",{"type":682,"tag":715,"props":1427,"children":1429},{"className":1428},[],[1430],{"type":687,"value":770},{"type":687,"value":1432},", очередь ",{"type":682,"tag":715,"props":1434,"children":1436},{"className":1435},[],[1437],{"type":687,"value":778},{"type":687,"value":1439}," очищается, поэтому строка ",{"type":682,"tag":715,"props":1441,"children":1443},{"className":1442},[],[1444],{"type":687,"value":1445},"microtask inside timer-1",{"type":687,"value":1447}," должна появиться до ",{"type":682,"tag":715,"props":1449,"children":1451},{"className":1450},[],[1452],{"type":687,"value":1453},"timer-2",{"type":687,"value":815},{"type":682,"tag":683,"props":1456,"children":1457},{},[1458,1460,1465,1467,1472],{"type":687,"value":1459},"Пример 3 — опасная ситуация: ",{"type":682,"tag":715,"props":1461,"children":1463},{"className":1462},[],[1464],{"type":687,"value":778},{"type":687,"value":1466}," могут «голодать» задачи, если постоянно добавлять новые ",{"type":682,"tag":715,"props":1468,"children":1470},{"className":1469},[],[1471],{"type":687,"value":778},{"type":687,"value":815},{"type":682,"tag":1043,"props":1474,"children":1477},{"className":1475,"code":1476,"language":687},[1046],"let i = 0;\n\nfunction spinMicrotasks() {\n  queueMicrotask(() => {\n    i += 1;\n    if (i \u003C 1_000_000) {\n      spinMicrotasks();\n    }\n  });\n}\n\nspinMicrotasks();\n\nsetTimeout(() => {\n  console.log('timeout after microtasks');\n}, 0);\n",[1478],{"type":682,"tag":715,"props":1479,"children":1480},{"__ignoreMap":1051},[1481],{"type":687,"value":1476},{"type":682,"tag":683,"props":1483,"children":1484},{},[1485,1487,1492,1494,1499],{"type":687,"value":1486},"Смысл примера: ",{"type":682,"tag":715,"props":1488,"children":1490},{"className":1489},[],[1491],{"type":687,"value":1354},{"type":687,"value":1493}," будет ждать, пока очередь ",{"type":682,"tag":715,"props":1495,"children":1497},{"className":1496},[],[1498],{"type":687,"value":778},{"type":687,"value":1500}," не опустеет; если очередь долго не пустеет из‑за самопополнения, таймер (и другие задачи) могут выполняться с большой задержкой.",{"data":1502,"body":1503},{},{"type":679,"children":1504},[1505],{"type":682,"tag":683,"props":1506,"children":1507},{},[1508,1510,1515,1517,1523,1525,1530,1532,1537],{"type":687,"value":1509},"Итого: корректное утверждение — 4; ",{"type":682,"tag":715,"props":1511,"children":1513},{"className":1512},[],[1514],{"type":687,"value":778},{"type":687,"value":1516}," (обработчики промисов, ",{"type":682,"tag":715,"props":1518,"children":1520},{"className":1519},[],[1521],{"type":687,"value":1522},"queueMicrotask",{"type":687,"value":1524},") выполняются сразу после завершения текущего синхронного кода и полностью очищаются перед переходом к следующей ",{"type":682,"tag":715,"props":1526,"children":1528},{"className":1527},[],[1529],{"type":687,"value":770},{"type":687,"value":1531}," (например, ",{"type":682,"tag":715,"props":1533,"children":1535},{"className":1534},[],[1536],{"type":687,"value":1354},{"type":687,"value":755},1775735658916]