perf(rome_formater): Inline `FormatElement::Text` #3403

MichaReiser · 2022-10-12T07:27:57Z

Summary

This PR inlines the Text enum into the FormatElement enum to reduce the size of FormatElement from 32 to 24 bytes.

The largest variant of FormatElement is FormatElement::Text with a size of 24 bytes, which makes FormatElement 32 bytes wide because it adds one byte for the variant tag + 7 bytes of padding.

The size of Text is 24 bytes:

1 byte for the union tag.
20 bytes for the largest variant SyntaxTokenText:
- 16 bytes for the slice (8 bytes for GreenToken + 8 bytes for the text range)
- 4 bytes for the source position
3 bytes of padding

This means, that we reserve 10 bytes of padding even for the largest enum variant (even worse for e.g. LineSuffixBoundary that has 31 bytes of padding).

This PR inlines Text to avoid having to pad twice, once for Text and once on FormatElement which results in a size reduction of FormatElement to 24 bytes (3 bytes of padding for SyntaxTokenText).

The downside of this change is that matching on text becomes more complicated and it removes the Eq implementation that compared Text by the string content.

Test Plan

This change results in a 20% peak memory consumption reduction: Max Bytes: 87.29 MB down to 69.48 MB

cargo run -p xtask_bench --release --features=dhat-heap -- --feature=formatter  --criterion=false --filter tex

Main

[tex-chtml-full.js] - using [/home/micha/git/rome/target/tex-chtml-full.js]
Start
Formatted
        Memory
                Current Blocks: 208143
                Current Bytes: 87.09 MB
                Max Blocks: 208146
                Max Bytes: 87.29 MB
                Total Blocks: 3689951
                Total Bytes: 370.88 MB
Printed
        Memory
                Current Blocks: 148775
                Current Bytes: 21.44 MB
                Max Blocks: 208150
                Max Bytes: 97.12 MB
                Total Blocks: 71
                Total Bytes: 20.06 MB
Benchmark: https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-chtml-full.js
        Formatting: 8.768215985s
                      ----------
        Total:        8.768215985s

Summary
-------
tex-chtml-full.js, Formatting: 8.768215985s
dhat: Total:     463,866,958 bytes in 3,870,874 blocks
dhat: At t-gmax: 101,839,473 bytes in 208,150 blocks
dhat: At t-end:  1,152 bytes in 3 blocks
dhat: The data has been saved to dhat-heap.json, and is viewable with dhat/dh_view.html

This Branch

[tex-chtml-full.js] - using [/home/micha/git/rome/target/tex-chtml-full.js]
Start
Formatted
        Memory
                Current Blocks: 208143
                Current Bytes: 69.28 MB
                Max Blocks: 208146
                Max Bytes: 69.48 MB
                Total Blocks: 3689951
                Total Bytes: 329.41 MB
Printed
        Memory
                Current Blocks: 148775
                Current Bytes: 21.44 MB
                Max Blocks: 208150
                Max Bytes: 79.32 MB
                Total Blocks: 71
                Total Bytes: 20.06 MB
Benchmark: https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-chtml-full.js
        Formatting: 8.808443181s
                      ----------
        Total:        8.808443181s

Summary
-------
tex-chtml-full.js, Formatting: 8.808443181s
dhat: Total:     420,388,694 bytes in 3,870,874 blocks
dhat: At t-gmax: 83,169,561 bytes in 208,150 blocks
dhat: At t-end:  1,152 bytes in 3 blocks
dhat: The data has been saved to dhat-heap.json, and is viewable with dhat/dh_view.html

I expect performance to improve a bit because it reduces the amount of data written during formatting. However, I don't expect too big of an improvement because the size reduction isn't big enough to make 4 format elements fit into a single cache line of 64 bytes (it's now 2 2/3 which probably is of very little use)

Local perf results:

group                                    main                                    text
-----                                    ----                                    ----
formatter/checker.ts                     1.00    216.2±1.31ms    12.0 MB/sec     1.02   221.4±18.09ms    11.7 MB/sec
formatter/compiler.js                    1.10   133.0±12.24ms     7.9 MB/sec     1.00    120.6±8.90ms     8.7 MB/sec
formatter/d3.min.js                      1.00     92.1±1.55ms     2.8 MB/sec     1.05    96.5±10.32ms     2.7 MB/sec
formatter/dojo.js                        1.00      6.5±0.02ms    10.6 MB/sec     1.06      6.8±0.63ms    10.0 MB/sec
formatter/ios.d.ts                       1.08   145.6±19.56ms    12.8 MB/sec     1.00   134.9±14.83ms    13.8 MB/sec
formatter/jquery.min.js                  1.00     26.7±0.11ms     3.1 MB/sec     1.04     27.9±2.55ms     3.0 MB/sec
formatter/math.js                        1.04    196.6±9.30ms     3.3 MB/sec     1.00   189.0±15.78ms     3.4 MB/sec
formatter/parser.ts                      1.04      4.6±0.01ms    10.7 MB/sec     1.00      4.4±0.07ms    11.0 MB/sec
formatter/pixi.min.js                    1.09   112.7±11.09ms     3.9 MB/sec     1.00    103.6±8.16ms     4.2 MB/sec
formatter/react-dom.production.min.js    1.07     33.6±3.26ms     3.4 MB/sec     1.00     31.5±3.08ms     3.7 MB/sec
formatter/react.production.min.js        1.02  1533.8±24.99µs     4.0 MB/sec     1.00  1498.6±12.46µs     4.1 MB/sec
formatter/router.ts                      1.07      4.1±0.38ms    15.0 MB/sec     1.00      3.8±0.21ms    16.1 MB/sec
formatter/tex-chtml-full.js              1.10   265.7±23.36ms     3.4 MB/sec     1.00   240.8±20.58ms     3.8 MB/sec
formatter/three.min.js                   1.00    126.8±9.68ms     4.6 MB/sec     1.00   127.0±13.34ms     4.6 MB/sec
formatter/typescript.js                  1.01   873.1±69.30ms    10.9 MB/sec     1.00   866.7±77.22ms    11.0 MB/sec
formatter/vue.global.prod.js             1.05     45.6±4.58ms     2.6 MB/sec     1.00     43.4±4.41ms     2.8 MB/sec

MichaReiser · 2022-10-12T07:28:04Z

!bench_formatter

netlify · 2022-10-12T07:28:05Z

✅ Deploy Preview for rometools canceled.

Name	Link
🔨 Latest commit	`5173919`
🔍 Latest deploy log	https://app.netlify.com/sites/rometools/deploys/63469b84f97a4000073c1c0a

github-actions · 2022-10-12T07:34:14Z

Playground for commit 1bec544

github-actions · 2022-10-12T08:00:44Z

Formatter Benchmark Results

group                                    main                                   pr
-----                                    ----                                   --
formatter/checker.ts                     1.02    429.9±2.21ms     6.0 MB/sec    1.00    421.9±2.31ms     6.2 MB/sec
formatter/compiler.js                    1.04    238.2±1.45ms     4.4 MB/sec    1.00    228.2±1.61ms     4.6 MB/sec
formatter/d3.min.js                      1.05    184.4±0.78ms  1455.6 KB/sec    1.00    176.3±1.98ms  1522.1 KB/sec
formatter/dojo.js                        1.02     12.0±0.12ms     5.7 MB/sec    1.00     11.8±0.10ms     5.8 MB/sec
formatter/ios.d.ts                       1.04    262.0±1.48ms     7.1 MB/sec    1.00    250.9±2.01ms     7.4 MB/sec
formatter/jquery.min.js                  1.01     49.7±0.28ms  1704.1 KB/sec    1.00     49.0±0.26ms  1728.8 KB/sec
formatter/math.js                        1.04    361.6±2.11ms  1833.9 KB/sec    1.00    348.0±2.23ms  1905.2 KB/sec
formatter/parser.ts                      1.00      8.0±0.04ms     6.1 MB/sec    1.00      7.9±0.05ms     6.1 MB/sec
formatter/pixi.min.js                    1.03    197.9±1.08ms     2.2 MB/sec    1.00    192.3±1.86ms     2.3 MB/sec
formatter/react-dom.production.min.js    1.07     60.9±0.64ms  1935.7 KB/sec    1.00     56.8±0.67ms     2.0 MB/sec
formatter/react.production.min.js        1.01      2.7±0.02ms     2.3 MB/sec    1.00      2.7±0.01ms     2.3 MB/sec
formatter/router.ts                      1.01      6.6±0.05ms     9.3 MB/sec    1.00      6.6±0.05ms     9.3 MB/sec
formatter/tex-chtml-full.js              1.05    467.7±1.30ms  1995.2 KB/sec    1.00    447.1±2.23ms     2.0 MB/sec
formatter/three.min.js                   1.06    242.0±0.85ms     2.4 MB/sec    1.00    228.7±1.86ms     2.6 MB/sec
formatter/typescript.js                  1.03   1594.6±7.11ms     6.0 MB/sec    1.00   1546.3±7.47ms     6.1 MB/sec
formatter/vue.global.prod.js             1.05     78.8±0.59ms  1565.5 KB/sec    1.00     75.2±0.97ms  1640.4 KB/sec

ematipico

Looks good to me. There's a warning in the documentation

crates/rome_formatter/src/format_element.rs

ematipico · 2022-10-12T08:24:23Z

crates/rome_formatter/src/format_element.rs

+        // The position of the dynamic token in the unformatted source code
+        source_position: TextSize,


This sounds weird to me.. why a position is a TextSize and not a TextRange? (the documentation says range) I would expect a TextSize to be an offset or an index ... or is it just a misunderstanding of words and we're talking about the same thing?

It's the position where the text starts. The range can be computed by source_position + slice.text_len()

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

calibre-analytics · 2022-10-12T09:31:36Z

Comparing perf(rome_formater): Inline FormatElement::Text Snapshot #5 to median since last deploy of rome.tools.

	LCP^?	CLS^?	TBT^?
Overall ^{Median across all pages and test profiles}	1.77s ^from 555ms	0.0 ^no change	154ms ^from 41ms
Chrome Desktop ^{Chrome Desktop • Cable}	1.77s ^from 573ms	0.0 ^no change	314ms ^from 222ms
iPhone, 4G LTE ^{iPhone 12 • 4G LTE}	854ms ^from 218ms	0.0 ^no change	16ms ^from 6ms
Motorola Moto G Power, 3G connection ^{Motorola Moto G Power • Regular 3G}	13.2s ^from 555ms	0.0 ^no change	154ms ^from 41ms

1 page tested

Home

Browser previews

Chrome Desktop	iPhone, 4G LTE	Motorola Moto G Power, 3G connection

Most significant changes

	Value	Budget
JS Parse & Compile iPhone, 4G LTE	450ms ^from 8ms
JS Parse & Compile Motorola Moto G Power, 3G connection	1.55s ^from 29ms
Total JavaScript Size in Bytes Chrome Desktop	4.31 MB ^{from 86.8 KB}
Total JavaScript Size in Bytes iPhone, 4G LTE	4.31 MB ^{from 86.8 KB}
Total JavaScript Size in Bytes Motorola Moto G Power, 3G connection	4.31 MB ^{from 86.8 KB}

_{28 other significant changes: JS Parse & Compile on Chrome Desktop, First Contentful Paint on Motorola Moto G Power, 3G connection, Largest Contentful Paint on Motorola Moto G Power, 3G connection, Speed Index on Motorola Moto G Power, 3G connection, Total Page Size in Bytes on Chrome Desktop, Total Page Size in Bytes on iPhone, 4G LTE, Total Page Size in Bytes on Motorola Moto G Power, 3G connection, Number of Requests on Chrome Desktop, Number of Requests on iPhone, 4G LTE, Number of Requests on Motorola Moto G Power, 3G connection, Time to Interactive on Motorola Moto G Power, 3G connection, First Contentful Paint on Chrome Desktop, Time to Interactive on Chrome Desktop, First Contentful Paint on iPhone, 4G LTE, Speed Index on Chrome Desktop, Speed Index on iPhone, 4G LTE, Time to Interactive on iPhone, 4G LTE, Largest Contentful Paint on iPhone, 4G LTE, Total Blocking Time on Motorola Moto G Power, 3G connection, Largest Contentful Paint on Chrome Desktop, Total Image Size in Bytes on Chrome Desktop, Total Image Size in Bytes on iPhone, 4G LTE, Total Image Size in Bytes on Motorola Moto G Power, 3G connection, Total HTML Size in Bytes on Chrome Desktop, Total HTML Size in Bytes on iPhone, 4G LTE, Total HTML Size in Bytes on Motorola Moto G Power, 3G connection, Lighthouse Performance Score on Motorola Moto G Power, 3G connection, Lighthouse Performance Score on Chrome Desktop}

_{Calibre: Site dashboard | View this PR | Edit settings | View documentation}

refactor(rome_formater): Inline FormatElement::Text

2e957a4

MichaReiser temporarily deployed to netlify-playground October 12, 2022 07:28 Inactive

MichaReiser changed the title ~~refactor(rome_formater): Inline FormatElement::Text~~ perf(rome_formater): Inline FormatElement::Text Oct 12, 2022

MichaReiser added the A-Formatter Area: formatter label Oct 12, 2022

MichaReiser added this to the 10.0.0 milestone Oct 12, 2022

Fix tests

8c7e770

MichaReiser temporarily deployed to netlify-playground October 12, 2022 08:01 Inactive

MichaReiser marked this pull request as ready for review October 12, 2022 08:02

MichaReiser requested a review from ematipico as a code owner October 12, 2022 08:02

MichaReiser requested a review from leops October 12, 2022 08:02

ematipico approved these changes Oct 12, 2022

View reviewed changes

Update crates/rome_formatter/src/format_element.rs

7e3c0a3

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

MichaReiser temporarily deployed to netlify-playground October 12, 2022 09:29 Inactive

Documentation

fd2eeb5

MichaReiser temporarily deployed to netlify-playground October 12, 2022 09:32 Inactive

Clippy

45827d7

MichaReiser temporarily deployed to netlify-playground October 12, 2022 09:37 Inactive

Doc link

5173919

MichaReiser temporarily deployed to netlify-playground October 12, 2022 10:48 Inactive

MichaReiser merged commit 2935526 into main Oct 12, 2022

MichaReiser deleted the refactor/inlined-text branch October 12, 2022 12:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

perf(rome_formater): Inline `FormatElement::Text` #3403

perf(rome_formater): Inline `FormatElement::Text` #3403

Uh oh!

MichaReiser commented Oct 12, 2022 •

edited

Loading

Uh oh!

MichaReiser commented Oct 12, 2022

Uh oh!

netlify bot commented Oct 12, 2022 •

edited

Loading

Uh oh!

github-actions bot commented Oct 12, 2022 •

edited

Loading

Uh oh!

github-actions bot commented Oct 12, 2022

Uh oh!

ematipico left a comment

Uh oh!

Uh oh!

ematipico Oct 12, 2022

Uh oh!

MichaReiser Oct 12, 2022

Uh oh!

calibre-analytics bot commented Oct 12, 2022 •

edited

Loading

Browser previews

Most significant changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		// The position of the dynamic token in the unformatted source code
		source_position: TextSize,

perf(rome_formater): Inline FormatElement::Text #3403

perf(rome_formater): Inline FormatElement::Text #3403

Uh oh!

Conversation

MichaReiser commented Oct 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Main

This Branch

Uh oh!

MichaReiser commented Oct 12, 2022

Uh oh!

netlify bot commented Oct 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for rometools canceled.

Uh oh!

github-actions bot commented Oct 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 12, 2022

Formatter Benchmark Results

Uh oh!

ematipico left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ematipico Oct 12, 2022

Choose a reason for hiding this comment

Uh oh!

MichaReiser Oct 12, 2022

Choose a reason for hiding this comment

Uh oh!

calibre-analytics bot commented Oct 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1 page tested

Browser previews

Most significant changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

perf(rome_formater): Inline `FormatElement::Text` #3403

perf(rome_formater): Inline `FormatElement::Text` #3403

MichaReiser commented Oct 12, 2022 •

edited

Loading

netlify bot commented Oct 12, 2022 •

edited

Loading

github-actions bot commented Oct 12, 2022 •

edited

Loading

calibre-analytics bot commented Oct 12, 2022 •

edited

Loading