🚧 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 🍻