search

ryansolid / dom-expressions

A Fine-Grained Runtime for Performant DOM Rendering
MIT License
865 stars 124 forks source link

Lazily create template DOM nodes #116

Closed novacrazy closed 2 years ago

novacrazy commented 2 years ago

This slightly changes the codegen and how template works to defer DOM template node creation until the first invocation.

This should improve startup times for large applications by avoiding document.createElement calls on yet-unused templates until they're actually needed, which for many large applications is dynamic and varying. We have to dip into the DOM to clone the template nodes anyway, so creating the template at the same time shouldn't interrupt flow too much.

After the node has been created, it replaces the function to return a clone of the node for regular usage, so subsequent calls should be quite cheap/zero-cost.

This was talked about some on Discord, but I figure a draft PR would be a better place.

novacrazy commented 2 years ago

Have there been any additional thoughts on this in the past month?

novacrazy commented 2 years ago

Copying this from Discord:

Since I'm revisiting this, I had an idea for how to benchmark template and tried it out by just manually patching the dist files. As it turns out, both Firefox and Chrome are remarkably good at optimizing that. So... perhaps all this was kind of pointless.

For my production application that has around 200 generated templates, it takes 4.5ms total to do all of the template calls. The very first call takes the longest, at 0.12ms, and it JITs that immediately so all other calls are like 0.02ms.

I'm guessing the combination of JIT and internal optimizations to createElement("template") nodes to not actually do most DOM stuff means there really isn't much/any benefit to this. And actually, because the JIT is involved, this PR may be negative.

So I'm going to go ahead and close this.

ryansolid commented 2 years ago

Ok I'm glad you did the testing. There may still be a reason for this in the future, but maybe not on its own right. Thank you so much for exploring this.