krausest / js-framework-benchmark

A comparison of the performance of a few popular javascript frameworks
https://krausest.github.io/js-framework-benchmark/
Apache License 2.0
6.52k stars 811 forks source link

Suggestion: Improvement for Vanillajs-1 implementation #1633

Closed antonmak1 closed 2 weeks ago

antonmak1 commented 2 months ago

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.

trueadm commented 1 month ago

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

antonmak1 commented 1 month ago

@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.