dascritch / cpu-audio

An audio WebComponent to provide timecoded links and other features to an audio tag
https://dascritch.github.io/cpu-audio/
GNU Lesser General Public License v3.0
24 stars 2 forks source link

Remove <template> mechanism #148

Closed dascritch closed 3 years ago

dascritch commented 3 years ago

It seemed a good idea, using a standard system. But in fact,

  1. we wait for the DOM to be ready
  2. we populate a <template> by writing its innerHTML,
  3. Then, for each component, we read the <template> innerHTML to write the shadowRoot via innerHTML.

Even if it was supposed to be done like that per standards, as our webcomponent is not supposed to overcloog the hosting pages, or sharing with other tier code that need its template, and we may create a lot of bottlenecking operations...

Let's remove it, we will also remove the unuseful DOMContentLoaded stop, so the paint operations will occur really sooner.

dascritch commented 3 years ago

Results are completely explosive. On my website (one <cpu-audio> in the front page, one <cpu-controller> in header) :

metric before after
build size 48781 48596
LightHouse perf on cpu.pm 76 92
First Contentful Paint 1,1 s 1.0 s
Speed Index 1,6 s 1.2 s
Largest Contentful Paint 2,9 s 2.8 s
Time to Interactive 2,7 s 2.2 s
Total Blocking Time 800 ms 330ms
Cumulative Layout Shift 0,147 0.144

So, yes, 3 writes and 2 read via innerHTML is really costly... instead of two writes only

dascritch commented 3 years ago

Can do a bit better

dascritch commented 3 years ago

No , no async (async () =>{ /* window.custom... */ } , this is a wrong idea, as we need CpuControllerElement instancied after CpuAudioElement

dascritch commented 3 years ago

Another one for the screenshot :

image