Очередь кадров анимации и очередь микрозадач

Я предполагаю, что микрозадача обрабатывается какими-то шагами.

И я проверял эти вещи, но я не уверен, что мое предположение верно.

Тест 1 — макрозадача и микрозадача

for (let i = 0; i < 2; i += 1) {
  setTimeout(() => {
    console.info('-- macro --')
    queueMicrotask(() => console.info('** micro **'));
  });
}

полученные результаты

-- macro --
** micro **
-- macro --
** micro **

Тест 2 — микрозадача и кадр анимации

for (let i = 0; i < 3; i += 1) {
  requestAnimationFrame(() => {
    console.info('@@ animation callback @@');
    queueMicrotask(() => {
      console.info('** micro **');
    });
  });
}

полученные результаты

@@ animation callback @@
** micro **
@@ animation callback @@
** micro **
@@ animation callback @@
** micro **

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

Но теперь я думаю, что «при обработке функций обратного вызова кадра анимации проверьте, не пуста ли очередь microTaskQueue, и если внутри есть задача, обработайте ее и вызовите обратный вызов следующего кадра анимации (вставленный функцией requestAnimationFrame».

Я прав, или я упускаю что-то важное?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Очередь микрозадач посещается каждый раз, когда стек вызовов JS пуст, как часть очистить после запуска скрипта.

  1. If the JavaScript execution context stack is now empty, perform a microtask checkpoint.

Этот шаг вводится между всеми выполнение обратного вызова анимации из алгоритма вызывать.

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

Спасибо, Кайидо, твой ответ мне очень помогает. У меня другой вопрос. В этом пример кода, который вы мне даете в этом вопрос, вы сказали события щелчка обычно запускаются из кадра анимации, но мне действительно трудно найти об этом. Читаю Архитектура событий DOM и Обработчики событий, но тяжело

Byeongin Yoon 23.03.2022 04:24

Да, больше по опыту, проведя множество тестов, я заметил, что это так. События Mousemove и другие события указателя переводятся в анимированные кадры, я думаю, что щелчок на самом деле не является, но в большинстве тестов, которые я выполнил, результаты были такими, как если бы они были (по крайней мере, в Chrome и FF). Но обратите внимание, что это не означает, что это часть обратных вызовов rAF, просто они ждут «кадра анимации» для выполнения задачи.

Kaiido 23.03.2022 06:03

Я закончил презентацию о цикле событий. Я действительно чувствую благодаря вам. Хорошего дня.

Byeongin Yoon 01.04.2022 07:04

Пожалуйста. Любопытно, а где была эта презентация? В Сеуле? Я мог бы быть заинтересован посетить когда-нибудь.

Kaiido 01.04.2022 07:20

Другие вопросы по теме