Faster to manage existing HTML or delete HTML and then recreate it?

Question

In this project that I'm working on, I have a list of elements and their conversion to a “graph” (not a true graph, but you can name it an alias). I have a data set, I start a cycle forthrough the data, and then create an element lifor each of them, create a parent ul, add li, and then add the parent element to another DOM element (we will call it grandparents) already on the page. After that, I have to make subsequent updates to this list based on user interaction.
Also, this is all in the context of using jQuery.

Now, my question is: is it faster to create the elements and then update the received HTML on every subsequent call, or is it faster to just update each element, empty()the grandparent element (which will get rid of the parent element ul) and then re-created ul(which I am doing now)?

Keep in mind that when I recreate lis, they are not in the DOM at all, so there is no reflow when they are recreated. Redrawing occurs only when re-creating a newly created one ul.

I spoke with a colleague, and he said that it would be better to just update the HTML elements after they were created, and not to recreate them every time. I thought about going along this route, but then I thought that updating an existing one liwould actually lead to redrawing, for example, 50 elements, and just make one massive s empty()and then recreate it again ul.

thoughts?

Answer 1

As rsp says , you will need to profile your decisions, because it will be the fastest, it depends both on the structure of your markup and on the specific browser on. It is also, of course, only worth the effort if you are unhappy with the speed you are getting now!

, . ; - , node.

• HTML ([...].join("")), .html(). : , # 2. : , / jQuery (.. , ).

• jQuery (, <li> <ul>, <ul> ), normall. :, , , # 1. : , .

• ( , node, , <ul>), , . : , # 2, . : , .

, , . .

Answer 2

. - .