jQuery Paralaks/Scroll Olaylar Performansı

Question

Bu soru paralaksa göre olayları kaydırmaktan daha az şey içeriyor. Benim projemle ilgili kaygılarım, paralaks kaydırma efektinin pürüzsüz ve rahatsız edici olmamasıdır.

Sorum şu, bazı özelliklerin diğerlerinden daha iyi animasyon/kaydırma yapması mı? Örneğin arka plan konumu, kaydırmada kenar boşluğunun ayarlanmasını söylemekten daha iyi çalışır.

Answer 1

Bazı özelliklerin diğerlerinden daha az animasyon oluştururken daha az yük yarattığından emin değilim, ancak Birinin bu konuda iyi bilgiler yayınlaması durumunda çok ilgilenirim. Bu, performansa yardımcı olabilecek birkaç şeyi bildiğim söyleniyor.

Ayar position : absolute, öğeyi sayfanın normal akışından kaldırır ve bu nedenle, animasyon sırasında tüm sayfanın yeniden çizilmesini gerektirmez. position : relative, ataların ve descendant öğelerin etkilenebileceğinden tüm sayfanın yeniden çizilmesini zorlayacaktır. Ayrıca

, sen 30fps ulaşmak hala scroll olay azaltma ve edebilirsiniz: Bu yazılmaya başlandı beri

var scroll_ok = true; 
setInterval(function() { 
    scroll_ok = true; 
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance 
$(window).bind('scroll', function() { 
    if (scroll_ok === true) { 
     scroll_ok = false; 
     //now run your code to animate with respect to scroll 
    } 
}); 

GÜNCELLEME :: 2014-08-26

işler değişti. Bazı kısa notlar:

• Modern tarayıcılar şimdi özelliklerine (başımın üstü kapalı opacity ve transform) belirli bir grup verilen elementlerin boyama hızlandırmak GPU çalışırlar. Bu özellikleri kullanmak, top/left gibi (diğer bir deyişle, sayfayı transform kullanmaktan çok daha fazla örnekte yeniden çizmeyi gerektirir) performanslarını büyük ölçüde artırabilir. Yeni bir özellik, tarayıcılar tarafından kaldırılmakta olan yeni bir özelliktir.

• Temelde, değişmesi muhtemel özelliklerin bir listesini ayarlayabilirsiniz; böylece tarayıcı, mülkün özelliklerini zaman içinde optimize edebilir. Sağlam bir çok doluluğu ve iyi bir modern tarayıcı desteği vardır. Bu, tarayıcının yapabildiği gibi işleyebileceği kadar tonlarca "yığın" oluşturmadan öğelerinize sorunsuz bir şekilde animasyon uygulamak için çok daha iyi bir yoldur.