Как работает JavaScript — движок, среда выполнения, стек вызовов

внешний интерфейс JavaScript

движок, среда выполнения, стек вызовов

Пожалуйста, обратитесь к исходному текстуздесь

Эта серия постоянно обновляется, пожалуйста, обратитесь к адресу Github.здесь.

Первая глава в этой серии глав, целью которой является погружение в JavaScript и понимание того, как он работает: мы думаем, что вы будете писать более качественный код и приложения, когда поймете строительные блоки JavaScript и то, как они работают вместе. Мы поделимся некоторыми при созданииSessionStackЭмпирическое правило времени,SessionStack— это легкая программа JavaScript, обладающая преимуществами надежности и высокой производительности, позволяющими оставаться конкурентоспособными.

так какGitHut statsКак показано, JavaScript занимает первое место на Github по активным репозиториям и общему количеству push-уведомлений. Другие аспекты производительности будут не намного ниже, чем у других языков.

(Нажмите, чтобы просмотреть последнюю статистику языка Github)

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

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

Обзор

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

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

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

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

JavaScript-движок

Google V8 Engine — один из популярных движков JavaScript. Движок V8 используется внутри, например, в Chrome и Node.js. Вот простой вид, чтобы изобразить это примерно.

Двигатель состоит из двух основных компонентов:

  • Динамическое управление памятью - выделяйте память здесь
  • Стек вызовов - где выполнение кода является вашей структурой стека

Время выполнения

Почти каждый JavaScript Developer использовал несколько API в браузере (например, SettimeOut). Однако эти API не предоставляются двигателем.

Так откуда они взялись?

事实上这个情况有点复杂呃。 .

Так что на самом деле это нечто большее, чем двигатель. Есть вещи, называемые веб-API, которые предоставляются такими браузерами, как DOM, AJAX, setTimeout и другими.

С тех пор популярны циклы событий и очереди обратного вызова.

стек вызовов

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

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

Возьмите каштан. Проверьте следующий код:

function multiply(x, y) {
  return x * y;
}

function printSquare(x) {
  var s = multiply(x, x);
  console.log(s);
}

printSquare(5);

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

Каждая запись в стеке вызовов называется структурой стека.

Именно так строится трассировка стека при возникновении исключения — это, по сути, состояние стека вызовов при возникновении исключения. Взгляните на следующий код:

function foo() {
  throw new Error('SessionStack will help you resolve crashes:)');
}

function bar() {
  foo();
}

function start() {
  bar();
}

start();

При выполнении в Chrome (при условии, что код находится в файле foo.js) будет создана следующая трассировка стека:

«Переполнение стека» — возникает при достижении максимального размера стека вызовов. Это может произойти довольно легко, особенно когда вы используете рекурсию без тщательной проверки кода. Проверьте следующий код:

function foo() {
  foo();
}

foo();

Когда движок начинает выполнять этот код, он начинает вызывать функцию foo. Эта функция, однако, будет рекурсивной и начнет вызывать себя без какого-либо конечного условия. Таким образом, на каждом этапе выполнения одна и та же функция снова и снова добавляется в стек вызовов. Процесс выполнения следующий:

Однако в какой-то момент количество вызовов функций в стеке вызовов превышает фактический размер стека вызовов, поэтому браузер принимает решение о действии выдачи ошибки, например:

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

Но выполнение кода в одном потоке также имеет значительные ограничения. Поскольку JavaScript имеет только один стек вызовов, что произойдет, если он будет работать медленно?

Параллелизм и цикл событий

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

Теперь, это не лучший пользовательский опыт, не так ли?

Так как же выполнить медленный код, не блокируя пользовательский интерфейс и не делая браузер зависающим? Используйте асинхронные обратные вызовы.

Это будет подробно рассмотрено в главе 2 книги «Как работает JavaScript»: «5 советов по написанию лучшего кода в движке V8».

Реклама ^.^

Сегодняшние заголовки вербуют! Отправить резюме наlikun.liyuk@bytedance.com, вы можете использовать быстрый внутренний push-канал, который эффективен в течение длительного времени! JD в подразделении Internationalized PGC:From.modified.US/board/V5/2H…, вы также можете нажать другие отделы!

Эта серия постоянно обновляется, пожалуйста, обратитесь к адресу Github.здесь.

Категории