Чем асинхронность отличается от однопоточности в Javascript?

Question

[Drovosek01]

Доброго времени суток.

Перечитал уже много статей про асинхронность в js и её понимание, но никак не могу понять что это такое.

В подавляющем большинстве ресурсов, которые я изучил приводится пример с использованием setTimeout и Промисов (но я с ними еще не начал разбираться "вплотную").

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

Вопрос: как нам это помогает победить выполнение кода последовательно в один поток, если это просто смещение выполнение кода по времени? Т.е. это просто переносит выполнение кода на будущее.

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

P.S.
Пожалуйста, не кидайте мне ссылки на статьи, где примеры с setTimeout. Вот последнее, что я прочитал и заданный вопрос не решился:

Ссылки

https://habr.com/ru/company/wrike/blog/302896/
https://medium.com/@stasonmars/%D0%BF%D0%BE%D0%BB%...
https://www.youtube.com/watch?v=OC7NA44S7bQ&t=177s

Comments

[Ярослав Иванов]

https://www.youtube.com/watch?v=vIZs5tH-HGQ
https://www.youtube.com/watch?v=j4_9BZezSUA

Answer 1

[Rsa97]

Асинхронность помогает единственному основному потоку не висеть в ожидании завершения какой-либо длительной внешней, по отношению к потоку, операции или наступления некоего события.
Представьте, что у вас всё работает синхронно. Тогда, если вы в фоне подгружаете какие-либо данные, то основной поток будет ждать завершения их загрузки и браузер перестанет реагировать на любые действия пользователя - нажатия на клавиши, движения мыши и т.п.
При асинхронности есть некая очередь. Любое событие (нажатие клавиши, движение мыши, скролл, завершение сетевой операции, срабатывание таймера) добавляет в эту очередь новую задачу. Браузер берёт задачи из этой очереди и выполняет их в единственном потоке. Эти задачи могут порождать процессы во вспомогательных потоках (инициация таймера, запуск сетевого процесса), которые в конце работы добавят новые задачи в очередь.
И таки да, если из задачи запустить несколько сетевых операций подряд, то они будут работать одновременно во вспомогательных потоках, при этом каждая такая операция при своём завершении добавит новую задачу в очередь. То же самое и с таймерами, все таймеры ведут отсчёт одновременно, добавляя задачи в очередь по истечению заданного времени.

Аналогия: представьте, что вы начальник и к вам стоит очередь подчинённых. Каждому из них вы даёте задание и он уходит это задание выполнять.
Синхронный процесс - вы ожидаете возвращения подчинённого и его доклада о выполнении задачи, затем даёте ему новое задание и так, пока задания для него не закончатся. Потом переходите к следующему подчинённому.
Асинхронный - вы даёте задачу, подчинённый уходит, вы даёте задание следующему и т.д. По выполнению задачи вернувшийся подчинённый встаёт в общую очередь к вам.

Comments

[Drovosek01]

Т.е. если я создам несколько переменных - экземпляров XHR, и они будут загружать в себя какой-нибудь большой файл (например весом 100 мегабайт), то они будут делать это все одновременно с общим потоком javascript'a и не мешая ему?

Код

var xhr1 = new XMLHttpRequest();
var xhr2 = new XMLHttpRequest();
var xhr3 = new XMLHttpRequest();
var xhr4 = new XMLHttpRequest();
var xhr5 = new XMLHttpRequest();

xhr1.open('GET', 'mega_big_file', true);
xhr2.open('GET', 'mega_big_file', true);
xhr3.open('GET', 'mega_big_file', true);
xhr4.open('GET', 'mega_big_file', true);
xhr5.open('GET', 'mega_big_file', true);

xhr1.send();
xhr2.send();
xhr3.send();
xhr4.send();
xhr5.send();

Я пробовал этот код запустить и отслеживать с дебаггером через devtools в Chrome и "шагать" по каждой строчке дебагом и смотреть на CallStack, но CallStack был всегда пустой (там была только (anonymous)).

[Rsa97]

Drovosek01, Да. При каждом вызове send будет создаваться вспомогательный поток, в котором начнётся сетевая операция, а основной поток будет продолжать выполнение. При каждом событии смены своего состояния каждый вспомогательный поток будет добавлять в очередь вызов функции, указанной в его onreadystatechange.

[Drovosek01]

Rsa97, тогда, получается есть функции, которые могут работать асинхронно и все они только из группы "WebAPI" (т.е. описываются не стандартами ECMAScript, а каждый разработчик движка для js сам как хочет так их и делает).
И когда такие функции выполняются они попадают в свой специальный поток выполнения WebAPI и в этом своём потоке они между собой могут все параллельно выполнятся, не мешая главному потоку выполнения "обычного" (не вебапишного) js кода.
И в примерах с setTimeout() демонстрируют именно то, что таймеры, устанавливаемые этими функциями, отсчитываются параллельно, а не то, что после окончания таймера, callback-функции попадают в общую однопоточную очередь выполнения.
Я правильно понял?

[Rsa97]

Drovosek01, Таймеры тоже работают аналогично. Функция, объявленная при создании таймера, по его завершении попадает в общую очередь.
Туда же попадают события от клавиатуры и мыши, если за ними закреплены какие-либо функции.
И события от самого браузера (например, закрытие страницы) и события некоторых контролов (завершение воспроизведения видео) также попадают в ту же очередь.

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

[Drovosek01]

Rsa97, как я понял, js, который не относится к webapis работает в 1 поток, а тот, который относится к webapis может работать в несколько потоков (например если сделать запустить 100 разных setTimeout'ов с большой задержкой, например в 100 секунд, то попадая в webapis эти таймеры будут параллельно отсчитывать секунды, а не по очереди) и ставить результат выполнения своей работы в очередь на один поток в callstack.

Получается асинхронность в данном случае это возможность поставить выполнение какой-либо задачи в очередь перед другими задачами. И параллельное выполнение задач в браузере на самом деле есть, но как-бы не в самом js, а только в webapis функциях, которые мы можем вызвать из js https://developer.mozilla.org/ru/docs/Web/API

Я правильно понял?

[Rsa97]

Drovosek01, Сетевые функции - это только один из типов асинхронных потоков, есть ещё таймеры, пользовательский интерфейс, события плееров, в общем - всё, что делается долго и внутри браузера. Все события асинхронных потоков ставят свои функции только в конец очереди.
Весь ваш код, написанный непосредственно на JS, выполняется в единственном основном потоке и строго по очереди.

[Drovosek01]

Rsa97, но асинхронные webapi функции в своем "webapi потоке" выполняются параллельно. Так ведь?

[Rsa97]

Drovosek01, Да, работа всех асинхронных функция идёт параллельно друг другу и основному потоку.

Answer 2

[WbICHA]

Асинхронность в первую очередь нужна, когда идут запросы на сервер.
Тут, имхо, будет хороша такая аналогия:
Начальник ─ программист.
Грузчик 1шт. ─ интерепритатор жс.
Начальник ставит грузчику 2 задачи: разгрузить фуры и перетащить коробки партиями из А в Б.
На разгрузку одной фуры грузчику надо 15 минут, фуры приходят 1 раз в час, фур 5 штук, 1ая уже готова к разгрузке.
Перетащить одну партию коробок требует 5 минут, новая партия поступает сразу после доставки предыдущей, всего 50 партий.
Синхронный ─ это когда грузчик разгружает фуру каждый час, попивая чаёк с печеньками в ожидании следующей фуры, и только после того, как разгрузит все фуры, начнёт таскать коробки. На всё про всё уйдёт более 8 часов.
Асинхронный ─ это когда грузчик работает без продуху, только разгрузил фуру, сразу начал таскать коробки, приехала фура, начал разгружать её, и т.д. На всё про всё уйдёт чуть более 5 часов.

Надеюсь, логика ясна.

Comments

[Drovosek01]

Ну а как в эту концепцию вписывается setTimeout(), на котором все показывают примеры ассинхронности?

[WbICHA]

Drovosek01, нуууу... Делать примеры с сетТаймаутом как по мне так себе идея. В целом, да, можно сыммитировать промисы, но всё же.
Но вообще, в рамках данного примера, таймаут добавляется каждый раз после выполнения функции отснестиПартиюКоробок, а так же срабатывает таймаут ровно каждый час, что есть разгрузитьФуру.

[Drovosek01]

WbICHA, тогда, получается есть функции, которые могут работать асинхронно и все они только из группы "WebAPI" (т.е. описываются не стандартами ECMAScript, а каждый разработчик движка для js сам как хочет так их и делает).
И когда такие функции выполняются они попадают в свой специальный поток выполнения WebAPI и в этом своём потоке они между собой могут все параллельно выполнятся, не мешая главному потоку выполнения "обычного" (не вебапишного) js кода.
И в примерах с setTimeout() демонстрируют именно то, что таймеры, устанавливаемые этими функциями, отсчитываются параллельно, а не то, что после окончания таймера, callback-функции попадают в общую однопоточную очередь выполнения.
Я правильно понял?

[WbICHA]

Drovosek01, нет. В жс только 1 поток.
Посмотри это видео: https://www.youtube.com/watch?v=8aGhZQkoFbQ

[Drovosek01]

WbICHA, посмотрел, спасибо. Видео многое прояснило для меня и подтвердило то, что я написал в комментарии выше (только вместо "а каждый разработчик движка для js сам как хочет так их и делает" надо было сказать разработчик оболочки над js движком).

Как я понял, js, который не относится к webapis работает в 1 поток, а тот, который относится к webapis может работать в несколько потоков (например если сделать запустить 100 setTimeout с большой задержкой, например в 100 секунд, то попадая в webapis эти таймеры будут параллельно отсчитывать секунды, а не по очереди) и ставить результат выполнения своей работы в очередь на один поток в callstack.

Получается асинхронность в данном случае это возможность поставить выполнение какой-либо задачи в очередь перед другими задачами. И параллельное выполнение задач есть, но как-бы не в самом js, а только в webapis функциях https://developer.mozilla.org/ru/docs/Web/API

Я правильно понял?

[WbICHA]

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

Вообще, тут достаточно сам принцип понимать для работы с жс, а подробные будут полезны разве что на собеседовании.

П.с.: просто для инфы, сетТаймаут не сработает раньше, чем через 4мс (или около того, но, по моему, 4). То есть если поставишь 0мс, то он всё равно сработает через 4мс. Вернее не он сработает, каллбек выполнится.

[Drovosek01]

WbICHA,

как и делать эти проверки во время выполнения кода

Какие проверки?

[WbICHA]

Drovosek01, проверки, что таймаут прошёл и каллбек стоит забихнуть в калстак.