Это 102-я оригинальная статья без воды.Если вы хотите получить больше оригинальных статей, выполните поиск в официальном аккаунте и подпишитесь на нас~ Эта статья была впервые опубликована в блоге Zhengcaiyun:Процесс выполнения v8 js
предисловие
В этой статье мы хотим кратко представить процесс выполнения JS в V8. Поняв процесс выполнения JS в V8, мы узнаем, что делает код JS в браузере. Конечно, я также исследую V8 один за другим.Если в статье есть что-то неуместное, я надеюсь, что вы можете меня поправить и общаться рационально.
Как мы все знаем, машина (ЦП) может распознавать только машинный код (двоичный код) и не может распознавать код JS, поэтому, когда код появляется на экране в виде страницы, необходимо выполнить большую работу по переводу.
V8 выполняет процесс Javascript
Как показано на рисунке выше, мы будем выполнять анализ разделения шаг за шагом:
JS TO AST
После того, как двигатель V8 получит код JS,парсер(Парсер) выполнит на нем лексический анализ и синтаксический анализ.
лексический анализ
Разделите код JS на соответствующие токены. Токен — это наименьшая единица, которую можно разделить. Фиксированный тип представляет тип/атрибут, а значение представляет соответствующее значение, как показано в следующем токене.
Разбор
После преобразования лексического анализа в токен синтаксический анализатор продолжает генерировать соответствующий AST на основе сгенерированного токена. AST считается знакомым студентам, изучающим интерфейс, и также является одним из горячих слов, будь то представление виртуального DOM. в Vue, React или Babel представление перевода JS состоит в том, чтобы сначала преобразовать его в соответствующий AST, а структура AST после синтаксического анализа синтаксическим анализатором показана на следующем рисунке:
Можно видеть, что очень маленький фрагмент кода сложен после того, как его проанализирован на AST, и AST на рисунке только упрощенные данные. Все АСТ на самом деле имеет много параметров, которые будут более сложными.
байт-код
После того, как синтаксический анализатор (Parser) разберет код JS в AST,устный переводчик(Зажигание) Создание байт-кода (также называемого промежуточным кодом) из AST. Как упоминалось выше, ЦП может распознавать только машинный код, но не байт-код. Здесь возникает проблема. Если ЦП не может распознать байт-код, зачем нам вставлять шаг в середине, чтобы потреблять ресурсы для преобразования байт-кода? ? Разве это не менее эффективно?
Говоря об эффективности в компьютерных науках, нельзя избежать понятий времени и пространства.Большинство оптимизаций - это пространство-время и время-в-пространстве.Баланс между ними и то, как достичь максимальной эффективности, - тема, достойная внимания. углубленное изучение вопроса.
Возьмите предыдущую версию движка V8 для выполнения JS, здесь нет этапа преобразования байт-кода, непосредственно из AST в машинный код, этот процесс называется процессом компиляции, поэтому каждый раз, когда вы получаете файл JS, он будет компилироваться первым. , и этот процесс по-прежнему пустая трата времени, которая является головной болью и требует решения.
Когда веб-страница открывается в первый раз, она закрывается и открывается снова.В большинстве случаев она остается такой же, как и исходный JS-файл, если только разработчик не изменит код, но пока на это можно не обращать внимания. все, ни один сайт не будет простаивать ни дня.Постоянно дорабатывать, загружать и заменять.
Кэш машинного кода
Согласно этой идее, поскольку в большинстве случаев файл не будет изменен, скомпилированный машинный код можно считать кэшированным, так что при следующем открытии или обновлении страницы процесс компиляции будет пропущен, и вы сможете Непосредственно После выполнения машинный код хранилища делится на два случая: во-первых, когда браузер не закрыт, он сохраняется непосредственно в локальной памяти браузера, во-вторых, браузер закрывается и сохраняется непосредственно на диске. , а ранний V8 делал это, как правило, жертвуя пространством ради времени.
Проблемы с кешированием
Думая о проблеме, как видно из приведенного выше рисунка, небольшой фрагмент кода, после преобразования в AST, становится намного больше, а больший размер файла приводит к проблеме, которая требует больше памяти для хранения, а файл JS преобразуется в Машинный код (т.е. бинарный файл) будет в сотни или даже тысячи раз больше исходного JS-файла, а это значит, что JS-файл размером в десятки КБ достигнет десятков МБ, что очень пугает. многопроцессорная архитектура Он и так много памяти занимает, и опять же, как бы ни был хорошо сконфигурирован компьютер, я боюсь, что не будет благом потреблять Хром.Ведь качество пользовательского опыта напрямую определяет, сможет ли продукт выжить на рынке, хотя V8 Скомпилированный код кэшируется, что сокращает время компиляции и повышает эффективность использования времени, но цена заключается в том, что использование памяти слишком велико, поэтому команде Chrome необходимо оптимизировать эту задачу.
ленивая компиляция
Конечно, требуется время на разработку и оптимизацию внедрения других технологий.При создании технической архитектуры неизбежно будут какие-то недостатки, компенсирующие ее.Чтобы решить проблему использования памяти и скорости запуска, чем раньше представлена версия V8ленивая компиляция, тогда возникает вопрос,ленивая компиляцияЧто сделано для повышения эффективности?
ленивая компиляцияЭто относительно легко понять.Если думать с точки зрения масштаба, то до ES6 существовали только глобальные масштабы и масштабы функций, в то время какленивая компиляцияИдея в том, что при запуске V8 будет скомпилирован только код глобальной области видимости, а код в области видимости функции при вызове вызова, и эта же функция не кэшируется.
Проблемы с ленивой компиляцией
представлятьленивая компиляцияПосле этого по скорости компиляции и кешу доработали, вроде все идеально, да, выглядит, но сконструированные вещи, мало ли как их будут использовать пользователи, в ES6 и Vue, React и т.д. до их популяризации большинство разработчиков использовали jQuery, RequireJS и другие подобные продукты, различные ссылки на плагины JQ, различные плагины или методы, инкапсулированные самими разработчиками, чтобы не загрязнять переменные других пользователей, обычно инкапсулированные в функция, поэтому возникает проблема,ленивая компиляцияОн не сохранит скомпилированный машинный код функции и не поймет скомпилированную функцию.Если плагин слишком большой, подождите, пока функция будет использована для компиляции, и время компиляции станет очень медленным, что эквивалентно разработчику добавлениеленивая компиляцияПосле окончания игры дорога блокируется.
импортировать байт-код
Ну, разработчики не умеют играть, поэтому команде V8 пришлось передумать и ввести байт-код. Прежде всего, нам нужно понять, что такое байт-код. Байт-код на самом деле является абстракцией машинного кода. Взаимная композиция различных байт-кодов может реализовать все функции, требуемые JS. Конечно, во-первых, байт-код занимает больше памяти, чем машинный код. , Это намного меньше, в основном десятки или даже сотые доли памяти, где находится машинный код Таким образом, память, потребляемая кешем байт-кода, все еще приемлема.
Здесь возникнет вопрос, так как ЦП не может распознать байт-код, нужно ли преобразовывать байт-код в машинный код? В противном случае, как это реализовать, ответ - да. Объясните, что после преобразования AST в байт-код байт-код будет преобразован в машинный код во время выполнения.Этот процесс выполнения определенно медленнее, чем непосредственное выполнение машинного кода, поэтому с точки зрения выполнения скорость будет медленнее.Однако исходный код JS преобразуется в AST через синтаксический анализатор, а затем в байт-код через интерпретатор.Этот процесс намного быстрее, чем компилятор, напрямую преобразующий исходный код JS в машинный код.С точки зрения всего процесса, все время не сильно отличается. , но это значительно снижает использование памяти, так почему бы не сделать это.
переводчик
горячий код
В коде часто есть одна и та же часть кода, которая вызывается несколько раз.Если одна и та же часть кода требует, чтобы интерпретатор преобразовывал ее в двоичный код для выполнения каждый раз, это будет немного расточительно с точки зрения эффективности, поэтому в модуле V8 будет специальный модуль.Модуль мониторинга, чтобы отслеживать, вызывается ли один и тот же код несколько раз, если он вызывается несколько раз, он будет помечен какгорячий код, что это делает?
оптимизирующий компилятор
TurboFanСлово (оптимизирующий компилятор) знакомо студентам, интересующимся индустрией мобильных телефонов. В последние годы при запуске продуктов появились такие бренды, как Huawei и Xiaomi. Основная способность заключается в оптимизации ряда продуктов с помощью вычислительной мощности программного обеспечения. функцию, чтобы сделать его более эффективным.
Затем горячий код продолжается, когда есть горячий код, V8 будет использовать TurboFan для преобразования байт-кода горячего кода в машинный код и кэширования его, так что при повторном вызове горячего кода нет необходимости преобразовывать слово Section код преобразуется в машинный код, конечно, горячий код относительно невелик, поэтому кеш не занимает слишком много памяти, а эффективность выполнения повышается, а пространство также приносится в жертву времени.
Антиоптимизация
Язык JS является динамическим языком и очень гибок.Структура и свойства объектов могут быть изменены во время выполнения.Представьте себе проблему.Если одно из свойств горячего кода внезапно модифицируется во время определенного выполнения, то компиляция может ли горячий код код, который превратился в машинный код, продолжает выполняться? Ответ определенно нет. В это время будет использоваться оптимизирующий компилятор.Антиоптимизация, он вернет горячий код на шаг AST.В это время интерпретатор переинтерпретирует и выполнит измененный код.Если код снова помечен как горячий код, этот шаг оптимизирующего компилятора будет повторен.
Суммировать
С точки зрения процесса анализа V8 использует не только интерпретатор, но и оптимизирующий компилятор при выполнении JS. Такой способ объединения этих двух процессов называется JIT (Just-In-Time) в отрасли. При использовании этого комбинированного метода для обработки JS в основном используются файлы меньшего размера, сформированные AST, в то время как горячий код, скомпилированный оптимизирующим компилятором, имеет высокую эффективность выполнения.Сочетание этих двух методов дает свои преимущества и максимизирует эффективность до максимума.
То, что делает V8, намного больше, чем это. Вот только краткий обзор и анализ некоторых вещей, сделанных в основном процессе. Если вы уточните его по каждому пункту, есть много понятий, таких как встроенное кэширование, скрытые классы, Fast свойства, медленные свойства, создание объектов и то, что автор писал довывоз мусораПодождите, сделано так много всего, я не буду перечислять их по одному.
Рекомендуемое чтение
Реализуйте экспозицию переднего плана и скрытых точек с помощью пользовательских инструкций Vue.
Практика с вами, чтобы начать работу с плагином Webpack
работы с открытым исходным кодом
- Zhengcaiyun интерфейсный таблоид
адрес с открытым исходным кодомwww.zoo.team/openweekly/(На главной странице официального сайта таблоида есть группа обмена WeChat)
Карьера
ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 40 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 30% из них — инженеры полного стека, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.
Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com