Анализ динамического графа EventLoop браузера Javascript

внешний интерфейс GitHub браузер
Анализ динамического графа EventLoop браузера Javascript

Добро пожаловать в мой блог, чтобы увидеть оригинальный текст...Прикоснись ко мне
Учитьnode eventLoopПожалуйста, обратите внимание, чтобы различать детскую обувь... Код в этой статье выполняется только в браузере.

классификация задач

макрозадача

  • setTimeOut,setInterval,setImmediate,I/O, различныйcallback,UI渲染等
  • приоритет:主代码块 > setImmediate > MessageChannel > setTimeOut/setInterval

микрозадача

  • process.nextTick,Promise,MutationObserver,async(实质上也是promise)
  • приоритет:process.nextTick > Promise > MutationOberser

выполнить раздел

Мы часто делим EventLoop на память, стек выполнения, WebApi, асинхронную очередь обратного вызова (включая очередь микрозадач и очередь макрозадач).

стек выполнения

  • Стек выполнения — это место, где выполняются задачи макросов.

Макрозадачи и королева макросов

  • Задача макроса всегда следующаяEventLoopвыполнить в
  • Если во время выполнения задачи макроса появляется новая微任务, добавит новую микрозадачу в очередь микрозадач.

Микрозадачи и очереди микрозадач

  • Если новая микрозадача добавляется во время выполнения микрозадачи, новая микрозадача будет добавлена ​​в хвост текущей очереди задач.
  • Microsense будет в этом колесеEventLoopПосле выполнения все задачи в стеке выполнения выполняются немедленно.

Процесс реализации

①JavascriptЯдро загружает код в执行栈
②执行栈Выполнение основного потока по очереди同步任务, если во время процесса вызывается асинхронный API, событие обратного вызова будет добавлено в回调队列середина. а также微任务события добавляются в очередь микрозадач,宏任务Событие добавляется в очередь задач макроса. до текущего执行栈Код выполняется.
③ Начать выполнение всех текущих微任务队列Событие обратного вызова микрозадачи в . (:smirk: Обратите внимание, что это все, это равносильно очистке очереди)
④ Вынуть宏任务队列Первая (принцип «первым пришел – первым обслужен») макрозадача в执行栈в исполнении.
⑤ Выполнить текущий执行栈задача макроса в , если этот процесс всегда встречает微任务или宏任务, продолжать微任务а также宏任务для каждой команды入队Операция, затем текущий раунд宏任务После выполнения генерируется текущий раунд微任务Выполняется разовый выход из команды.
⑥ Вышеуказанные операции являются возвратно-поступательными... это то, что мы обычно говоримeventLoopохватывать

.... особенность

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

Помощь в понимании

let promiseGlobal = new Promise(resolve=>{
  console.log(1)
  resolve('2')
})
console.log(3) 

promiseGlobal.then(data=>{
  console.log(data)
  let setTimeoutInner = setTimeout(_=>{
  console.log(4)
   },1000)
   let promiseInner =new Promise(resolve=>{
     console.log(5) 
      resolve(6)
    }).then(data=>{
     console.log(data)
   })
})
let setTimeoutGlobal = setTimeout(_=>{
  console.log(7);
 let promiseInGlobalTimeout = new Promise(resolve=>{
      console.log(8); 
      resolve(9)
  }).then(data=>{
     console.log(data)
  })
},1000)

Не рекомендуется копировать сразу в консоль для запуска... Давайте сначала подумаем :smirk:

Анимация процесса

Отвечать

1 3 2 5 6 __Подождите секунду___ 7 8 9 4

Другие связанные

setTimeout

В: мойsetTimeoutФункция до времени, почему не была выполнена.

A: setTimeOutОбратный вызов будет помещен в очередь задач, а содержимое очереди задач будет выполнено только после выполнения текущего стека выполнения. появлятьсяsetTimeoutЕсли обратный вызов не своевременный, значит, в стеке выполнения есть блокировка или слишком много исполняемого кода.

nextTick

Общийvue.$nextTickвставит событие непосредственно в текущий微任务В очереди, если интересно, смотрите мою заметку "vue_nextTick и eventLoop"Портал -->и "обновление vue_DOM и nextTick"Портал -->

Другие статьи

Добро пожаловать на мой гитхаб

async/await реализует асинхронное программирование

Вы понимаете GET и POST

veu_nextTick и цикл событий

Категории