Bir siteyi oldukça basit bir paralaks kaydırma ile optimize ediyorum. Animasyonlu öğeler ayrı katmanlardaki (backface-visibility:hidden) ve komut dosyası oluşturma ve oluşturma adımları oldukça hızlı görünüyor. Ancak çok fazla zaman boyama harcanan görüyorum:Dev Tools'da yavaş rasterleştirme
gerçek çizim iyi ama o kocaman hollow green bars ayrı birleştirici mesaj içinde pikselleştirmeyi temsil eder. Bunu neden ve nasıl artırabilir yapıyorum
?
Tamam, boş çubukları yeniden uygulayabilirim. Onlara oyuk yapmak neden Onlar birleştirici mesaj üzerinde gerçekleşiyor
, bu.
Sonra zaman çizelgesi onay kutusu, her boyanın içine tam olarak ne görebilirsiniz kontrol Paint kaydedildi eğer: Eğer daha net alev grafiğe fiskeleme görebilirsiniz.
Ve sonra aşağı aramalar bu büyük boya en pahalı parçası olan çizmek hangi daraltmak için kaydırıcıyı kullanabilirsiniz:
(daha sonra büyük bir clipRect ve benziyor bit eşlem çizmek)
Ancak toplu olarak baktığımızda, her karede dünyayı yeniden boyadığınız anlaşılıyor.
Hele sen katmanlarınıza ... Her karede neler olduğuna bakmak isteyebilirsiniz:
ANCAK
.
Tüm bunlardan sonra, sorununuzu left/top yerine transform:translate() animasyonu ile çözebilirsiniz. Bu ürünlere will-change:transform eklemeyi de tavsiye ederim. Bu, tarayıcının yeniden boyama yapmadan öğeleri hareket ettirmesine izin verir ve her bir karede tekrar kopyalamanız gerekmez.
zorunluluk okur:
Alkış
sayfanızı ya da en azından bir kısmını paylaşır mısınız? – Kiril
@Kiril Dev siteye bir link ekledim. Baktığın için teşekkürler. – Tamlyn