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

标签 javascript jquery html performance

我想提高我的网站性能。该网站是用多个 height: 100%;宽度:100% 部分,例如以下构建(乘以十倍):

<div id="fullpage">
    <div class="section active" id="f01">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
    <div class="section" id="f02">
        <span class="trigger">Button</span>
        <div class="example">Content</div>
    </div>
</div>

div.example 默认隐藏,将在 span.trigger 上使用 fadeToggle 显示。现在发生的是,在十个 div 中的每一个上,div.example 都会淡入。

var start_action = function(){
    //a lot of random actions, for example this one:
    $('.example').stop().fadeToggle();
}

$('span.trigger').click(start_action);

这需要在移动设备上有很高的性能。

我只想使用 .section.active 为当前 div 设置动画,然后在不使用动画的情况下切换所有其他 div(以节省性能)。

最快最干净的方法是什么?我是否必须创建两个函数 start_actionstart_action_no_animation 并在 .section.active 处触发一个,在所有其他 处触发另一个.section?

如果我缓存我的选择器 var example = $('.example', #fullpage) 我可以将这个缓存的选择器与 $('.section.active).find(example )

Check the jsfiddle

最佳答案

jQuery 在绝大多数浏览器的动画幕后做了很多工作,但是
在动画方面不太好。像 Velocity.js 和 Greensock 这样的库,多亏了的浏览器和快速的机器。粗略地说,如果您利用 CSS(3) 动画功能,浏览器就足够了。

因此,您可以简单地使用 CSS 类、CSS3 transition 和 jQuery 而不是使用 jQuery 动画方法,但只是为了切换元素的类:

jsBin demo

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

// Cache:
var $fullpage = $("#fullpage");
var $sections = $fullpage.find(".section");
var $content  = $sections.find(".content");

// Store (temporary):
// inside $visible we will store our visible el,
// so we don't need to run over all our elements
// and sniff for classes:
var $visible = null; 

// (no need to cache .trigger if only used here)
$sections.on("click", ".trigger", function(){
  // Remove from $visible (if not null):
  if($visible) $visible.removeClass("CSS3fadeIn"); 
  // Set a new visible element:
  $visible = $(this).next(".content");
  // Use that $visible one now:
  $visible.addClass("CSS3fadeIn");
});

请注意,上面我在不透明度上使用了 CSS3 过渡。您可能想做任何您需要的事情。 (还使用不同的动画库、jQuery too ofc、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."
}

// 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..
});

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

更快的方法是拥有一个listOfTiredDancers 数组,并将选定的元素放入其中:

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

push一个累人的元素对象(this)到那个数组列表中,当需要的时候你只对那个列表进行操作:

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

防止“去文档对象模型中查找那些”(特别是如果您有大量元素)。

关于javascript - 使用此选择器和多个动画提高性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30563623/

相关文章:

javascript - jQuery 在 h 元素之后折叠 ul,当前元素除外

javascript - 如何通过 $routeParams 将 $scope 变量设置为 true?

jquery - 单击链接将当前类添加到 div

javascript - ReactJS:如何从子组件的下拉列表中获取选择/状态?

html - CSS:在div中居中/对齐图像

javascript - 单击时移动文本插入点(插入符号)

javascript - 如何在执行特定操作时显示链接?

javascript - 当我想接收 json 数组时 $.getJSON() 返回错误

jquery - 如何对特定DIV使用blockUI?

javascript - 页脚悬停和滚动问题