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

Среда выполнения:

Среда выполнения JavaScript — это движок V8, что означает, что он состоит из двух частей:

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

Стек вызовов. Здесь размещаются кадры стека по мере выполнения кода. Он отслеживает, где в программе мы находимся. Например, если вызывается функция, она помещается поверх стека вызовов, а когда мы возвращаемся из функции, она извлекается из стека вызовов.

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

Веб-API: API в вашем браузере, такие как DOM, AJAX, setTimeout, веб-компоненты и т. д.

И

Цикл событий и очередь обратного вызова

Однопоточный

JavaScript — это однопоточный язык, он имеет один стек вызовов и означает, что он может выполнять только одну операцию за раз. Одним из преимуществ однопоточного языка является то, что с ним проще работать. В этом есть смысл, два или более параллельных потока, работающих некорректно, — более сложная проблема, чем один некорректно работающий поток. Хотя работа в одном потоке может быть весьма ограниченной. Пока выполняется стек вызовов, браузер ничего не может сделать, то есть, если в стеке есть длинная функция, она заблокирует рендеринг вашего приложения до тех пор, пока оно не вернется. Представьте, что вы выполняете длительный сетевой вызов, после того как он будет помещен в стек, он останется там до тех пор, пока не вернется, как и все другие процессы, помещенные в стек. Только в этом случае это может быть какое-то время, особенно если вы делаете несколько сетевых вызовов синхронно подряд. Пока мы ждем ответных вызовов, браузер, по сути, не будет отвечать, возможно, вы уже сталкивались с подобным предупреждением:

Решение: асинхронные обратные вызовы

Асинхронные обратные вызовы — это функции, указанные для запуска в более позднее время. Давайте посмотрим на пример ниже:

Процесс стека вызовов начинается с

  1. нажатие основной функции (или анонимной функции, которая живет в браузере)

2. поместите setTimeout на вершину стека

3. извлеките setTimeout из стека

4. поместите console.log('Как дела?') в стек

5. извлеките console.log('Как дела?') из стека

6. извлеките основную функцию из стека, теперь стек пуст.

тогда….

7. нажмите console.log('Я в порядке')

8. pop console.log('Я в порядке')

Но что произошло после того, как стек вызовов опустел? Как последний console.log был возвращен обратно? Ответ лежит в цикле событий:

Цикл событий и параллелизм

Когда мы вызываем setTimeout, мы передаем функцию обратного вызова (console.log()) и задержку вызову setTimeout. Вызов setTimeout — это веб-API, предоставляемый браузером. Таким образом, вызов setTimeout, по сути, передается отдельному «потоку», предоставляемому браузером, и когда эти «потоки» вызываются, они знают, что запущен параллелизм.

Поэтому, когда веб-API выполняет свою задачу, он помещает переданную ему функцию обратного вызова в нечто, называемое очередью задач. Очередь задач — это просто список ожидания для функций обратного вызова, которые еще не запущены. Чтобы эти обратные вызовы были переданы обратно в стек, они должны быть отправлены циклом событий . Задачей цикла обработки событий является просмотр стека и очереди задач. Всякий раз, когда стек пуст, он помещает обратный вызов из очереди задач в стек.

Неблокирующий

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

Ресурсы:

Если что-то по-прежнему не совсем понятно или вам просто нужна дополнительная информация по теме, вам обязательно следует ознакомиться с выступлением Филипа Робертса и инструментом визуализации, который он создал, чтобы помочь людям понять концепцию.