DEV Community

Cover image for Faster way to appendElements in js πŸ‘¨πŸ»β€πŸ’»
Marcos Henrique
Marcos Henrique

Posted on • Updated on

Faster way to appendElements in js πŸ‘¨πŸ»β€πŸ’»

🚧 Spoiler:

This post is about how to dramatically decrease your UI loading time for a better UX!

The cute little but scandalous cry of the early morning πŸ˜₯

Anyone knows a common pitfall (πŸ’£) is the method used to append elements to the DOM

In my innocence of curious developer I was fiddling with old code to evaluate its performance, and I was scared even without using any framework to add elements in the DOM was with

27s to insert all the 330 components of a template from my UI in a async request.

(I mean the not so efficient JQuery, because I had the task of passing a whole project to pure javascript, but this is subject to another post).

Against a dirty diaper πŸ˜¬πŸ’©

I was using the classic innerHTML to add them to the view, which fit me at the moment this would be the fastest way πŸ€·β€β™‚οΈ

and using console.time to evaluate performance, I got a high time as seen below

Using the moist handkerchief in my tiny, cuddly conflict, I reflected existentially: How to improve it?

After some time meditating on the forums, I wrote the following function

The ninja diaper changer 🀸

Therefore in console.time I saw a incredible 26.73s of improvemment πŸ§πŸ‘Œ

Thanks for reading!πŸ™ŒπŸΌ

I am a FullStack Developer who is enthusiastic about new technologies and enhancements, and also a first-time dad 😊
This is my first post, and with it I open the way to a greater participation in the community, any doubt contact me 🍻

Top comments (4)

anduser96 profile image
Andrei Gatej • Edited

I think you can improve the performance even more if you clone the element, instead of creating one every time.

It’s just an idea, here is an example.

Good luck!

wakeupmh profile image
Marcos Henrique

Hi Andrei, I can't see a solid example in your link, Can you pass this example for me?

anduser96 profile image
Andrei Gatej

Hi! Yes, I can’t see the initial example either. They might have changed some stuff in the meanwhile.

There was just a small article showing some benchmark results. As far as I could understood, it is slightly faster to clone elements, but when working on small apps this should not be a concern.

Thread Thread
wakeupmh profile image
Marcos Henrique

Thanks for the reply, I Will study Thais, for improve my codes 🀩