Hacker News new | ask | show | jobs
by tchvil 5236 days ago
The DOM is a live object while a string can be sliced and compiled in a function.

If you run a template once, either to generate a form or a simple list, the DOM is faster than innerHTML.

But if you need to repeat a template(loop), use partials or recurse, interpreted DOM manipulations will become a degree of magnitude slower than a compiled function concatenating strings.

Quickly slow enough to loose the snappy effect of client templating.

1 comments

A compiled function only gives you a really fast string creator. It doesn't make the innerHTML call any faster than it is (which is really fast, but slower than the DOM).

You can also use cloneNode to cache frequently reused DOM snippets.

The creation of a complex DOM tree(nested loop, partials, recursion) is what is slow compared to string concatenation. The injection time of the string need parsing, and will take a bit longer. But in total less time than DOM manipulations.

I'm trying for a few months now to remove the last innerHTML bits of pure.js and haven't figured out a way yet to make it as fast.