有什么方法可以修复/重构这个 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

为 left 属性设置动画总是消耗内存。您可以使用指定了 overflow:hidden; 的覆盖 div，然后使用 .scrollLeft() 为幻灯片设置动画。

请参阅 jQuery for Designers - Fun with Overflows

这已经将我们带到了另一个点，您可以在其中节省资源。您最初加载内容并将其放在看不见的地方，而不是浏览器随后必须渲染的附加和前置项目。这显然是性能与加载时间的决定，并且可能不会对您的整体性能产生太大影响，但一般来说，如果您的目标是低端机器，则应避免大量 Dom 操作。