Long text in JSX is slow

[k15a]

If you have a lot of text in JSX Prettier is really slow. It takes around 2 seconds to print a file with 1000 lines of text where it takes only 200 ms to print a file with 1000 lines of tags.

[azz]

We should profile it, see what's eating up the CPU.

[duailibe]

I did a very quick test, with a large file that took prettier ~3.6s to format, and it looks the first culprit is a call to assertDoc in fill():

prettier/src/doc-builders.js

Lines 58 to 62 in 2332c5c

	function fill(parts) {
	parts.forEach(assertDoc);
	return { type: "fill", parts };
	}

Which is a very simple code (some typeof checks that shouldn't be too slow), but it's called N times in printDocToString:

prettier/src/doc-printer.js

Lines 300 to 301 in 2332c5c

	const remaining = parts.slice(2);
	const remainingCmd = [ind, mode, fill(remaining)];

Making that algorithm quadratic if I did understood correctly. Removing the check completely reduced the time to ~1.1s.

With that out of that way, the 2nd culprit is slicing that very large array in printDocToString (see code snippet above) for every pair of elements (also making it quadratic). Changing the code to mutate the array, reduced the time to ~250ms.

Then I re-added the assertDoc calls and the time went up to ~2.8s.

[duailibe]

I think we're good now, reduced to about ~20% of the time :-)

[karl]

Awesome work on this @duailibe!

That is a huge improvement over my naive implementation of fill.

[duailibe]

Thanks! Thankfully the code is really well written it was easy to understand it 😄