🚧 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)
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!
Hi Andrei, I can't see a solid example in your link, Can you pass this example for me?
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.
Thanks for the reply, I Will study Thais, for improve my codes 🤩