CODEWITHSUNDEEP
javascripthtmlweb-applications
Pacerier
Pacerier

Reputation: 89753

my script takes 12 seconds to run but later the exact script takes 50 milliseconds to run?

I have this piece of code:

<!DOCTYPE html><html><head>
<style>button{disabled:true;}</style>
<script>
var d;
function when_loaded(){
    d=document.getElementById("d");
    //adding nested elements to d using different methods
    //basically just simulating a real situation
    document.title="loading..";
    for(var x=0;x<3500;++x){
        d.appendChild( document.createElement("div"));
        d.appendChild( document.createElement("div")).innerHTML = "asd";
        d.appendChild( document.createElement("div")).innerHTML = "<a href='#'>zxc</a><div>qwe</div>";
        d.appendChild( document.createElement("span")).innerHTML = "asd";
        d.appendChild( document.createElement("div")).appendChild( document.createElement("span")).appendChild( document.createElement("span"));
    }
    document.title="loading done";
    var del=document.getElementById("del");
    var del2=document.getElementById("del2");
    del.style.disabled=del2.style.disabled="false";
}

function del(){
    document.title="deleting";
    var a=new Date().getTime();
    d.innerHTML="";
    var b=new Date().getTime();
    document.title="deleted";
    alert(b-a+" milli seconds taken");
    document.body.innerHTML="you can refresh the page now and try the other button";
}

function del2(){
    document.title="deleting";
    var a=new Date().getTime();
    var c;
    while(c=d.firstChild){
        d.removeChild(c);
    }
    var b=new Date().getTime();
    document.title="deleted";
    alert(b-a+" milli seconds taken");
    document.body.innerHTML="you can refresh the page now and try the other button";
}
</script>
</head><body onload="when_loaded();">
<button id="del" onclick="del();">del</button>
<button id="del2" onclick="del2();">del2</button>
<div id="d"></div>
</body></html>

For some reason, when i ran the code the first time (in Chrome on Windows Vista Home Premium) and press the second button, it took 12 seconds to run that script.

But after that, I tried to replicate my situation. now it takes only 50 milliseconds.

I closed my browser and reopen it, it is still 50 milliseconds.

I restarted my computer.. it is still 50 milliseconds.

So my question is does anyone know what's causing that abnormality to happen and how do i replicate the abnormality?

Alas, could someone test out the second button and post how long it takes (0.05 seconds or 12 seconds)

Upvotes: 1

Views: 194

Answers (2)

Will Sheppard
Will Sheppard

Reputation: 3479

If it only took 12 seconds once, and never again, then just put it down to some other application hogging the CPU the first time.

Upvotes: 1

epascarello
epascarello

Reputation: 207547

You should never append elements to the DOM in a for loop. It keeps having to redraw the page over and over again causing slower performance.

You should create one new element as a wrapper. Append all of the new elements to this element. After the loop is done append it to the page.

Upvotes: 1

Related Questions