Javascript.RU

Вывод синтаксического дерева кода

Синтаксическое дерево - внутренняя структура, которую интерпретатор javascript создает из исходного кода.

Обычно синтаксическое дерево создается для выполнения, но также может использоваться и для оптимизации, чем, собственно, и занимается google closure compiler.

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

Так как синтаксическое дерево заточено под выполнение, то оно содержит все значимые элементы - без лишних пробелов, комментариев и т.п.

Поэтому чтение файла в синтаксическое дерево, а потом генерация кода по этому дереву - само по себе является оптимизацией. Это соответствует значению флага --compilation_level, равному WHITESPACE_ONLY.

Простейший способ получить синтаксическое дерево - это использовать флаг --print_tree.

Например, для скрипта ast.js:

function Animal(speed) {
  /** @type {number} */
  this.speed = speed
}

Печать дерева:

java -jar compiler.jar  --js ast.js  --use_only_custom_externs --print_tree
Флаг --use_only_custom_externs при печати дерева необходим, иначе дерево будет также содержать все стандартные экстерны.

Результат:

BLOCK [synthetic: 1]
    BLOCK [synthetic: 1]
        SCRIPT [source name: null] [encoded source length: 0] [base line: -1] [end line: -1] 1 [sourcename: /dev/null] [synthetic: 1]
    BLOCK [synthetic: 1]
        SCRIPT [source name: null] [encoded source length: 0] [base line: -1] [end line: -1] 1 [sourcename: ast.js] [synthetic: 1]
            FUNCTION Animal 1 [sourcename: ast.js]
                NAME Animal 1
                LP 1
                    NAME a 1
                BLOCK 1
                    EXPR_RESULT 3
                        ASSIGN 3 [jsdoc_info: JSDocInfo]
                            GETPROP 3
                                THIS 3
                                STRING speed 3
                            NAME a 3

Как видите, выводится основная информация. Сверху - несколько служебных строк, а ниже - наша функция.

Аннотация /** @type {number} */ превратилась во внутреннюю структуру JSDocInfo.

Обратите внимание, дерево печатается для уже откомпилированного кода, со всеми оптимизациями и заменами. Поэтому, в частности, локальная переменная speed в дереве называется a.

Вы также можете получить дерево в более красивом виде, используя флаг --print_ast:

java -jar compiler.jar  --js ast.js  --use_only_custom_externs --print_ast >ast.dot

Полученный текст - граф в формате DOT, для просмотра которого обычно используется утилита graphviz, работающая под основными ОС.

Запустив эту утилиту и преобразовав в ней файл ast.dot, получим картинку:

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


Автор: Dunyatka (не зарегистрирован), дата: 19 февраля, 2010 - 12:22
#permalink

Спасибо! Для диплома кое что у Вас тут забрал.


Автор: Lekcion (не зарегистрирован), дата: 7 декабря, 2012 - 01:22
#permalink

Как то, слабо описано... Но спасибо и за такое...


Автор: jimo (не зарегистрирован), дата: 24 января, 2022 - 09:25
#permalink

This is a great idea, it will definitely be shared widely, thanks for sharing it with us moto x3m


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 00:09
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:33
#permalink

Автор: Гость (не зарегистрирован), дата: 2 сентября, 2022 - 16:14
#permalink

As in Wordle, there is a secret five-letter word that we have to try to guess while the absurdle game itself indicates the letters that we are getting right.


Автор: frog321 (не зарегистрирован), дата: 20 декабря, 2022 - 11:13
#permalink

It looks so complicated. It took time for me to understand the nyt sudoku diagram.


Автор: redactle (не зарегистрирован), дата: 29 марта, 2023 - 12:35
#permalink

Как-то неадекватно описано... Но и это я ценю...


Автор: Гость (не зарегистрирован), дата: 3 апреля, 2023 - 07:49
#permalink

There are deadly traps and intriguing riddles. You've come to the perfect location if you've always wanted to have a real adventure. In these incredible and addictive games, players assume the roles of fireboy and watergirl, two characters composed of distinct elements.


Автор: antiguans2000, дата: 4 мая, 2023 - 06:19
#permalink

Typically, if you want to comprehend some optimizations or create a compiler extension, you may need a syntax tree. I'll check further info about this after working at roof repair hamilton company.


Автор: Гость (не зарегистрирован), дата: 15 мая, 2023 - 13:09
#permalink

In this game, your goal is to fight and get as many points as possible to win over the opponent. In Basketball Random, there are two teams


Автор: abel1303 (не зарегистрирован), дата: 18 мая, 2023 - 06:51
#permalink

I appreciate the effort you put into providing rankdle both sides of the argument.


Автор: TheresaMay (не зарегистрирован), дата: 13 июня, 2023 - 06:02
#permalink

The syntax tree is an essential internal structure used by the JavaScript interpreter to analyze and execute source code. It represents the build now gg code in a structured and optimized form, excluding unnecessary elements like spaces and comments.


Автор: Yukisoa (не зарегистрирован), дата: 13 июня, 2023 - 12:19
#permalink

When you need a break from the stresses of life, visit the entertaining gaming website free games


Автор: carolkard (не зарегистрирован), дата: 14 июня, 2023 - 07:58
#permalink

I enjoyed reading your post. It provides a great deal of useful information and is really detailed. Additionally, I desire to introduce you to elastic man, a genuinely astonishing amusement device. Anyway, I hope to see more of your contributions in the future.


Автор: 3d product animation company (не зарегистрирован), дата: 15 июня, 2023 - 12:58
#permalink

Product animation is the process of creating dynamic visuals to showcase and highlight the features, functionality, and benefits of a product. Through animated elements such as 3D modeling, motion graphics, and visual effects, it engages viewers, enhances comprehension, and helps drive product awareness, sales, and marketing efforts.


Автор: clamb (не зарегистрирован), дата: 26 июня, 2023 - 12:21
#permalink

Excellent stuff; I'll let my friends know about it and have them check it out. I appreciate you sharing! Whenever you have more time, go to: run 3


Автор: deweysim (не зарегистрирован), дата: 9 августа, 2023 - 06:49
#permalink

This is great work, and I will recommend it to my friends. I value hearing your perspective. If you find yourself with spare time, visit basketball stars


Автор: Sheffeef (не зарегистрирован), дата: 11 октября, 2023 - 06:32
#permalink

If you've been looking for a true adventure, you've come to the right place. A syntax tree may be required, for example snake io, if you want to understand some optimizations or make a compiler extension. removing extraneous parts like comments and whitespace.


Автор: four in a row (не зарегистрирован), дата: 12 октября, 2023 - 12:51
#permalink

I've introduced four in a row to my kids, and it's incredible to see how quickly they grasp the rules and start strategizing. It's a game that grows with you.


Автор: suzume (не зарегистрирован), дата: 3 ноября, 2023 - 10:49
#permalink

The efficiency and elegance of your pokedoku code implementation truly stand out, demonstrating your expertise in coding.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 5 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum