有什么方法可以修复/改造这个 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 操作。