Изучая динамику выполнения JavaScript, важно ознакомиться с несколькими ключевыми концепциями, которые гармонично сочетаются для создания плавного взаимодействия с пользователем.
Предположим, я предполагаю, что вы знаете о движке javascript. Вкратце сказано, что движок javascript — это программный компонент, выполняющий код javascript. Первые движки JavaScript были простыми интерпретаторами, но все соответствующие современные движки используют компиляцию точно в срок для повышения производительности.
если вы не знаете о движке js, то вы можете прочитать эту статью по ссылке: движок javascript. Кстати, движок js включает в себя две основные части: одну кучу и другой основной поток, который также называется стеком вызовов.
Сначала вы должны быть знакомы с такими словами, как куча, основной поток, веб-API/C++ API, цикл обработки событий, очередь обратного вызова, очередь рендеринга, очередь микрозадач.
Куча: область выделения памяти, которая представляет собой неструктурированный блок памяти или хранит объекты и функции.
Стек вызовов (основной поток).Стек вызовов, часто связанный с основным потоком, представляет собой структуру данных, которая отслеживает текущие вызовы функций или методов в программе. JavaScript работает в однопоточной среде, то есть обрабатывает задачи одну за другой. Задачи стека вызовов обрабатываются методом LIFO (Last In First Out).
Веб-API/C++ API: они не являются частью самого движка JavaScript, но предоставляются браузером или средой выполнения, в которой выполняется JavaScript. Интерфейс прикладного программирования либо для веб-браузера, такого как Google, Internet Explorer, Mozila Firefox, Safari и т. д., либо для веб-сервера. Эти API-интерфейсы позволяют JavaScript взаимодействовать со средой за пределами его основного исполнения.
Очередь обратного вызова. Когда функция используется в качестве обратного вызова, она ставится в очередь для будущего выполнения. После завершения задачи веб-API и возврата управления функция помещается в очередь обратного вызова. Эта очередь следует методу FIFO (First-In-First-Out), гарантируя, что обратные вызовы обрабатываются в том порядке, в котором они были добавлены.
Цикл событий. Цикл событий — это один из видов координатора между очередью обратного вызова и стеком вызовов (главным потоком). Цикл событий выводит выполненную задачу из очереди обратного вызова и передает ее в основной поток для окончательного выполнения.
Очередь рендеринга: В основном очередь рендеринга используется для выполнения циклического процесса и за браузером для продолжения рендеринга. Если в DOM сразу несколько изменений, это может привести к множественным перекомпоновкам и перерисовке.
Примечание. Перекомпоновка — это процесс расчета макета и расположения элементов на веб-странице. А Repaint включает визуализацию этих элементов.
Очередь микрозадач (очередь заданий). Это один из видов очереди определенного типа в среде выполнения js. Эта очередь выполняется асинхронно, но с более высоким приоритетом, чем очередь обратного вызова. Он работает по методу FIFO (First In First Out).
Многие из них путают обратный вызов и очередь микрозадач, поэтому я проясняю это прямо сейчас: в основном очередь обратного вызова — это очередь событий, а очередь микрозадач — это очередь заданий. Очередь обратного вызова, которая содержит обратные вызовы асинхронных задач, которые завершили свое выполнение, например setTimeOut, сетевые запросы или события взаимодействия с пользователем. Кстати, это не часть языка javascript. Это метод, связанный с API браузера или сервера.
с другой стороны, очередь микрозадач означает очередь заданий с более высоким приоритетом, чем обычная очередь обратного вызова. Он работает, текущие скрипты закончены и перед следующими этапами рендеринга. Например, .then(), .catch(), как метод, связанный с обещаниями, а также обратные вызовы наблюдателя мутаций. Имейте в виду, что очередь микрозадач выполняется до выполнения очереди обратного вызова.
Удачного изучения JS :)
Следуйте за мной: Linkedin и группа facebook
