我想提高我的网站性能。该网站是用多个 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_action
和 start_action_no_animation
并在 .section.active
处触发一个,在所有其他 处触发另一个.section
?
如果我缓存我的选择器 var example = $('.example', #fullpage)
我可以将这个缓存的选择器与 $('.section.active).find(example )
?
最佳答案
jQuery 在绝大多数浏览器的动画幕后做了很多工作,但是
在动画方面不太好。像 Velocity.js 和 Greensock 这样的库是,多亏了好的浏览器和快速的机器。粗略地说,如果您利用 CSS(3) 动画功能,浏览器就足够了。
因此,您可以简单地使用 CSS 类、CSS3 transition
和 jQuery 而不是使用 jQuery 动画方法,但只是为了切换元素的类:
.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/