Animasyonları ölçme, animasyon çerçevelerini nasıl düşüneceğiniz ve genel sayfa düzgünlüğü hakkında bilgi edinin.
Muhtemelen "takılanan" sayfalarla karşılaşmışsınızdır veya "dondur" kaydırma sırasında veya animasyonları da ekler. Bu deneyimlerin sorunsuz olmadığını belirtmek isteriz. Adres bu tür sorunların yaşandığını fark ettiyseniz, Chrome ekibi bu sorun türlerine animasyon algılama için laboratuvar araçlarımızı incelemenin yanı sıra Chromium'daki oluşturma ardışık düzeni teşhisi için kullanabilirsiniz.
Son zamanlarda kaydedilen ilerlemeyi paylaşmak, araç kullanımıyla ilgili somut rehberlik sunmak ve gelecekteki animasyon pürüzsüzlüğü metrikleri için fikirleri konuşacağız. Her zamanki gibi geri bildiriminizi dinleyin.
Bu yayın üç ana konuyu ele alır:
- Animasyonlara ve animasyon karelerine hızlı bir bakış.
- Genel animasyon düzgünlüğünü ölçmeyle ilgili mevcut görüşlerimiz.
- Laboratuvar araçlarında yararlanabileceğiniz pratik birkaç öneri.
Animasyon nedir?
Animasyonlar içeriğe hayat verir. Özellikle tepki olarak içeriğin harekete geçmesini sağlayarak animasyonlar kullanıcılara daha doğal bir deneyim sağlayabilir. anlaşılır ve eğlencelidir.
Ancak kötü uygulanmış animasyonlar veya çok fazla animasyon eklemek ve hiç eğlenceli hale getirmemesine neden olabilir. Muhtemelen hepimizin bir arayüzle etkileşimde bulundukları için çok fazla "faydalı" geçiş ve bu durum, düşük performansla deneyime zarar veren bir hâl alır. Dolayısıyla bazı kullanıcılar Kullanıcının tercihine bağlı olarak, daha az hareket tercih eder bir örnektir.
Animasyonlar nasıl çalışır?
Hızlı bir özet olarak, oluşturma ardışık düzeninin birkaç sıralı aşamadan oluşur:
- Stil: stillere uyum sağlar.
- Düzen: geometrisini ve konumunu görebilirsiniz.
- Boya: Bu çizgiyi kullanarak pikselleri katmana böler.
- Bileşik: katmanlı olarak ekleyebilirsiniz.
Animasyonları tanımlamanın birçok yolu olsa da hepsi temelde şunlardan biri:
- Düzeni ayarlama özellikler.
- Boya değerini ayarlama özellikler.
- Bileşik değerini ayarlama özellikler.
Bu aşamalar sıralı olduğundan, animasyonları daha alt kısımlarında yer alan mülklerin şartlarıdır. Güncelleme ne kadar önce maliyetler de artar ve bu da gerçekleşme olasılığı kolay. (bkz. Oluşturma performans başlıklı bölüme bakın.)
Düzen özelliklerine animasyon eklemek kolay olsa da, (maliyetler hemen fark edilmese bile) birlikte yürütülebilir. Animasyonlar olarak tanımlanmıştır.
Bildirim temelli CSS animasyonlarını tanımlama veya Web'i kullanma Animasyonlar, ve animasyonunuzu karmaşık akıcı ve verimli animasyonlar sağlamak için harika bir ilk adımdır. Ama yine de tek başına bu işlem yumuşaklığı garanti etmez, çünkü etkili web animasyonları bile performans sınırları vardır. Bu nedenle ölçüm yapmak her zaman önemlidir.
Animasyon kareleri nedir?
Sayfanın görsel temsilinde yapılan güncellemelerin görünmesi zaman alır. Görsel yeni bir animasyon karesine dönüşür ve bu kare sonunda kullanıcının ekranı.
Belirli aralıklarla güncellenir, bu nedenle görsel güncellemeler toplu olarak işlenir. Birçok ekran 60 kez gibi sabit bir zaman aralığıyla (yani 60 Hz). Bazı daha modern ekranlar daha yüksek yenileme hızları sunabilir (90-120 Hz giderek yaygınlaşıyor). Bu ekranlar genellikle yenileme hızı arasında geçiş yapabilir veya tamamen değişken kare hızları sunabilirsiniz.
Oyun veya tarayıcı gibi herhangi bir uygulamanın hedefi, tüm bu toplu görsel güncellemeler sağlar ve her seferinde teslim oluyor. Bu hedefin, diğer ağdan hızlı bir şekilde içerik yüklemek veya ağdan içerik yüklemek gibi önemli tarayıcı görevlerinin verimli bir şekilde yürütmenizi sağlar.
Bir noktada tüm görsel güncellemeleri ekran tarafından atanan son tarih. Bu durumda, tarayıcı kare bırakır. Ekranınız kararmaz, yalnızca kendiliğinden tekrarlanır. Gördüğünüz aynı görsel güncellemeyi biraz daha uzattı. Yine de eskisi kadar sırasında gösterilir.
Bu durum genelde oldukça sık yaşanır. Özellikle, durum algılanabilir bile değildir. statik veya belge benzeri içerik kullanır. Bu tür dosya, web platformunda seçin. Atlanan kareler yalnızca önemli görsel öğeler olduğunda belirgin olur tutarlı bir animasyon akışına ihtiyacımız olan animasyonlar gibi akıcı hareketler gösteren güncellemeleri içerir.
Animasyon karelerini neler etkiler?
Web geliştiricileri, bir tarayıcının hızlı ve kolay bir şekilde görsel güncellemeleri verimli bir şekilde oluşturun ve sunun.
Bazı örnekler:
- İnternette hızlı bir şekilde çözmek için çok büyük veya kaynak yoğun içerikler hedef cihaz
- Çok fazla kullanılıyor katmanlar ve çok fazla GPU belleği gerektiriyor.
- Fazla karmaşık CSS stilleri veya web animasyonları tanımlama.
- Hızlı oluşturma optimizasyonlarını devre dışı bırakan tasarım karşıtlıkları kullanma.
- Ana iş parçacığında çok fazla JS çalışması, görselliği engelleyen uzun görevlere yol açıyor güncellemelerine göz atın.
Peki bir animasyon karesinin teslim tarihini kaçırdığını ve bu nedenle kare atmış olabilir mi?
Olası bir yöntem de
requestAnimationFrame()
ancak bunun çeşitli dezavantajları vardır. requestAnimationFrame() veya "rAF",
tarayıcıya bir animasyon gerçekleştirmek istediğinizi bildirir ve
bunu, görüntü oluşturma ardışık düzeninin bir sonraki boya aşamasından önce gerçekleştirme fırsatı bulur. Eğer
geri çağırma işleviniz beklediğiniz zamanda çağrılmaz. Bu,
boyama yürütülmedi ve bir veya daha fazla kare atlandı. Anket ve
rAF'nin ne sıklıkla çağrıldığını sayarak bir tür "saniyedeki kare sayısı"
(FPS) metriğine karşılık gelir.
let frameTimes = [];
function pollFramesPerSecond(now) {
frameTimes = [...frameTimes.filter(t => t > now - 1000), now];
requestAnimationFrame(pollFramesPerSecond);
console.log('Frames per second:', frameTimes.length);
}
requestAnimationFrame(pollFramesPerSecond);
requestAnimationFrame() yoklama özelliğini kullanmak birkaç nedenden dolayı iyi bir fikir değildir:
- Her komut dosyasının kendi yoklama döngüsünü oluşturması gerekir.
- Kritik yolu engelleyebilir.
- rAF yoklama hızlı olsa bile,
requestIdleCallback()sürekli kullanıldığında uzun boşta kalma blokları programlayabilmeyi engeller ( tek bir kareyi aşmasına izin verir). - Benzer şekilde, uzun boşta kalma bloklarının olmaması, tarayıcının diğerlerini uzun süren görevlere (ör. daha uzun çöp toplama ve diğer arka plan (spekülatif çalışmalar)
- Yoklama etkinleştirilir ve devre dışı bırakılırsa kare bütçesinin kullanıldığı durumları kaçırırsınız. aşıldı.
- Anket, tarayıcının değişken güncelleme sıklığı (örneğin, güç veya görünürlük durumu nedeniyle).
- En önemlisi de, bu özellik tüm animasyon türlerini yakalamıyor. güncellemeleri!
Ana iş parçacığı üzerinde çok fazla çalışma yapılması animasyon karelerinin görüntülenmesini etkileyebilir. Daha fazla bilgi için Jank Örnek ana iş parçacığında çok fazla iş olduğunda (ör. buna bağlı olarak, karelerin atılmasına, daha az rAF geri çağırmasına ve düşük FPS'ye neden olur.
Ana iş parçacığı takılıp kaldığında, görsel güncellemeler takılmaya başlar. Çok fena!
Birçok ölçüm aracı, büyük ölçüde bir ölçüm aracından birinin verilerini iş parçacığının zamanında verim sağlaması ve animasyon karelerinin düzgün şekilde çalıştırılması için gereklidir. Ancak hikayenin tamamı bunlarla sınırlı değil. Aşağıdaki örneği inceleyin:
Yukarıdaki videoda, ana sayfaya düzenli olarak uzun görevler ekleyen bir sayfa
ileti dizisi. Bu uzun görevler, sayfanın size en uygun
tıklayın ve sol üst köşede tüm bunların yanında,
ilgili requestAnimationFrame() FPS'nin 0'a düştüğünü bildirdi.
Bu uzun görevlere rağmen sayfa sorunsuz bir şekilde kaymaya devam ediyor. Bu çünkü modern tarayıcılarda kaydırmanın sık sık ileti dizili, bazı değişiklikler yapıyoruz.
Bu, ana sayfada aynı anda birçok atlanmış kare içeren bir örnektir. ileti dizisinde hâlâ başarılı bir şekilde yayınlanmış birçok kaydırma çerçevesi derleyici ileti dizisidir. Uzun görev tamamlandığında, ana iş parçacığı boyama güncellemesi gibi görsel öğeler de sunulmaktadır. rAF anketi, karenin 0'a düşmesini önerdi. Ancak görsel, kullanıcı farkı göremeyecektir!
Animasyon karelerinde hikaye o kadar basit değildir.
Animasyon çerçeveleri: Önemli güncellemeler
Yukarıdaki örnek, hikayede yalnızca
requestAnimationFrame()
Peki, animasyon güncellemeleri ve animasyon kareleri ne zaman önemlidir? İşte üzerinde çalıştığımız ve geri bildirim almak istediğimiz bazı ölçütler:
- Ana ve birleştirici ileti dizisi güncellemeleri
- Boya güncellemeleri eksik
- Animasyonları algılama
- Nitelik mi, nicelik mi?
Ana ve birleştirici ileti dizisi güncellemeleri
Animasyon çerçevesi güncellemeleri boole değildir. Çerçeveler yalnızca veya tamamen gösterilmemelidir. Animasyonların pek çok nedeni vardır çerçeve kısmi olarak sunulabilir. Başka bir deyişle, bazı eski içerikler ve bunların dışında kalan bazı yeni görsel güncellemeler anlatacağım.
Bunun en yaygın örneği, tarayıcının yeni bir kod oluşturamamasıdır. çerçeve son tarihi içinde ana iş parçacığı güncellemesi, ancak yeni bir derleyici iş parçacığı var güncelleyebilirsiniz (daha önceki ileti dizisi görünümü gibi).
Kompozit animasyon oluşturmak için bildirim temelli animasyonlar kullanmanın önemli bir nedeni özellik önerilir, animasyon tamamen oluşturucu iş parçacığı tarafından yapılır. Bu türler görsel güncellemeleri verimli bir şekilde ve hızlı bir şekilde üretmeye devam kullanabilirsiniz.
Diğer yandan, bir ana iş parçacığı güncellemesinin nihayet ancak birkaç kare teslim tarihi kaçırıldıktan sonra sunum için kullanılabilir. Burası tarayıcı bazı yeni güncellemelere sahip olacak, ancak bu en yeni olmayabilir.
Genel olarak yeni görsel güncellemeler içeren kareleri, kısmi bir çerçeve olarak, hiçbir yeni görsel güncelleme olmadan. Kısmi kareler oldukça yaygın. İdeal koşullarda kısmi güncellemeler en azından gibi görsel güncellemeler de sunar. Ancak bu, yalnızca animasyonların arasında seçim yapabilirsiniz.
Boya güncellemeleri eksik
Diğer bir kısmi güncelleme türü, medya gibi medyaların bitmemiş olmasıdır. kare sunumu için kodu çözme ve zaman içinde pikselleştirme.
Ya da bir sayfa tamamen statik olsa bile, tarayıcı yine de oluşturma işleminin gerisinde kalabilir. görsel güncellemeler de yapılır. Bunun nedeni, piksellerin Görünür görüntü alanının dışındaki içerikler, GPU belleğinden tasarruf etmek için silinebilir. Google piksellerin oluşturulması zaman alır ve belirli bir resmin oluşturulması, tek bir kareden her şeyi bir parmak hareketi gibi uzun bir kaydırmadan sonra oluşturabiliyor. Bu, genelde dama tahtası olarak bilinir.
Her kare oluşturma fırsatıyla birlikte, rastgele sayı oluşturmak için ekrana geldiğinden emin olun. Bunu yapabilme yeteneğini ölçmek çoğu karede (veya zaman diliminde) kare işleme hızı olarak bilinir.
GPU'da çok çökme yaşanırsa tarayıcı (ya da platform) görsel güncelleme deneme hızını azaltıp kıstığından etkin kare hızlarına bakar. Teknik açıdan bu, abone sayısında görsel olarak daha düşük kare işleme hızı olarak görünmeye devam eder.
Bununla birlikte, düşük kare işleme hızı türlerinin hepsi kötü değildir. Sayfa çoğunlukla boştaysa ve etkin animasyon yoktur; düşük kare hızı da görsel olarak yüksek kare hızına neden olur (ve pil tasarrufu yapabilir).
Peki, kare işleme hızı ne zaman önemlidir?
Animasyonları algılama
Yüksek kare işleme hızı, özellikle önemli anlarda animasyonları da ekler. Farklı animasyon türleri, iş parçacığı (ana, birleştirici veya çalışan) olduğu için görsel güncellemesi ilgili ileti dizisinin son tarihe kadar güncellenmesine bağlıdır. Örneğin, belirli bir iş parçacığının düzgün çalışmasında pürüzsüzlüğü etkiler bu ileti dizisi güncellemesine bağlıdır.
Bazı animasyon türlerinin tanımlanması ve algılanması diğerlerinden daha kolaydır. Bildirim temelli animasyonların veya kullanıcı girişinden yönlendirilen animasyonların tanımlanması daha kolaydır. animasyonlara düzenli güncellemeler olarak uygulanan JavaScript'e dayalı animasyonlara kıyasla stil özellikleri.
requestAnimationFrame() sizinle bile
her rAF çağrısının mutlaka görsel bir içerik ürettiğini
veya bir animasyon şeklinde görünür. Örneğin, yalnızca kare hızını izlemek için rAF yoklama
(yukarıda gösterildiği gibi) düzgün çalışmadığından pürüzsüzlük ölçümlerini
görsel güncelleme yok.
Nitelik mi, nicelik mi?
Son olarak, animasyonların ve animasyon karesi güncellemelerinin algılanması hâlâ çünkü animasyon güncellemelerinin miktarını değil, kalitedir.
Örneğin, bir video izlerken 60 fps'lik sabit bir kare hızı görebilirsiniz. videosunu izleyin. Teknik olarak bu son derece akıcı, ancak videonun kendisinde veya ağ arabelleğe almayla ilgili sorunlar olabilir. Bu gösterim animasyon pürüzsüzlüğü metriklerine doğrudan karşılık verir, ancak yine de belirtir.
Veya <canvas>'tan yararlanan bir oyun (örneğin,
ekran dışında
tuval:
sabit bir kare hızı sunmaları gerekir) kullanımı açısından teknik olarak son derece yumuşak olabilir.
yüksek kaliteli oyun öğelerini kullanmak mümkün olmadığında,
veya oluşturma eserleri sergilemeye devam eder.
Elbette bir sitenin çok kötü animasyonları da olabiliyor 🙂
Yani sanırım zamanlarına göre epey havalılar.
Tek bir animasyon karesinin durumları
Çünkü kareler kısmen sunulabilir veya atlanan kareler çeşitli şekillerde gerçekleşebilir. diğer karelerin yumuşaklığı etkilemeyecek şekilde doğruluk puanı gibi metrikleri içerir.
Burada, tek bir öğenin durumunu çeşitli şekillerde yorumladığımız animasyon karesi, en iyiden en kötü duruma doğru sıralanır:
| Güncelleme İstenmedi | Boşta kalma süresi, önceki karenin tekrarı. |
| Tamamen sunuluyor | Ana iş parçacığı güncellemesi son tarih içinde yapıldı veya yapılmadı ana ileti dizisi güncellemesi istendi. |
| Kısmen sunuldu | Yalnızca birleştirici; Gecikmeli ana iş parçacığı güncellemesinde görsel yok unutmayın. |
| Kısmen sunuldu | Yalnızca birleştirici; ana ileti dizisinde görsel bir güncelleme vardı. güncellemede pürüzsüzlüğü etkileyen bir animasyon bulunmuyor. |
| Kısmen sunuldu | Yalnızca birleştirici; ana ileti dizisinde, daha önce eski olan kare kullanılmıştı. |
| Kısmen sunuldu | Yalnızca birleştirici; ana güncelleme olmadan ve birleştirici güncellemesinde, pürüzsüzlüğü etkileyen bir animasyon bulunuyor. |
| Kısmen sunuldu | Yalnızca birleştirici ancak birleştirici güncellemesinde bir pürüzsüzlüğü etkileyen animasyonlar içerir. |
| Atılan kare | Güncelleme yok. Birleştirici güncellemesi istenmedi ve temel gecikti. |
| Atılan kare | Birleştirici güncellemesi istendi ancak bu güncelleme gecikti. |
| Eski kare | Bir güncelleme istenmişti. Bu güncelleme, oluşturucu tarafından geliştirilmiş ancak GPU, vsync son tarihinden önce yine de göstermedi. |
Bu durumları puana dönüştürmek mümkündür. Belki de yalnızca diğer bir deyişle, bu puanı yorumlamak için, ona göre gözlemlenebilirlik olasılığı temsil eder. Düşen tek bir kare çok gözlemlenebilir olmayabilir ancak bunun bir dizi art arda pürüzsüzlüğü etkileyen birçok atlanmış karenin olması gerekir.
Özet
Bazen her aşamanın durumunu ayrıntılı olarak incelemek içine "bir bakışta" hızlı bir şekilde göz atmanız da skoru bir deneyimdir.
Çünkü kareler kısmi olarak sunulabilir ve hatta tamamen atlandığı için çerçeve güncellemeleri aslında yumuşaklığı etkilemeyebilir, bu konuda daha az çerçeveleri sayma gibi birçok işlem bulunur. Tarayıcının bunu yapamadığı kapsama Gerektiğinde görsel olarak eksiksiz güncellemeler sunmalıdır.
Zihinsel model şuradan hareket etmelidir:
- Saniyedeki Kare Sayısı:
- Eksik ve önemli animasyon güncellemelerini algılayarak
- Belirli bir dönemde düşüş yüzdesi.
Önemli olan şudur: Önemli bir görev için, güncellemelerine bakın. Bunun, kullanıcıların söz konusu sorunsuz deneyim için doğal bir deneyim yaşama şekline uygun olduğunu düşünüyoruz. yaygın olarak kullanılan bir uygulamadır. Şimdiye kadar, ilk metrik grubu:
- Ortalama Düşüş Yüzdesi: Yayın süresince boşta olmayan tüm animasyon kareleri için tüm zaman çizelgesi
- Atılan Kare Yüzdesi En Kötü Durumu: 1 saniyeden uzun süreli kaydırma zaman dilimleridir.
- Atılan Karelerin Yüzdesinin 95. yüzdelik dilimi: 1 saniye boyunca ölçüldüğünde zaman dilimleridir.
Bu puanları şu anda bazı Chrome geliştirici araçlarında bulabilirsiniz. Bu metrikler yalnızca genel kare işleme hızına odaklanır. Diğer yandan, çeşitli faktörlerden haberdar edilir.
Geliştirici araçlarında kendiniz deneyin.
Performans HUD'si
Chromium'da bayrağın arkasına gizlenmiş düzgün bir Performans HUD'si var
(chrome://flags/#show-performance-metrics-hud). Bu e-postada,
Core Web Vitals gibi öğelerin puanları ve birkaç deneysel tanım
zaman içinde Atılan Kare Yüzdesi'ne göre animasyon düzgünlüğü için.
Çerçeve Oluşturma İstatistikleri
"Çerçeve Oluşturma"yı etkinleştirin "İstatistikler" yeni animasyon karelerinin canlı görünümünü görmek için Oluşturma ayarlarından Kısmi güncellemeleri tamamen bırakılan çerçevelerden ayırt etmek için renk kodludur. güncellemelerine göz atın. Bildirilen fps, yalnızca tam olarak sunulan kareler içindir.
Geliştirici Araçları performans profili kayıtlarında Çerçeve Görüntüleyici
Geliştirici Araçları Performansı panelinde bir Karesi var İzleyici. Ancak modern görüntü oluşturma ardışık düzeniyle biraz uyumsuz hale geldi. işe yarıyor. Son zamanlarda yapılan en son geliştirmeler de dahil olmak üzere animasyon sorunlarında hata ayıklamayı büyük ölçüde kolaylaştıracağını düşündüğümüz Chrome Canary.
Bugün kare görüntüleyicideki karelerin karelerle daha uyumlu vsync sınırları ve duruma göre renk kodludur. Hâlâ dolu değil görselleştirmeye devam edeceğiz ancak gelecekte modellerimizin önemli olabiliyor.
Chrome izleme
Son olarak, ayrıntılara dalmak için tercih edilen Chrome İzleme aracı ile,
bir "Web içeriği oluşturma" yeni Perfetto'yla
kullanıcı arayüzünü (veya about:tracing) ziyaret edin ve Chrome'un
yardımcı olabilir. Bu göz korkutucu bir görev olabilir ancak bilmeniz gereken birkaç şey vardır
yardımcı olmak için yakın zamanda Chromium'a eklendi. Ürün lansmanlarına dair
2024'teki
Çerçeve
uygulayacaksınız.
İzleme etkinlikleri ile şunları kesin olarak belirleyebilirsiniz:
- Hangi animasyonların çalıştırıldığı (
TrackerValidationadlı etkinlikler kullanılarak). - Animasyon karelerinin tam zaman çizelgesini alma (adlandırılmış etkinlikleri kullanarak)
PipelineReporter) bilgileri gösterilir. - Titiz animasyon güncellemelerinde, sitenizin güvenliğini tam olarak neyin engellediğini
animasyonunun daha hızlı çalışmasını engelleyebilir (
PipelineReporteretkinlik). - Giriş odaklı animasyonlarda görsel güncelleme almanın ne kadar sürdüğünü öğrenin
(
EventLatencyadlı etkinlikler kullanılarak).
Sırada ne var?
Web Vitals girişimi, web'de daha iyi kullanıcı deneyimleri oluşturmak. Toplam gibi laboratuvar tabanlı metrikler Engelleme süresi (TBT) Potansiyel etkileşim sorunlarını yakalama ve teşhis etme. Gelecekteki animasyon düzgünlüğü için laboratuvar tabanlı benzer bir metrik tasarlama.
Başarılı bir proje işlemeye yönelik fikirler üzerinde çalışmalarımızı sürdürürken bağımsız animasyon çerçevesi verilerine dayalı kapsamlı bir metriktir.
Gelecekte, ölçüm ve ölçüm işlemlerini mümkün kılan API'ler gerçek kullanıcılar için son derece alanında ve laboratuvarda kullanabilirsiniz. Gelişmeler için de bizi takip etmeye devam edin.
Geri bildirim
Lansmanda yaptığımız son iyileştirmelerin ve geliştirici araçlarının animasyon pürüzsüzlüğünü ölçmek için Chrome'da görüntülenmektedir. Lütfen bu araçları deneyin, ve animasyonlarınızın nereye gittiğini bize bildirin!
Yorumlarınızı şuraya gönderebilirsiniz: web-vitals-feedback Google "[Düzgünlük Metrikleri]" ile gruplayın konu satırına yazın. Gelecekteki düşüncelerinizi öğrenmek için sabırsızlanıyoruz!