Phoenix_live_view: Could the first render of components in a loop be optimised by de-duplicating?

[henrik]

Not sure if this is the right place to raise this.

I experimented in LiveView 0.13.0 with rendering the same list of 300 simple items in three different ways – just a plain loop, or with temporary assigns + append, or with components. (Planning a blog post about how they compare.)

I noticed the initial payload for the component version was much bigger than the other two – about 50 kB where the other two are about 8 kB.

In the plain loop and temp assigns versions, the markup that is identical for every item is only sent once. But in the component loop, it's sent once per item.

So I was just wondering if this might be a good target for optimisation, or if it's hard to avoid.

This Gist has the full payloads and my example code: https://gist.github.com/henrik/c36122cd71e7aa372888098f6c1c7b89

[josevalim]

I like this idea a lot, thank you! :heart: Each component has a rendered key, so we can easily check if the rendered key is the same and, if so, we tell them to use that rendered key instead.

We may need changes in the clients though but this would be a very exciting optimization nonetheless!

[henrik]

Great! :) I don’t know the project nearly well enough to attempt it myself right now, but hopefully someone else is keen.

[josevalim]

Closing in favor of PR.

[henrik]

Just to report back on this after upgrading to 0.13.1 – first-render payload in the example code above went from 50509 bytes to 17355 bytes :)

[seb3s]

To complete Henrik's report.
My 1200+ components test board first payload went from 550KB to 395KB with this. Just for free !!!
That's really cool. Well done.

[henrik]

Finally got around to actually writing the blog post that led to me opening this issue: https://thepugautomatic.com/2020/07/optimising-data-over-the-wire-in-phoenix-liveview/ :)