I'm using JavaScript and I have two variables:

• current_element
• new_element

Both are an instance of HTMLElement and here is their respective representation:

<!-- current_element -->
<div>
  <h1>A title</h1>
  <ul>
    <li>15</li>
    <li>18</li>
  </ul>
</div>

However new_element is represented like this:

<div>
  <h1>A title</h1>
  <ul>
    <li >15</li>
    <li>19</li>
  </ul>
</div>

As you can see, there are only two small differences between these two variables. My goal is to change the DOM. Indeed, you have the current_element that represents what there is in the DOM, and the new_element which is what I want to replace the DOM with.

My primary concern is performance.

Therefore, I'm curious to know what would be the most efficient way to apply the modifications.

• Replacing with replaceWith
• Creating a function in order to detect what changed, and apply the differences accordingly. Therefore, the only things that would apply modifications on the DOM would be the call to setAttribute and the property textContent.

I have not been able to create the function of the second proposal yet, but I assume it would be recursive.

I hope it's clear :)

CodePudding user response：

The main frameworks (React, Vue) calculates the difference between the old and new dom elements and then apply the needed changes.

In React for example this step is called Reconciliation.

So I think that if they do this in order to have the best performance, you should also.

Of course they calculates the difference on a virtual dom representation, but the same apply if you work directly on dom nodes.

CodePudding user response：

Your question is highly volatile, because whatever is more performant now may be less performant in the future. So, whatever seems to be performing better should be taken with a grain of salt. You can compare performance by creating an array of 100 elements of desirable DOM changes and do it with the first approach one after the other, measuring the cumulative time and then doing the same with the second approach.

However, it is highly advisable to check whether you have any performance issue to start with, because it is possible that you want to solve a problem that does not and will not exist in the first place. So, before doing any optimization, it's recommendable to define a function like

function changeDOM(root, innerHTML) {
    //The implementation
}

and use this function consistently, so if any performance issues come up in the future, you just change this function and everything will be quicker. Now, let's assume that you already have or will have performance issues. In that case you will need to do the comparison that I have suggested in separate browsers and then apply the solution which works best.

Also, if you have a performance issue, it is possible that it's not closely related to the DOM change. So, before you optimize the DOM change, you will need to benchmark your page and see whether there is a performance issue and the performance issue is with the DOM change. If the answer to both is "yes", then you will have to optimize this. But in order to have an easy life doing so, separate it from the rest of the code, call it as a function.