js-framework-benchmark icon indicating copy to clipboard operation
js-framework-benchmark copied to clipboard

Suggestion: Improvement for Vanillajs-1 implementation

Open antonmak1 opened this issue 1 year ago • 2 comments

While working on the framework, I noticed that the implementation in vanillajs-1 could, in theory, be improved. Implementation now:

let a = this.tbody.firstChild.nextSibling,
b = a.nextSibling,
c = this.tbody.childNodes[998],
d = c.nextSibling;
this.tbody.insertBefore(c, b);
this.tbody.insertBefore(a, d);

It can be replaced with similar code. In my tests, it works a little faster:

let a = this.tbody.firstChild.nextSibling,
b = a.nextSibling,
c = this.tbody.childNodes[998];
if (b === c) {
 this.tbody.insertBefore(c,a)
 return;
}
this.tbody.insertBefore(this.tbody.replaceChild(a, c), b);

In theory, this is because the nextSibling method is called once, not twice (b,d). I don’t know, maybe I’m wrong, so please correct me if it’s not difficult, but it seems to me that this will be faster.

Or, start the swap not from the beginning, but from the end.

let a = this.tbody.childNodes[998],
b = a.nextSibling,
c = this.tbody.childNodes[1];
//if (b === c) {
// this.tbody.insertBefore(c,a)
// return;
//}
this.tbody.insertBefore(this.tbody.replaceChild(a, c), b);

Then, the condition is removed. But, as I understand it, this option is not being considered, because other implementations of vanillajs are based slightly differently.

antonmak1 avatar Mar 18 '24 09:03 antonmak1

An improved version wouldn't use childNodes and instead use tbody.lastChild and prevSibling to get the 998 element.

trueadm avatar Mar 21 '24 10:03 trueadm

@trueadm Yes, that's also possible. But what probably plays a role here is that the insertBefore method is used in logic with a kind of checkpoint (whatever you want), behind which nodes are added, if we take the perspective of future frameworks as an example, like in vanillajs there is no such thing, but in general this is assumed (in general, such The checkpoint must be removed so that the DOM does not clog). And there other vanillajs are somehow built a little differently, so the implementation is probably the same here. And, in general, I don’t understand why in one case we take a node through a pass through the nodes, and in the second we take it from an array of child nodes.

antonmak1 avatar Mar 21 '24 10:03 antonmak1