How to make ReLaXed faster ?

[Zulko]

This issue is intended as general discussion research on how to improve user experience by making rendering faster while avoid partially-rendered PDF documents.

Open questions:

• How to make sure the page is fully rendered before generating a PDF ? Right now this done by
  • Allowing figures and diagrams to be generated separately and included in the page as images/svgs, so that there is no rendering lag.
  • Waiting until "networkidle2" (this line) i.e. until no network exchanges, before rendering. I am wondering if this is too conservative, some pages dont need that and in my experience it really adds a lot of overhead. Would domContentLoaded work better in most cases ? If that's the case, we can always let users a choice.

I am wondering if other solutions would make ReLaXed faster:

• Would puppeteer's page.reload() be faster ?
• would a "hot reload" of the page where only a "diff" of the DOM is changed make the rendering faster ?
• Are there options Chromium startup options that would make it faster ?

Any other suggestions ?

[DanielRuf]

Great idea.

Here are some of my thoughts and ideas:

page.eval with checking for documentReady or similar might be also a solution. Never checked for the idle status.

H(M)R is typically faster (that's what we do in React and other UI frameworks).

[Zulko]

The waitFor in the line linked is actually equivalent to a page.eval from what I understand.

[benperiton]

I'm not sure that Hot Reload would make a /massive/ difference, the time spent (for me at least) is printing the PDF, not generating the HTML.

Waiting until 'networkidle2' does seem to add an extra second to the PDF printing. Is this only needed if remote images/styles are being requested? If so could it be checked when creating the HTML with Cheerio and if there are any remote urls in the content, then set that option, otherwise ignore it?

Avg time ins seconds:

	PDF Disabled	PDF Enabled	PDF Enabled - no networkidle2
Small (1 page)	0.10	1.19	0.30
Large (81 pages)	0.65	3.67	2.84

A quick test on a .pug file containing pug syntax/markdown and scss styling:

large.pug

• 5390 lines
• 81 pages

PDF Output disabled

[10:51:59] ben@helmclever ⮀ ~/D/W/R/test ⮀ relaxed src/large.pug doc/large.pdf --watch assets --temp tmp
Watching src/large.pug and its directory tree.

Processing detected change in /large.pug...
... done in 1.13s

Processing detected change in /large.pug...
... done in 0.76s

Processing detected change in /large.pug...
... done in 0.59s

Processing detected change in /large.pug...
... done in 0.60s

Processing detected change in /large.pug...
... done in 0.53s

Processing detected change in /large.pug...
... done in 0.58s

Processing detected change in /large.pug...
... done in 0.60s

Processing detected change in /large.pug...
... done in 0.58s

Processing detected change in /large.pug...
... done in 0.53s

Processing detected change in /large.pug...
... done in 0.55s

PDF Output enabled

[10:54:26] ben@helmclever ⮀ ~/D/W/R/test ⮀ relaxed src/large.pug doc/large.pdf --watch assets --temp tmp
Watching src/large.pug and its directory tree.

Processing detected change in /large.pug...
... done in 5.16s

Processing detected change in /large.pug...
... done in 3.47s

Processing detected change in /large.pug...
... done in 3.50s

Processing detected change in /large.pug...
... done in 3.51s

Processing detected change in /large.pug...
... done in 3.50s

Processing detected change in /large.pug...
... done in 3.43s

Processing detected change in /large.pug...
... done in 3.45s

Processing detected change in /large.pug...
... done in 3.49s

Processing detected change in /large.pug...
... done in 3.52s

Processing detected change in /large.pug...
... done in 3.68s

PDF Output enabled (without {waitUntil: 'networkidle2'})

[10:59:57] ben@helmclever ⮀ ~/D/W/R/test ⮀ relaxed src/large.pug doc/large.pdf --watch assets --temp tmp
Watching src/large.pug and its directory tree.

Processing detected change in /large.pug...
... done in 3.74s

Processing detected change in /large.pug...
... done in 2.88s

Processing detected change in /large.pug...
... done in 2.75s

Processing detected change in /large.pug...
... done in 2.74s

Processing detected change in /large.pug...
... done in 2.65s

Processing detected change in /large.pug...
... done in 2.73s

Processing detected change in /large.pug...
... done in 2.73s

Processing detected change in /large.pug...
... done in 2.76s

Processing detected change in /large.pug...
... done in 2.69s

Processing detected change in /large.pug...
... done in 2.70s

small.pug

• 22 lines
• 1 page

PDF Output disabled

[15:13:54] ben@helmclever ⮀ ~/D/W/R/test ⮀ relaxed src/small.pug doc/small.pdf --watch assets --temp tmp
Watching src/small.pug and its directory tree.

Processing detected change in /small.pug...
... done in 0.35s

Processing detected change in /small.pug...
... done in 0.10s

Processing detected change in /small.pug...
... done in 0.09s

Processing detected change in /small.pug...
... done in 0.13s

Processing detected change in /small.pug...
... done in 0.15s

Processing detected change in /small.pug...
... done in 0.09s

Processing detected change in /small.pug...
... done in 0.12s

Processing detected change in /small.pug...
... done in 0.12s

Processing detected change in /small.pug...
... done in 0.09s

Processing detected change in /small.pug...
... done in 0.12s

PDF Output enabled

[15:14:53] ben@helmclever ⮀ ~/D/W/R/test ⮀ relaxed src/small.pug doc/small.pdf --watch assets --temp tmp
Watching src/small.pug and its directory tree.

Processing detected change in /small.pug...
... done in 1.19s

Processing detected change in /small.pug...
... done in 1.18s

Processing detected change in /small.pug...
... done in 1.18s

Processing detected change in /small.pug...
... done in 1.19s

Processing detected change in /small.pug...
... done in 1.18s

Processing detected change in /small.pug...
... done in 1.22s

Processing detected change in /small.pug...
... done in 1.18s

Processing detected change in /small.pug...
... done in 1.20s

Processing detected change in /small.pug...
... done in 1.21s

Processing detected change in /small.pug...
... done in 1.21s

PDF Output enabled (without {waitUntil: 'networkidle2'})

[15:17:13] ben@helmclever ⮀ ~/D/W/R/test ⮀ relaxed src/small.pug doc/small.pdf --watch assets --temp tmp
Watching src/small.pug and its directory tree.

Processing detected change in /small.pug...
... done in 0.80s

Processing detected change in /small.pug...
... done in 0.24s

Processing detected change in /small.pug...
... done in 0.23s

Processing detected change in /small.pug...
... done in 0.26s

Processing detected change in /small.pug...
... done in 0.28s

Processing detected change in /small.pug...
... done in 0.26s

Processing detected change in /small.pug...
... done in 0.23s

Processing detected change in /small.pug...
... done in 0.25s

Processing detected change in /small.pug...
... done in 0.26s

Processing detected change in /small.pug...
... done in 0.21s

[Zulko]

@benperiton awesome, that's the kind of data I am after. The question is what happens for short files. In that case, I expect the processing time to be much less, and the networkidle2 overhead increases it severalfold.

[benperiton]

@Zulko I've added some numbers for a small.pug file. (and a little avg table)

[Zulko]

Awesome, so yeah, for small pug files, going from 1.20 to 0.20 seconds would be a great improvement, almost like real-time rendering. Very useful when you are crafting a leaflet or any otherwise complex one-page document.

[benperiton]

Yea, there's quite a big jump! It does seem that the first run is always slower than the rest, not quite sure why that is, it does skew the average slightly but potentially some low hanging fruit to speed it up overall.

[Zulko]

Since v0.1.4 ReLaXed is much faster, and also gives a better breakdown of it's different rendering steps, which should make it easier to optimize particular cases in the future. Turns out that mathjax rendering was also a bottleneck so it is now optional and replaceable by the faster Katex.