Классическое интервью: Цикл событий

JavaScript опрос

Добро пожаловать в библиотеку документов jsliang — репозиторий, который обновлялся на протяжении всей жизни, ознакомьтесь с другими техническими, финансовыми и фитнес-статьями:GitHub.com/l ian Jun Ron…

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
Три цикла событий
Четыре цикла событий браузера
 4.1 Пример 1
 4.2 Пример 2
 4.3 Пример 3
 4.4 Резюме
Пять циклов событий Node.js
 5.1 setTimeout & setImmediate
 5.2 process.nextTick()
 5.3 Пример 1
 5.4 Пример 2
 5.5 Резюме
Шесть резюме
7 ссылок

2 Предисловие

Назад к содержанию

Привет друзья, доброе утро, добрый полдень, добрый день, добрый вечер, доброе утро~

Сталкивались ли вы когда-нибудь с таким сомнением в своей повседневной работе:

  • Сомнение 1: почему этот код не работает так, как я хочу? почему бы не вывести1 2 3?
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
// console:
// 3
// 3
// 3
  • Сомнение 2: Почему этот код работает не так, как я хочу? почему бы не вывестиjsliang?
let name;

setTimeout(() => {
  name = '梁峻荣';
  console.log(name);
}, 1000);

if (name) {
  name = 'jsliang';
  console.log(name);
}
// console: '梁峻荣'

У ребенка нет матери, это долгая история.

Так как это длинная история,jsliangМожно только попытаться сделать длинную историю короткой:

  • Эта статья начинается с происхождения цикла событий. Обсуждая цикл событий в среде браузера и цикл событий в среде Node.js, вы решите проблемы, вызванные работой, и расширите свои знания на собеседовании.

С учетом сказанного, мы также можем разделить статью на:

  • Глава 3 Цикл событий: Объясните причину цикла событий и демонстрацию кода.
  • Глава 4. Цикл событий браузера: Устраните путаницу на работе и расширьте необходимые знания на собеседовании.
  • Глава 5 Цикл событий Node.js: дальнейшее изучение различий между циклами событий в браузерах и Node.js.

Хорошо пойдем!

Три цикла событий

Назад к содержанию

  • В: Что такое цикл событий и зачем мне нужен цикл событий?

отвечать:

первый, нам нужно знать: JavaScript является однопоточным.

Однопоточность означает, что все задачи должны быть поставлены в очередь, а следующая задача будет выполняться, когда завершится предыдущая задача.

ПредположениеjsliangКак и JavaScript, он может выполнять только одно действие за раз, поэтому, вероятно, это показано на следующем рисунке.

ЭтотОсновной поток считывает события выполнения из «очереди задач», процесс, который постоянно повторяется., называетсяЦикл событий.

потом, если первая задача занимает много времени, а вторая задача должна ждать, тогда мы должны выполнить некоторую специальную обработку для этой ситуации, в конце концов, во многих случаях мы не ожидаем, что она будет выполнена именно так.

Таким образом, для координации событий, взаимодействия с пользователем, сценария, рендеринга, работы в сети, работы в сети и т. д. пользовательские агенты должны использовать циклы событий.

Таким образом, пониманиеЦикл событий браузераа такжеNode.js Event LoopВ этом случае мы можем понять процесс его выполнения.

Через их собственное понимание, чтобы иметь дело с некоторыми из более сложных проблем.

Для того, чтобы углубить впечатление о маленьких друзьях, вы можете увидеть картинку ниже:

jsliangВ повседневной жизни вынужденно добавляется «быть избитым Дудоумой» (ерунда, Дудо такой милый, как можно победить Дудоу).

Конечно, порядок битья не обязательно в спину, может еще через два боя, после "сна" "бит Дудумой".

Благодаря этому объяснению друзья должны знать, почемуЦикл событий браузераа такжеNode.js Event Loop.

Подожди, ты только что сказалЦикл событий браузераа такжеNode.js Event Loop, почему все дело в JavaScript, а не в этих двух частях?

  • Проще говоря:Ваша страница отображается в браузере, а ваши данные обрабатываются в фоновом режиме (подумайте о Node.js как о внутреннем языке, таком как PHP и Java). Есть ли разница между ними? !

То, что вы сказали, это то же самое, что вы не сказали, почему вы не объяснили!

Хорошо, если быть более конкретным:

  • Node.js: Цикл событий Node.js основан на libuv. libuv реализовал цикл событий.
  • браузер: Цикл событий браузера основан наСпецификация HTML5из. Спецификация HTML5 определяет только модель цикла событий в браузере, а конкретная реализация остается на усмотрение производителя браузера.

libuv — это многоплатформенная библиотека поддержки, в основном используемая для асинхронного ввода-вывода. Первоначально он был разработан для Node.js и сейчас используется Luvit, Julia, pyuv и другими фреймворками.Github — репозиторий libuv

Внезапно все иначе!

Итак, мы должны различать эти два цикла событий, это разные вещи~

наконец, давайте решим два вопроса в начале, почему так, и есть ли способ это решить?

  • Сомнение 1: почему этот код не работает так, как я хочу? почему бы не вывести1 2 3?
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
// console:
// 3
// 3
// 3

Этот вопрос является обычным вопросом интервью. Это очень интересный вопрос. Он может не только позволить интервьюеру пообщаться с вами в цикле событий, но и пообщаться с вами.var let const.

с этой целью,jsliangСпециально записал GIF, надеясь помочь маленьким партнерам глубже изучить этот механизм:

Программное обеспечение — VS Code, а метод отладки — Node.js.

Пожалуйста, смотрите GIF внимательно:

  1. в исполненииforПри обходе сначала выполняется иsetTimeoutтот же уровеньconsole, а затем выполните доsetTimeout, пропущено (поместите куда-нибудь)setTimeout, который, в свою очередь, печатает0, 1, 2.
  2. Шаг 1 пропущен три разаsetTimeoutначать выполнять, но на этот разiзначение после предыдущегоi++позже он стал3(forПосле прерывания циклаiуже3). Итак, печатаем по очереди3 3 3.

То есть иди сначала нормальноfor, а потом столкнутьсяsetTimeoutкогда будетsetTimeoutОни были размещены в разных измерениях по очереди и, наконец, закончены.for, а затем преобразоватьsetTimeoutОтпустите и выведите числа по очереди.

Этот механизм выполнения — влияние Event Loop, и я вдруг понял, что дров нет~

Прелесть этого вопроса в том, что он не только спрашивает вас о части цикла событий, но и проверяет ваше понимание ES6.letи ES5varОтличие, потому что у него есть решение, которое используется для ES6.let.

Прежде чем решать эту проблему, рассмотрите следующий вывод:

for (var i = 0; i < 3; i++) {

}
for (let j = 0; j < 3; j++) {

}
console.log(i);
console.log(j);

Если вы немного разбираетесь в ES6, догадаться не составит труда:

3
ReferenceError: j is not defined

Если у вас есть какие-то идеи, то давайте рассмотрим следующие решения, а потом подведем итоги:

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}
// console：
// 0
// 1
// 2

да, будетvar iизменился наlet iПосле этого результаты вывода по очереди0 1 2.

Зачем? Простой ответ:

letсуществуетforУникальный блок прицела формируется в текущемiДействует только в этом раунде цикла, затемsetTimeoutнайдет ближайшийi, что приводит к правильному выводу.

и мы проходимvarсделать определение, оно загрязнит глобальную переменную, поэтому вforВнешний слой также можно увидетьiценность .

Конечно, на этом этапе вы все еще можете не понимать более подробное различие, или интервьюер может задать вам дополнительные вопросы.var let constКак лучше ответить?

Взгляните на документацию Ruan Yifeng ES6:es6.ruanyifeng.com/#docs/let

Я не буду колебаться здесь. Я организую контент ES6 в свою библиотеку документов, когда у меня будет время. Добро пожаловать, чтобы продолжать уделять внимание библиотеке документов jsliang:GitHub.com/l ian Jun Ron…

  • Сомнение 2: Почему этот код работает не так, как я хочу? почему бы не вывести梁峻荣?
let name;

setTimeout(() => {
  name = 'jsliang';
  console.log(name);
}, 1000);

if (name) {
  name = '梁峻荣';
  console.log(name);
}
// console: 'jsliang'

Когда вы поймете причину первого сомнения, второе сомнение будет разрешено, не нарушая его.

Мы хотели, чтобы JavaScript писался в нужном нам порядке, но этого не произошло, потому что на него повлиял цикл событий.

JavaScript сталкивается сsetTimeoutКогда он будет запечатан в другом измерении, единственные другие все нормальные заявления (if,for...) После того, как выполнение будет завершено, оно будет распечатано из другого измерения, и будет выведен окончательный результат.

Эй, интересно, а как насчет разных размеров браузера и разных размеров Node.js? Давайте посмотрим вниз вместе.

Четыре цикла событий браузера

Назад к содержанию

Прежде чем объяснять цикл событий браузера, нам нужно понять механизм работы JavaScript:

  1. Все задачи синхронизации выполняются в основном потоке, формируя«Выполнить стек»(стек контекста выполнения).
  2. Вне основного потока есть«Очередь задач»(очередь задач), при обходе основного процесса, если вы столкнулись с асинхронной задачей, то«Очередь задач»Поместите эту асинхронную задачу.
  3. однажды"стек выполнения"После выполнения всех задач синхронизации система прочитает«Очередь задач», чтобы увидеть, какие события существуют в нем. Эти соответствующие асинхронные задачи завершают состояние ожидания, входят в стек выполнения и начинают выполнение.
  4. Основной поток продолжает повторять три вышеуказанных шага.

Асинхронные задачи JavaScript также подразделяются на два типа задач:

  • Макрозадача:script(общий код),setTimeout,setInterval,XMLHttpRequest.prototype.onload,I/O, рендеринг пользовательского интерфейса
  • Микрозадача:Promise,MutationObserver

Это не просто понять, давайте возьмем картинку выше:

Картинка крупнее, если вы друг паблик-аккаунта, то можете нажать [читать исходный текст], чтобы увидеть полную картинку

Хорошо, если друзья плохо видят, тогда давайте объясним это с помощью кода.В конце концов, вышесказанное принадлежитjsliangЛичное понимание получено из более чем 15 статей и моих собственных наблюдений за работой кода.

4.1 Пример 1

Назад к содержанию

Затем код ~

Пример 1

// 位置 1
setTimeout(function () {
  console.log('timeout1');
}, 1000);

// 位置 2
console.log('start');

// 位置 3
Promise.resolve().then(function () {
  // 位置 5
  console.log('promise1');
  // 位置 6
  Promise.resolve().then(function () {
    console.log('promise2');
  });
  // 位置 7
  setTimeout(function () {
    // 位置 8
    Promise.resolve().then(function () {
      console.log('promise3');
    });
    // 位置 9
    console.log('timeout2')
  }, 0);
});

// 位置 4
console.log('done');

задавать вопросы: Пожалуйста, укажите вывод вышеуказанного кода?

отвечать:

Это классический тип вопросов для интервью, поэтому нам не нужно паниковать, когда мы его видим, давайте возьмем наши пункты выше и разграничим макро-задачи и микро-задачи:

  • Макрозадача:script(общий код),setTimeout,setInterval,XMLHttpRequest.prototype.onload,I/O, рендеринг пользовательского интерфейса
  • Микрозадача:Promise,MutationObserver

Хорошо, запускаем процесс:

Если вы считаете, что текст не прост для понимания, прокрутите вниз, там есть демонстрация GIF-изображения! ! !

  1. Первый, кто столкнулсяscript(Общий код), сначала посмотрите на [Позицию 1], которая является задачей макросаsetTimeoutвниз, поэтому сделайте отметку и вернитесь, чтобы выполнить ее позже.
  2. Затем столкнитесь с [Позицией 2], котораяscriptБеспрепятственный код (общий код) может выполняться напрямую.
  3. Затем перейдите к [Позиция 3], сейчасscript(общий код), так что давайте пометим.Пройдясь по всему коду в файле, сначала выполним микрозадачу, а потом макрозадачу.
  4. Наконец, нажмите [Позиция 4].scriptБеспрепятственный код (общий код) может выполняться напрямую.

Таким образом, на первом шаге волны мы выводим результат [позиция 2]startи 【Позиция 4】done.

Продолжим:

  1. Выше мы закончили первый проход кода, и теперь этот шаг будет идти первымscript(Общий код) под микрозадачу, а именно [Позиция 3]
    1. Первое столкновение с [Позицией 5], которая представляет собой беспрепятственный код и выполняется напрямую.
    2. Когда вы снова столкнетесь с [Позицией 6], это микрозадача, отметьте ее и выполните ее первой после того, как все коды в [Позиция 3] будут выполнены.
    3. Наконец, я сталкиваюсь с [Позицией 7], которая является макрозадачей, бросаю ее в очередь задач и смотрю, кто идет первым между ней и [Позицией 1].
  2. Пройдя [Позицию 3], я обнаружил, что есть еще микрозадача [Позиция 6], поэтому выполните [Позицию 6], чтобы распечатать.

На этом мы закончилиscript(общий код) и все микрозадачи под ним.

В это время мы скажем, [Позиция 1] и [Позиция 7] были брошены в очередь задач, должна ли [Позиция 1] идти первой?

Ответ - нет.

такой жеsetTimeout,jsliangВо время тестирования я обнаружил, что их результаты вывода имеют свои собственные процессы в каждой среде: иногда они сначала идут в [Позиция 7], а затем переходят в [Позиция 1], иногда они сначала идут в [Позиция 1], а затем переходят к [Позиция 1] 7].

Конечно, если вы укажете, чтоChromeКонсоль выводит приведенный выше код, то есть сначала [позиция 7], затем [позиция 1]~

  • Пункт: Не делайте субъективных предположений о том, как будет работать определенный код, лучше просто запустить его вживую!
  1. Сначала перейдите в [Положение 7]. Когда вы сталкиваетесь с [Позицией 8], добавьте ее в микрозадачу [Позиция 7] и подождите, пока все коды в [Позиции 7] закончат выполнение и вернутся к микрозадаче в первую очередь; если вы столкнулись с [Позицией 9 ], это беспрепятственный код, прямой вывод Вот и все.
  2. Выполните микрозадачу [Позиция 8] из [Позиция 7] и выведите соответствующий текст.
  3. Наконец, перейдите к [Position 1] и выведите соответствующий текст.

Итак, ответ:

start
done
promise1
promise2
timeout2
promise3
timeout1

Вы угадали?

Нет, вы можете посмотреть на GIF-изображение, чтобы усилить впечатление:

4.2 Пример 2

Назад к содержанию

наверху,jsliangНа это ушло много слюны и рассказов о каких-то сложных и избыточных шагах, поэтому для следующего примера, пожалуйста, догадайтесь сами, а потом посмотрите ответ и отладьте GIF после того, как сделаете вывод~

Пример 2

console.log("script start");

setTimeout(function() {
  console.log("setTimeout---0");
}, 0);

setTimeout(function() {
  console.log("setTimeout---200");
  setTimeout(function() {
    console.log("inner-setTimeout---0");
  });
  Promise.resolve().then(function() {
    console.log("promise5");
  });
}, 200);

Promise.resolve()
  .then(function() {
    console.log("promise1");
  })
  .then(function() {
    console.log("promise2");
  });
Promise.resolve().then(function() {
  console.log("promise3");
});
console.log("script end");
  • выходной результат:
script start
script end
promise1
promise3
promise2
setTimeout---0
setTimeout---200
promise5
inner-setTimeout---0
  • демо GIF:

4.3 Пример 3

Назад к содержанию

Последний пример:

Пример 3

setTimeout(function() {
  console.log(4);
}, 0);

const promise = new Promise(function executor(resolve) {
  console.log(1);
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve();
  }
  console.log(2);
}).then(function() {
  console.log(5);
});

console.log(3);
  • выходной результат:
1
2
3
5
4

Если не часто используетсяPromiseДрузья, вас это может смутить, почему бы и нет:3 1 2 5 4?

Забавно, не спрашивайте, спросите, чтобы узнать большеPromise:

Конечно, все результаты исследования еще не обновлены.Если есть небольшой партнер, призывающий к обновлению, скорость будет ускорена.Добро пожаловать, чтобы оставить сообщение или приватный чат, чтобы призвать к обновлению, ха-ха~

4.4 Резюме

Назад к содержанию

Таким образом, у нас есть общее представление о цикле событий браузера на трех примерах.

Конечно, код в практических приложениях более чем прост, и иногда даже вопросы интервьюера, заданные вам интервьюером, ошеломят вас.

Итак, давайте говорить глупости здесь:

  1. Вы можете понять общее выполнение макро- и микрозадач, например, ходить первым.if...else..., идтиPromise...но, как подробно, как каждыйpointПомните, здесь это не рекомендуется. Сэр, времена идут, лучше пробовать в деловой практике и приобретать новейшие знания.
  2. Цикл событий браузера отличается от цикла событий Node.js.Если когда-нибудь апплет XX сделает что-то другое и будет иметь свой собственный цикл событий, вы хотите запомнить их один за другим?

Не паникуйте, когда столкнетесь с проблемами, программисты, просто бросьте~

Пять циклов событий Node.js

Назад к содержанию

Итак, давайте выложим цикл событий Node.js.

Если честно, после прочтения официального сайта узла и объяснения больших парней цикла событий о Node.js, он напоминает мне о [жизненном цикле] от Vue, React и WeChat, а затем думать о нашей жизни, как будто это было написано до смерти, программа периодически проходит и в конечном итоге, очень ненавистным, ха-ха

上面我们讲解过：Node.js 的 Event Loop 是基于 libuv。 libuv реализовал цикл событий.

那么其机制是怎样子的呢？ Посмотрите на картинку:

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

Что касается этих 6 этапов, официальный сайт описывает их как:

  • таймеры: Выполнение на этом этапе былоsetTimeout()а такжеsetInterval()Функция обратного вызова отправления.
  • ожидающие обратные вызовы: выполнение обратного вызова ввода/вывода откладывается до следующей итерации цикла.
  • idle, prepare: Только для внутреннего использования.
  • голосование: получение новых событий ввода-вывода; выполнение обратных вызовов, связанных с вводом-выводом (почти во всех случаях, за исключением обратных вызовов выключения, генерируемых таймерами иsetImmediate()кроме запланированного), остальныеNodeЗаблокирует здесь со временем.
  • обнаружение (проверка):setImmediate()Здесь выполняется функция обратного вызова.
  • закрыть обратные вызовы: Некоторые функции обратного вызова завершения работы, такие как:socket.on('close', ...).

Конечно, здесьjsliangНе хочу лишнего, статьи на официальном сайте или других воротил копирую как свои.Рекомендую друзьям читать описания различных этапов Event Loop на официальном сайте, чтобы использовать их в их работа:

Node.js будет обновляться в ходе непрерывного исследования, поэтому его следуетjsliangСводка в петле события браузера говорит:Не ограничивайте свои очки знаний, идти в ногу со временем - это королевский путь.

Node.js v9.5.0 Event Loop

   ┌───────────────────────┐
┌─>│        timers         │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
│  │     I/O callbacks     │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
│  │     idle, prepare     │
│  └──────────┬────────────┘      ┌───────────────┐
│  ┌──────────┴────────────┐      │   incoming:   │
│  │         poll          │<─────┤  connections, │
│  └──────────┬────────────┘      │   data, etc.  │
│  ┌──────────┴────────────┐      └───────────────┘
│  │        check          │
│  └──────────┬────────────┘
│  ┌──────────┴────────────┐
└──┤    close callbacks    │
   └───────────────────────┘

Однако из-за жизненных потребностей иногда фронтенд-интервьюер все же разговаривает с вами.setTimeout & setImmediateа такжеprocess.nextTice().

5.1 setTimeout & setImmediate

Назад к содержанию

  • setTimeout: Как мы все знаем, это таймер, определяющийnВыполнить содержимое таймера через миллисекунды.
  • setImmediate: Node.js найден с использованиемsetTimeoutа такжеsetIntervalЕсть небольшие недостатки, поэтому мы разработалиsetImmediate, предназначенный для выполнения этого скрипта после завершения текущей фазы опроса.

Конечно, просто говорить бесполезно, посмотрите на код:

index.js

setTimeout(() => {
  console.log('timeout');
}, 0);

setImmediate(() => {
  console.log('immediate');
});

Угадайте, что делать в VS Codenode index.jsЧто происходит с командой?

окончание 1

immediate
timeout

окончание 2

timeout
immediate

На самом деле обе концовки будут существовать, похожеhappy ending, но некоторые друзья могут быть расстроены.

Согласно пояснению на официальном сайте:

  • Порядок, в котором выполняются таймеры, зависит от контекста, в котором они вызываются.
  • Если оба вызываются из основного модуля, таймер будет привязан к производительности процесса (на которую могут повлиять другие запущенные приложения на компьютере).
  • Если вы вызываете эти две функции внутри цикла ввода/вывода,setImmediateВсегда называть конечно.
const fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout(() => {
    console.log('timeout');
  }, 0);
  setImmediate(() => {
    console.log('immediate');
  });
});

Хотя официальное объяснение оченьумная, но понимаете вы это или нет, я все равно думаю, что это немного ерунда.

Наконец, официальное резюме:

  • использоватьsetImmediate()относительноsetTimeoutГлавное преимущество: еслиsetImmediate()запланировано во время цикла ввода-вывода, то оно будет выполняться до любых таймеров, независимо от того, сколько таймеров имеется.

enm... Позже, если я буду использовать конкретно Node.js, я буду наблюдать за этим дальше, а пока я должен сначала понять это.

5.2 process.nextTick()

Назад к содержанию

nextTickБолее того, у него есть собственная очередь.

Более того, он не зависит от цикла событий, независимо от того, на каком этапе находится цикл событий, он будет опустошен в конце этапа.nextTickочередь.

Также обратите внимание, что:process.nextTick()Выполняется перед другими микрозадачами.

Конечно, если вам это интересно, вы можете изучить исходный код подробнее или посмотреть, как большие ребята изучают исходный код:

Если вы им не пользуетесь, вы не имеете права говорить.Как новичок в Node.js, я не буду его здесь комментировать и анализировать.

5.3 Пример 1

Назад к содержанию

Давайте начнем пример, давайте посмотрим, чем отличается цикл событий Node.js:

Пример 1

setTimeout(() => {
  console.log("timer1");
  Promise.resolve().then(function() {
    console.log("promise1");
  });
});

setTimeout(() => {
  console.log("timer2");
  Promise.resolve().then(function() {
    console.log("promise2");
  });
});

Если вы помните цикл событий браузера, описанный выше, вы можете написать ответ прямо как:

Вывод цикла событий браузера:

timer1
promise1
timer2
promise2

Да, вы правы, это цикл событий браузера, когда дело доходит до Node.js, есть разные изменения:

Выход цикла событий Node.js:

timer1
timer2
promise1
promise2

Попробуйте принять это!

Затем произнесите вслух:Делайте соответствующие наблюдения и делайте выводы, исходя из конкретных обстоятельств.

5.4 Пример 2

Назад к содержанию

Давайте посмотрим на другой пример:

Пример 2

setTimeout(function () {
   console.log(1);
});
console.log(2);
process.nextTick(() => {
   console.log(3);
});
new Promise(function (resolve, rejected) {
   console.log(4);
   resolve()
}).then(res=>{
   console.log(5);
})
setImmediate(function () {
   console.log(6)
})
console.log('end');

node index.js

2
4
end
3
5
1
6

Я не буду разбирать это здесь, потому что боюсь, что маленькие друзья, которые плохо знакомы с циклом событий, после прочтения объяснения запутаются, а потом запутаются.

Если честно: я не осмеливаюсь его разбирать, потому что я новичок в Node.js.

5.5 Резюме

Назад к содержанию

В заключении делаем вывод:

В цикле событий на стороне узла также есть два типа асинхронных очередей: очередь макрозадач (макрозадач) и очередь микрозадач (микрозадач).

  • Общие макрозадачи:setTimeout,setInterval,setImmediate,script(весь код), операции ввода-вывода и т. д.
  • Общие микрозадачи:process.nextTick,new Promise().then(回调)Ждать.

Хорошо, давайте изучим цикл событий Node.js, но поскольку мы еще не достигли этогоИнженер Node.js, поэтому мы не будем подробно рассматривать его, чтобы избежать путаницы с циклом событий браузера.

Заинтересованные друзья могут исследовать сами~

Шесть резюме

Назад к содержанию

Если вы видите это, вы почти ошеломлены, то это все еще предложение:

  • Независимо от того, как цикл событий представлен в браузере или Node.js, лучше всего попробовать его в соответствующей среде.

Вы не можете полностью гарантировать, что с вашей памятью все в порядке, поэтому вам просто нужно знать, что есть проблема, а затем практиковаться в ее решении на работе.

enm... Итак, вы закончили читать гидрологию, единственное, что вам нужно сделать, это позволить вам с удовольствием сыграть несколько простых вопросов во время интервью~

Ха-ха, удачи.

Если вы считаете мои статьи неплохими и хотите продолжить подписку или добавить моих друзей в WeChat, перейдите по ссылкеGitHub.com/l ian Jun Ron…Сделайте звездочку или добавьте WeChat.

7 ссылок

Назад к содержанию

Спасибо за приведенные ниже статьи, которые мне очень помогли.

И на основе их создания, исходя из собственных идей, интегрированных.

  1. «Задачи, микрозадачи, очереди и расписания» — Джейк
  2. «Понимание событийного цикла браузера» — Лю Сяоси
  3. Полное понимание цикла событий JS (среда браузера) — 93
  4. «Понимание событийного цикла на стороне браузера» — Чанг Ке
  5. «Что такое цикл событий браузера (Event Loop)? 》 - Икра
  6. «Понимание цикла событий (среда браузера и среда nodejs)» — sugerpocket
  7. «Изучение времени асинхронного рендеринга JavaScript и обновления браузера на основе спецификации цикла событий» — Ян Цзинчжуо
  8. «Следуйте спецификации цикла событий, чтобы понять асинхронный механизм в браузере» — fi3ework
  9. «Не путайте nodejs и цикл обработки событий в браузере» — молодость7
  10. «Цикл событий браузера и цикл событий узла» — Цзинь Дагуан
  11. «В чем разница между браузером и циклом событий Node (Event Loop)?»
  12. Различные циклы событий браузера и узла (Event Loop) - toBeTheLight
  13. "Команды let и const" - Жуань Ифэн
  14. 《Цикл событий Node.js》 — официальный сайт Node.js

Какая разница между передком без заброса и соленой рыбой!

jsliangРешение LeetCode будет обновляться каждый день, чтобы помочь друзьям закрепить основы нативного JS, понять и изучить алгоритмы и структуры данных.

Блудный мечВопросы для интервью будут обновляться каждый день, движимые вопросами для интервью, чтобы заставить всех учиться, настаивать на том, чтобы учиться и думать каждый день, и каждый день добиваться прогресса!

Отсканируйте QR-код выше и следуйтеjsliangофициальный аккаунт (слева) иБлудный мечофициальный аккаунт (справа), давайте вместе!

知识共享许可协议
библиотека документации jsliangЗависит отЛян ЦзюньронгиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеGitHub.com/l ian Jun Ron…Создание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.

Категории