为单页网站优化jquery动画

Question

我最近的任务是创建一个HTML驱动的网页，将模拟基本的Flash转换和动画，这使我转向jQuery，自然。该网站有四个不同的页面，每个页面都有其特定的背景和一小段文字。

简单吗？显然不适合我。当我将交互式模拟运行到批准状态时，我遇到了动作缓慢的问题，仅针对显示器超过18英寸的（惊喜，惊喜）Mac电脑。我运行测试的电脑在所有主流浏览器上都能很好地工作 - Chrome， IE9和FF。对于18英寸以上的Mac，然而，FF的效果最好，其余的则非常糟糕。

我已经尝试过手段和方法来优化jQuery代码，甚至使用index.html页面将所有图像预加载到浏览器缓存中，然后将用户重定向到实际网页，所有这些都希望在那里可能对处理时间的压力较小。

不幸的是，没有任何工作。

这是一个单页面设置，这样很可能只有助于低迷的主要因素之一，但它没有解释为什么它适用于个人电脑和18" 岁以下的Mac电脑的罚款。

在任何情况下，这里是我的动画代码片段在负载元素和页/部分之间的过境褪色：

$(document).ready(function(){ 

$("#home-button").click(function(){ 
    $("#home").fadeTo(2000, 1); 
    $("#location").fadeTo(2000, 0); 
    $("#services").fadeTo(2000, 0); 
    $("#contact").fadeTo(2000, 0); 
    $("#bg-img-1").fadeTo(2000, 0); 
    $("#bg-img-2").fadeTo(2000, 0); 
    $("#bg-img-3").fadeTo(2000, 0); 
    $("#bg-img-4").fadeTo(2000, 1);}); 

$("#location-button").click(function(){ 
    $("#home").fadeTo(2000, 0); 
    $("#location").fadeTo(2000, 1); 
    $("#services").fadeTo(2000, 0); 
    $("#contact").fadeTo(2000, 0); 
    $("#bg-img-1").fadeTo(2000, 0); 
    $("#bg-img-2").fadeTo(2000, 1); 
    $("#bg-img-3").fadeTo(2000, 0); 
    $("#bg-img-4").fadeTo(2000, 0);}); 

$("#services-button").click(function(){ 
    $("#home").fadeTo(2000, 0); 
    $("#location").fadeTo(2000, 0); 
    $("#services").fadeTo(2000, 1); 
    $("#contact").fadeTo(2000, 0); 
    $("#bg-img-1").fadeTo(2000, 0); 
    $("#bg-img-2").fadeTo(2000, 0); 
    $("#bg-img-3").fadeTo(2000, 1); 
    $("#bg-img-4").fadeTo(2000, 0);}); 

$("#contact-button").click(function(){ 
    $("#home").fadeTo(2000, 0); 
    $("#location").fadeTo(2000, 0); 
    $("#services").fadeTo(2000, 0); 
    $("#contact").fadeTo(2000, 1); 
    $("#bg-img-1").fadeTo(2000, 1); 
    $("#bg-img-2").fadeTo(2000, 0); 
    $("#bg-img-3").fadeTo(2000, 0); 
    $("#bg-img-4").fadeTo(2000, 0);});}); 

这里是我的背景图片的CSS样式，并且具有调整大小和作物某些图形元素根据浏览器的大小：

img.bg{ 
    min-height: 100%; 
    min-width: 900px; 
    width: 100%; 
    height: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index:-4;} 

#bg-img-1,#bg-img-2, #bg-img-3, #bg-img-4{ 
opacity:0;} 

img.d-4{ 
min-height: 100%; 
min-width: 1024px; 
width: 92%; 
height: auto; 
position: fixed; 
top:0; 
left:0; 
z-index:-3; 
opacity:0.3;} 

img.d-5{ 
min-height: 100%; 
min-width: 1024px; 
width: 92%; 
height: auto; 
position: fixed; 
margin-left:-50px; 
z-index:-3;} 

任何关于如何进一步优化和防止缓慢问题的帮助或意见非常感谢。

谢谢你们！ :)

Answer 1

那么，你不能做很多优化动画过程本身（除非你想修改jQuery本身）。你可以做的是尽量减少你的jQuery的构造函数调用：

$("#home-button").click(function(){ 
    $("#homem, #bg-img-4").fadeTo(2000, 1); 
    $("#location, #services, #contact, #bg-img-1, #bg-img-2, #bg-img-3").fadeTo(2000, 0); 
}); 

然而，这将会对动画本身没有影响。确保你使用的是最新版本的jQuery，因此它可以调用​​，这可能会解决你的一些问题。

如果这对于更流利地制作动画没有帮助，那么您可以在序列中设置动画，这会减少处理时间。可能看起来像：

$("#home-button").click(function(){ 
    (function _loop(nodelist) { 
     $(nodelist.shift()).fadeTo(2000, 0, function() { 
      _loop(nodelist); 
     }); 
    }(["#location", "#services", "#contact", "#bg-img-1", "#bg-img-2", "#bg-img-3"])); 
}); 

例：http://jsfiddle.net/FEYMQ/

Answer 2

这种优化将产生更少的jQuery对象，所以应该看到性能提升，我不知道，但把所有的动画在一个函数调用也可能会在动画中看到性能增益。

$("#contact-button").click(function(){ 
    $("#home, #location, #services, #bg-img-2, #bg-img-3,#bg-img-4").fadeTo(2000, 0); 
    $("#contact, #bg-img-1").fadeTo(2000, 1); 
}); 

Answer 3

谢谢你的建议jAndy和比利月亮。这些都是我在制作代码时不知不觉地遵守的一些很好的做法。

在所有浏览器中，页面转换现在都很好，因为只有在严格审查的情况下才能观察到缓慢;以肉眼来看，它或多或少是可以接受的。

我认为我需要首先向所有人道歉，因为我遗漏了一个非常重要的代码片段，我意识到这是导致大部分问题的原因。这里最大的问题是，当我有两个带有ID的图形 - ＃md4和＃md5 - 从左侧滑入并淡入时，它开始变得非常干燥。动画只发生一次：进入主页。为动画jQuery的：

$(document).ready(function(){ 
$('#md4').fadeTo(2000, 1); 
$('#md5').animate({left: "50px" }, 1800); 
$('.home').fadeTo(2000, 0.8); 
$('#bg-img-4').fadeTo(900, 1); 
$('#menu').fadeTo(2000, 1); 
$('#copyright').fadeTo(2000, 1);}); 

采取请注意，用IDS＃MD4和MD5＃提到的两个图形已经被风格，以适应，作物和比例延伸到浏览器的大小。下面是我之前提供，但要嵌入再次只是让我们不要混淆代码：

#md4, #md5{ 
min-height: 100%; 
min-width: 1024px; 
width: 92%; 
height: auto; 
position: fixed; 
top:0; 
left:0; 
z-index:-3; 
opacity:0.3;} 

正如前面提到的，我已经尝试通过创建一个index.html页来解决这个问题在进入主页并加载所有jquery动画之前将所有图像加载到缓存中。从理论上讲，它应该在处理负载上有一点点偏差，但在屏幕高于18“的Mac上，性能仍然非常低，无论浏览器如何，但FF版本4都是最好的。发生在18英寸以下的Mac屏幕上，但仅隔离到FF版本4及以下版本。

我已经玩过了连续发生而不是同时发生的动画排序的想法，但是我一直在犹豫，部分原因是我害怕我会对一切事情的预期效果做出太多妥协，的性能助推器。对此的一些建议也将非常感谢。所以这里最大的问题是：考虑到所有规定的参数（图片和div在页面加载时同时都在消失），我可以做什么来优化所有最新的主流浏览器和屏幕尺寸的动画这样会有最小的缓慢。

非常感谢你提前家伙。感谢所有从心底所提供的帮助。