Оглавление
Обязательный к просмотру справочник Подробное объяснение макрозадач и микрозадач
логика обработки микрозадач обещания
разделяемая память очереди задач
Реализация индикатора выполнения
Разделите задачи на несколько задач
Обещание сложного разделения задач
img синхронный или асинхронный?
Рекомендации
1 Макрозадача и микрозадача_哔哩哔哩_bilibili
Обязательно к просмотру Настоятельно рекомендуется посмотреть видео за десять минут, вы можете узнать
1 Макрозадача и микрозадача_哔哩哔哩_bilibili
Обязательный к просмотру справочник Подробное объяснение макрозадач и микрозадач
примечания
Макрозадачи и микрозадачи
В: Разделяется ли js на синхронный и асинхронный? Как это выглядит?
Ответ: js — это однопоточный язык, который разделен на основной поток и очередь задач. Выполняется синхронно в основном потоке, при выполнении задач основного потока будут опрашиваться задачи в очереди задач, если есть задачи, то они будут выполняться в основном потоке.
В: Что такое микрозадачи и макрозадачи?
Ответ: Микрозадачи также являются асинхронными очередями, которые следуют описанному выше механизму. Но ее приоритет выше макрозадачи, и она будет опрошена и выполнена первой.
Планирование задач по таймеру
В: Где рассчитывается время таймера?
Ответ: В модуле таймера по истечении времени поставить задачу таймера (функция обратного вызова) в очередь задач.
В: Выполняется ли задача таймера сразу же по истечении времени? Или отсчет времени начинается после выполнения основной задачи потока?
Ответ: Нет, нужно дождаться полного выполнения задач в основном потоке, прежде чем опрашивать очередь задач, вынимать задачи и выполнять их. Кроме того, синхронизация и выполнение задач — это две части. Сроки не имеют ничего общего с задачей основного потока.
логика обработки микрозадач обещания
В: Являются ли обещания синхронными или асинхронными?
Ответ: Код построения промиса синхронный, и функции внутри будут выполняться сразу. Но .then или ожидаемая часть обещания выполняется асинхронно и помещается в очередь микрозадач.
Задача рендеринга DOM
В: Блокируют ли DOM и JS друг друга?
Ответ: Да, содержимое JS будет заблокировано при загрузке DOM. Точно так же JS также заблокирует DOM.
В: Будет ли выполняться асинхронность в JS после загрузки DOM или она будет выполняться посередине?
Ответ: Поскольку есть только один основной поток, DOM не должен рендериться одновременно, а очередь задач будет опрошена до завершения рендеринга. Поэтому, если DOM не был обработан, очередь задач JS должна продолжать ждать.
разделяемая память очереди задач
Вопрос: Поскольку очередей задач две, то как задачи получают переменные основного потока из задач в очереди макросов?
Ответ: Это хороший вопрос, потому что предварительным условием для выполнения задачи макроса является то, что основной поток опрашивает и получает задачу. В процессе получения задачи задача фактически перемещается из очереди макросов в основной поток, а при входе в окружение основного потока получаются переменные основного потока.
Реализация индикатора выполнения
В: Как реализовать простой индикатор выполнения?
Ответ: Используйте механизм разделяемой памяти очереди задач. В качестве прогресс-бара мы используем цветной прямоугольник, когда его ширина продолжает увеличиваться, реализуется эффект прогресс-бара. Мы можем сделать непрерывный вызов функции через setTImeout, время составляет около 200 мс, а затем определить счетчик и присвоить ему значение 0. Когда счетчик больше 100, выполнение останавливается.
верхний код
<div class="progressBar"></div>
<style>
.progressBar {
height: 40px;
background: rgb(64, 143, 33);
width: 0px;
color: #fff;
}
</style>
<script>
let i = 0;
function run() {
if (i >= 100) {
return;
} else {
i++;
let dom = document.querySelector(".jindu");
dom.style.width = i + "px";
dom.innerHTML = i + "%";
setTimeout(run, 50);
}
}
run();
</script>
Разделите задачи на несколько задач
В: Зачем разделять задачу?
Ответ: В js из-за того, что есть только один поток, если определенная задача слишком велика, она попытается заблокировать другие задачи, что приведет к визуальной задержке и ухудшению взаимодействия с пользователем.
В: Как разделить задачи?
Ответ: Очень просто, достаточно разбить задачу на блоки и кинуть в setTimeout на выполнение. Что касается 0 юаней или 100 юаней, это зависит от ваших потребностей. Метод выполнения нескольких задач является рекурсивным. Он очень похож на предыдущий модуль [реализация индикатора выполнения] и использует для этого свой собственный метод рекурсивного setTimeout.
Обещание сложного разделения задач
В: Как разделить обещание?
Ответ: Идея та же, что и у setTImeout, а код обернут промисом, чтобы код попал в микрозадачу и стал асинхронной функцией, чтобы потом не заблокировать выполнение основного потока.
img синхронный или асинхронный?
Есть специальный модуль для обработки изображений.По окончании загрузки оно будет поставлено в очередь задач(метод onload),и ждать опроса основного потока ps:модули для загрузки файлов не в порядке.Кто
закончит сначала запускается загрузка.расширенная очередь. Это большая разница в очередях.