Javascript 使用此选择器和多个动画提高性能

我想提高我的网站性能。该场地以多个

高度建造：100%；宽度：100%

部分，例如以下构建（乘以十倍）：

这需要在移动设备上提供大量性能

我只想使用

.section.active

设置当前div的动画，然后在不使用动画的情况下切换其他每个div（以保存性能）

最快最干净的方法是什么？我是否必须创建两个函数

start\u action

和

start\u action\u no\u animation

，并在

.section.active

和所有其他

部分启动一个

如果我缓存我的选择器
var example=$（'.example'，#fullpage）
我是否可以将此缓存的选择器与
$（'.section.active）组合。查找（示例）

@MarianRick:在阅读您的问题后，我了解到，当单击新的“.trigger”块时，您希望关闭所有其他没有动画的“.example”块。
我稍微修改了javascript以创建此代码段。单击“.trigger”时，它会隐藏所有其他“.example”块。

关于优化，这有点优化了，因为它没有切换每个“.example”块，这减少了DOM操作的数量。在关闭另一个打开的“示例”块时，它也不使用缓和/淡入动画

但我不知道是否需要“.section.active”选择器。如果这不是你想要的，那么请提供更多细节，以便更清楚

下面是我的代码片段：


$（'span.trigger'）。在（'click'，function（）上{
var trigger_el=$（本）；
触发器_el.parent（）.同级（'.section'）.children（'.example'）.hide（）；
触发器同级（'.example'）.fadeToggle（）；
});
.trigger{
光标：指针；
}
.举例{
显示：无；
}
#整版{
身高：100%；
宽度：100%；
位置：相对位置；
}
.科{
高度：80px；
宽度：100%；
}
#f01{
背景色：红色；
}
#f02{
背景颜色：蓝色；
}
#f03{
背景颜色：绿色；
}
#f04{
背景颜色：黄色；
}
#f05{
背景颜色：橙色；
}

按钮
内容
按钮
内容
按钮
内容
按钮
内容
按钮
内容
jQuery在绝大多数浏览器的幕后动画中做了大量工作，但是

在动画方面不是很好。由于良好的浏览器和快速的机器，像Velocity.js和Greensock这样的库非常有用。因此，如果您利用CSS（3）动画功能，浏览器就足够好了

因此，您不必使用jQuery动画方法，只需使用CSS类、CSS3
transition
和jQuery，只需切换元素的类即可：


.section {height: 80px;}
.trigger {cursor: pointer;}
.content { opacity: 0; transition: opacity 1s; }
.CSS3fadeIn{opacity: 1;}


请注意，上面我在不透明度上使用了CSS3转换。你可能想做任何你需要的事。（还可以使用不同的动画库、jQuery、CSS3和不同的设备进行测试）


缓存选择器仅当您计划在代码中的某个位置再次（…并再次）重用相同的选择器时，才意味着性能上的：

$(".partyBrakers").remove(); // No need to cache those guys. We don't need them.
// Some fun going on here...

缓存选择器可以提高速度，特别是在函数频繁运行（如在循环中）调用相同元素时

// Mean You:                    // Computer:
setInterval( letsDance, 800 );  // "OK, let's do that dance"
function letsDance() {
  $(".dancer").fadeToggle();    // "Wait, let me find dancers first. ugh.. OK guys, dance."
}


你说得对

通过向元素中添加动态和添加可变选择器类，有两种方法，一种是较慢的方法，另一种是较快的方法。

缓慢的方式是，当您将一个类分配给一个单击的元素时，而不是在某个时候您想要调用这些元素：

var $danceFloor = $("#danceFloor");
var $dancers    = $danceFloor.find(".dancer"); 
// some party with $dancers here...
// At some point in time some $dancer can become a .tiredDancer
$dancers.on("click", function(){
   $(this).addClass("tiredDancer");
});
// and you meanly want to 
$("#button_kickTiredDancers").on("click", function() {
    $danceFloor.find(".tiredDancer").remove();  // Ohhh... OK, wait let me ask everyone..
});

上面，即使我们缓存了这些家伙，我们仍然需要在
#danceFloor
上找到最终成为
.tiredDancer
的舞者

更快的方法是创建一个
listofTiredCancers
数组，并将选定的元素放入其中：

var listOfTiredDancers = [];
// ...
$dancers.on("click", function(){
   listOfTiredDancers.push( this );
});

将
一个累坏的元素对象（
此
）推到该数组列表中，需要时只对该列表执行操作：

$("#button_kickTiredDancers").on("click", function() {
    $( listOfTiredDancers ).remove();     // YEY! I know already who those are!
});

防止“在文档对象模型中查找那些元素”（特别是如果您有大量的元素）。
我担心您所做的工作对总体性能没有太大影响。至少当你说：
“我只想为当前的div设置动画”
——而你的代码目前没有这样做（因为你正在为每个
.example
div设置动画），但完成后，最终使用CSS3动画或像Greensock这样的好库，你甚至不需要为其他元素设置动画。（现在不设置其他元素的动画仍然很奇怪……但我正在试图弄清楚您真正需要什么。）非常感谢@roko，您让我对如何使用选择器和缓存工作有了更深入的了解。一个问题：首先设置
var$dancers
，然后使用
$dancer
als选择器。这是个错误吗？因为您从未设置
var$dancer=something
@是的，我错了。那是深夜。修复了我的打字错误
$dancer>$dancers
// Good You:                    // Computer:
var $dancers = $(".dancer");    // "Hi guys! Wanna dance?"
setInterval( letsDance, 800 );  // "Let's dance!"
function letsDance() {
   $dancers.fadeToggle();       // "You know the move! YEY"
}

var $danceFloor = $("#danceFloor");
var $dancers    = $danceFloor.find(".dancer"); 
// some party with $dancers here...
// At some point in time some $dancer can become a .tiredDancer
$dancers.on("click", function(){
   $(this).addClass("tiredDancer");
});
// and you meanly want to 
$("#button_kickTiredDancers").on("click", function() {
    $danceFloor.find(".tiredDancer").remove();  // Ohhh... OK, wait let me ask everyone..
});

var listOfTiredDancers = [];
// ...
$dancers.on("click", function(){
   listOfTiredDancers.push( this );
});

$("#button_kickTiredDancers").on("click", function() {
    $( listOfTiredDancers ).remove();     // YEY! I know already who those are!
});