有没有办法修复/重塑这个jQuery脚本，以便它可以消耗更少的内存并运行得更快？(我使用的是 1.6.2)

Question

我是jQuery新手，我正在用它制作幻灯片旋转播放我不知道这里是否遗漏了什么所以请看看我的脚本:

function gotoItem(main, hidden, con, speed, state) {
con.css('display', 'none');
switch(state) {
    case 'next' :
    main.children(':first').appendTo(hidden).css('left','0px');
    hidden.children(':first').appendTo(main).css('left', '730px');
    lmove = '-=120px';
    middle = 3;
    end = 6;
    break
    case 'prev' :
    main.children(':last').prependTo(hidden).css('left', '0px');
    hidden.children(':last').prependTo(main).css('left', '-230px');
    lmove = '+=120px';
    middle = 3;
    end = 6;
    break;
}
main.children().each(function(i) {
    if(i==end) {
        $(this).stop().animate({
        left: lmove
        }, speed, function() {
        con.css('display', 'block');
        });
    } else {
        if(i==middle) {
            $(this).stop().animate({
            left: lmove,
            opacity : 1
            }, speed);
        } else {
            $(this).stop().animate({
            left: lmove,
            opacity : 0.3
            }, speed);
        }
    }
    });
}

实际上代码没有什么问题，但是当我发现脚本占用了大量内存(每次函数运行大约100kb)时，它真的让我很困扰，更不用说cpu上下浮动了大约20- 30%(我使用单核笔记本电脑，我的浏览器是Chrome 12)。我用Firefox测试了一下，结果基本相同。有什么建议吗?我应该如何重写脚本，使它可以更快/更少的内存泄漏?或者我对剧本已经无能为力了?提前谢谢大家

Answer 1

动画左属性总是占用内存。您可以使用指定overflow:hidden;的覆盖div，然后使用.scrollLeft()来动画幻灯片。

参考jQuery for Designers - Fun with overflow

这已经把我们带到了另一个点，你可以节省资源。与浏览器随后必须呈现的附加和前置项不同，您最初加载内容并将其置于视线之外。这显然是性能与加载时间之间的一个决定，可能对您的整体性能影响不大，但一般来说，如果您的目标是低端机器，则应避免大量的Dom操纵。