Пишите лучший код, понимая, как работает JavaScript внутри.

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

JavaScript Engine выполняет много работы, но самое главное — это чтение нашего кода и его выполнение. Для этого нам нужно место для хранения и записи данных, а также место для запуска и отслеживания того, что происходит построчно.

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

Стек вызовов

JavaScript — это однопоточный язык программирования, что означает, что он может выполнять только одно действие за раз и имеет только один стек вызовов, который следует за FILO (First in Last Out), что означает, что первый вызов появляется последним, и он механизм, который помогает интерпретатору JavaScript отслеживать функции, которые вызывает сценарий, и выполнение его кода является синхронным.

Куча памяти

Это пространство или область, где JavaScript хранит переменные, объекты и функции, и это известно во время выполнения. Следует заметить, что JavaScript хранит объекты и функции в куче, а переменные хранятся в стеке.

Переполнение стека

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

Сборка мусора

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

Большинство языков высокого уровня имеют свои собственные сборщики мусора по сравнению с языками низкого уровня, реализующими сборку мусора через библиотеки. Сборка мусора дает нам несколько проблем с безопасностью, поскольку нам не нужно беспокоиться об управлении памятью.

В низкоуровневых языках вы контролируете части памяти, что в некотором смысле опасно, но может быть оптимизировано, поэтому такой язык, как C, чрезвычайно быстр и эффективно использует память. Сборка мусора в JavaScript управляется с помощью алгоритма Mark and Sweep, в котором все объекты без ссылки удаляются из памяти.

1. Отметить: помечает объекты, на которые все еще есть ссылки.

2. Очистка: сканирование всех объектов в памяти и удаление всех неотмеченных объектов.

Утечки памяти

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

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

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

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

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

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

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

Очередь обратного звонка

Это структура данных FIFO, в которую помещается ваш асинхронный код и который ожидает выполнения.

Цикл событий

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

Я внештатный веб-разработчик с полным стеком и технический писатель, не стесняйтесь обращаться ко мне🤓

Подпишитесь на меня на GitHub:



Подпишитесь на меня в LinkedIn:



Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.