Javascript - Wie die Leistung zu erhöhen?

Question

<script> 
    function mySlide() 
    { 
     var myFx = new Fx.Slide('my-slide', { 
      duration: 1000, 
      transition: Fx.Transitions.Pow.easeOut 
     }); 

     //Toggles between slideIn and slideOut twice: 
     myFx.toggle().chain(myFx.toggle); 

    } 

    var interval = null; 

    function clearTime() 
    { 
     $clear(interval); 
    } 

    function play() 
    { 
     interval = mySlide.periodical(1000); 
    } 
</script> 
<div onclick="clearTime();"> stop </div> 
<div onclick="play();"> play </div> 
<img id="my-slide" src="http://lh5.ggpht.com/_8Nsej4QeRGg/TE5m5zRf4bI/AAAAAAAAAgo/pQGKPX8zn9c/gadget-01.jpg"/> 

Wenn ich den obigen Code mit Safari versucht, der Task-Manager in Windows CPU-Auslastung von 30% -50%

zeigt Wenn ich den obigen Code in einer ganzen Seite mit anderem HTML-Code zu setzen, die Nutzung ist 60% -70%

Was ist also anders? Warum ist die js schneller auf einer klaren Seite?

Answer 1

Da Ihr Skript die Seite beeinflusst. Ich nehme an, dass es der Seite etwas hinzufügt und es dann animiert. Dies erfordert den Browser:

• die Elemente auf der Seite für die Position suchen Ihr neues Element (e) (so genannte DOM Traversal einfügen - nicht so sehr ein Problem, da Sie eine ID verwenden, und nicht komplexe Selektoren)
• berechnet und wieder machen die Seite als Elemente um geschoben bekommen (so genannten Reflow - dies ist die teuerste)

daher im allgemeinen, je mehr Elemente auf Ihrer Seite, und je mehr CSS-Regeln Je länger die DOM-Traversierung und der Reflow dauert.

Mehr auf Reflow:

• http://code.google.com/speed/articles/reflow.html
• http://www.mozilla.org/newlayout/doc/reflow.html