javascript - как повысить производительность?

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"/> 

Когда я попытался выше код с сафари, диспетчер задач в окнах показывает загрузку процессора на 30% -50%

Когда я ставлю выше код в полную страницу с другим кодом HTML, использование является 60% -70%

Так что же изменилось? Почему js быстрее на четкой странице?

Answer 1

Поскольку ваш скрипт влияет на страницу. Я предполагаю, что он добавляет что-то на страницу, а затем оживляет ее. Для этого требуется браузер для:

• поиска элементов на странице позиции, чтобы вставить свой новый элемент (ы) (так называемый DOM обхода - не столько проблемы, поскольку вы используете идентификатор, а не сложные селекторы)
• высчитывает и повторно отобразить страницу, как элементы получить помыкать (так называемый оплавления - это самый дорогой)

Поэтому в общем случае, чем больше элементов на странице, и больше правил CSS , тем дольше происходит обход DOM и переплавка.

Подробнее о оплавления:

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