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