javascript performance for Array

Question

i tried to figure out, what is different between two versions of a small code-snippet in execution. Do not try to understand, what this is for. This is the final code after deleting all the other stuff to find the performance problem.

function test(){
    var start=new Date(), times=100000;
    var l=["a","a"];
    for(var j=0;j<times;j++){
        var result=document.getElementsByTagName(l[0]), rl=result.length;
        for(var i=0;i<rl;i++){
            l[0]=result[i];
        }
    }
    var end=new Date();
    return "by=" + (end-start);
}

For me this snippets takes 236ms in Firefox, but if you change l[0]=result[i]; to l[1]=result[i]; it only takes 51ms. Same happens if I change document.getElementsByTagName(l[0]) to document.getElementsByTagName(l[1]). And if both are change the snippet will be slow again.

After using Google Chrome with DevTools/Profiles I see that a toString function is added when executing the slow code. But i have no chance to get which toString this is and why it is needed in that case.

Can you please tell me what is the difference for the browser so that it will take 5 times longer than the other?

Thanks

So basically, if you change the functionality to something completely different, or get a totally different element, it takes a different amount of time. Who would have thunk it ? — adeneo
– adeneo, Commented Oct 18, 2016 at 15:23
No that's the point, it seems like there's nothing different since l[0] and l[1] are both 'a'. — Louis Durand
– Louis Durand, Commented Oct 18, 2016 at 15:25
Do not try to understand That makes it a little difficult for us to help.. :), but why on earth you want to put the result of a dom list into a getElementsByTagName is way over my head. — Keith
– Keith, Commented Oct 18, 2016 at 15:26
You're setting l[0] to result[i], and then in the next iteration, using l[0] in getElementsByTagName. — Heretic Monkey
– Heretic Monkey, Commented Oct 18, 2016 at 15:26
You might consider using a service like MeasureThat to do benchmarking. — Heretic Monkey
– Heretic Monkey, Commented Oct 18, 2016 at 15:28

Lucero · Accepted Answer · 2016-10-18 15:29:30Z

1

If you only change one of the indexes to 0 or 1, the code doesn't do the same thing anymore. If you change both indexes, the performance remains identical.

When using the same index for reading and writing, what happens is that the value stored in l[0] is used in the next call to getElementsByTagName, which has to call toString on it.

answered Oct 18, 2016 at 15:29

Lucero

60.4k9 gold badges127 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erik · Accepted Answer · 2016-10-18 15:28:55Z

0

In the code above you use l[0] to search for an element. Then you change l[0] und search again and so on. If you now change only one of the two uses (not both!) to l[1], you don't change what you are searching for, which boosts the performance.

That is why when you change both it is slow again.

answered Oct 18, 2016 at 15:28

Erik

3,0982 gold badges22 silver badges35 bronze badges

Collectives™ on Stack Overflow

javascript performance for Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related