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

当我用safari尝试上面的代码时，windows中的任务管理器显示CPU利用率为30%-50%。

当我把上面的代码和其他html代码放在一个完整的页面中时，使用率是60%-70%

那么有什么不同呢？为什么在清晰的页面上js会更快？

Answer 1

因为您的脚本会影响页面。我假设它在页面中添加了一些东西，然后使其具有动画效果。这需要浏览器执行以下操作：

• 在页面上的元素中搜索插入新元素的位置(称为DOM遍历-问题不大，因为您使用的是ID，而不是复杂的selectors)
• calculate )，并在元素被推来推去时重新呈现页面(称为回流-这是最昂贵的)

因此，一般来说，页面上的元素越多，CSS规则越多，DOM遍历和回流所需的时间就越长。

有关回流的更多信息：

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