Структуры данных стека, кучи и очереди чрезвычайно важны для JavaScript. Они составляют базовую структуру асинхронных функций JavaScript. В этой статье я объясню, что такое каждая структура данных и как они работают вместе в JavaScript.

Куча

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

Куча

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

Очередь

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

Собираем все вместе

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

Поскольку это видео является основной функцией сайта, разработчик хочет, чтобы оно загружалось в первую очередь. Другие части сайта, такие как стиль из CSS и любые другие полученные данные, настроены на загрузку после начала загрузки этого видео. Итак, когда пользователь посещает этот сайт, видео начинает загружаться раньше всего.

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

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

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

Что, черт возьми, за цикл событий? - Филип Робертс

Сеть разработчиков Mozilla - Асинхронные функции

Стеки и очереди - Школа компьютерных наук Университета Карнеги-Меллона