Kıyas / Hat C

Animasyon: Motion ↔ CSS/WAAPI ↔ GSAP

Ham ölçüm, hüküm yok: bu hat üç gözden geçirme turunda geçemedi ve bırakıldı. Aşağıdaki değerler bilgi amaçlıdır; düzen geçişi satırı, ölçüm penceresinin süresine duyarlı olduğundan taraflar arası sıralama için kullanılmamalıdır.

CSS/WAAPI hareketi kompozitörde koşar; kare süresi ana iş parçacığı maliyetini gösterir. Ölçümde işlemci 6 kat yavaşlatıldı (benzetim); sayılar göreli okunmalı.

Sahneler aynı istem (görsel; ölçüm değil).

Demolar uzun: kutunun içinde aşağı kaydırarak tamamını görebilirsiniz.

Ölçüm tablosu

Yalnız iki ölçüm. JS aktarım: rota toplamı (Next kabuğu dahil), önbellek kapalı, 5 koşu. Kare süresi: başsız Chromium, yazılım render'ı, rAF örnekleri (ana iş parçacığı ritmi; yalnız kompozitörde koşan CSS hareketinin maliyetini göstermez), göreli kıyas; her hareket ayrı pencerede ve transform değişimiyle doğrulanarak ölçülür. Boşta rAF tabanına yakın satırlarda fark yok denir.

Ölçüm	Motion	CSS/WAAPI	GSAP	Yön
JS aktarımı Nasıl ölçüldü JS aktarım (kB), önbellek kapalı	196,1 kB (196,1 kB–196,1 kB) koşular: 196,1, 196,1, 196,1, 196,1, 196,1 (5 koşuda aynı)	143,2 kB (143,2 kB–143,2 kB) koşular: 143,2, 143,2, 143,2, 143,2, 143,2 (5 koşuda aynı)	209,6 kB (209,6 kB–209,6 kB) koşular: 209,6, 209,6, 209,6, 209,6, 209,6 (5 koşuda aynı)	karşılaştırma yapılmaz düşük iyi
Giriş: kare süresi Nasıl ölçüldü Giriş: ortalama kare süresi (ms) yazılım raster, göreli; uzun kare >50 ms	17 ms (17 ms–18 ms) koşular: 17,9, 17,0, 17,2, 17,2, 17,0	17 ms (17 ms–17 ms) koşular: 16,9, 16,7, 16,7, 16,7, 16,7	17 ms (17 ms–17 ms) koşular: 16,7, 16,7, 16,7, 16,7, 16,7	karşılaştırma yapılmaz düşük iyi
Giriş: uzun kare Nasıl ölçüldü Giriş: uzun kare sayısı (>50 ms) yazılım raster, göreli; uzun kare >50 ms	0 adet (0 adet–2 adet) koşular: 2, 0, 0, 0, 0	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	karşılaştırma yapılmaz düşük iyi
Kaydırma: kare süresi Nasıl ölçüldü Kaydırma: ortalama kare süresi (ms) yazılım raster, göreli; uzun kare >50 ms	17 ms (17 ms–17 ms) koşular: 16,7, 16,7, 16,7, 16,7, 16,7	17 ms (17 ms–17 ms) koşular: 16,7, 16,7, 16,7, 16,7, 16,7	17 ms (17 ms–17 ms) koşular: 16,7, 16,7, 16,7, 16,7, 16,7	karşılaştırma yapılmaz düşük iyi
Kaydırma: uzun kare Nasıl ölçüldü Kaydırma: uzun kare sayısı (>50 ms) yazılım raster, göreli; uzun kare >50 ms	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	karşılaştırma yapılmaz düşük iyi
Sürükleme: kare süresi Nasıl ölçüldü Sürükleme: ortalama kare süresi (ms) yazılım raster, göreli; uzun kare >50 ms	17 ms (17 ms–17 ms) koşular: 16,5, 16,7, 16,7, 16,7, 16,7	17 ms (17 ms–17 ms) koşular: 16,7, 16,7, 16,7, 16,5, 16,7	17 ms (17 ms–17 ms) koşular: 16,7, 16,7, 16,7, 16,7, 16,7	karşılaştırma yapılmaz düşük iyi
Sürükleme: uzun kare Nasıl ölçüldü Sürükleme: uzun kare sayısı (>50 ms) yazılım raster, göreli; uzun kare >50 ms	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	0 adet (0 adet–0 adet) koşular: 0, 0, 0, 0, 0 (5 koşuda aynı)	karşılaştırma yapılmaz düşük iyi
Düzen geçişi: kare süresi Nasıl ölçüldü Düzen geçişi: ortalama kare süresi (ms) yazılım raster, göreli; uzun kare >50 ms	44 ms (43 ms–55 ms) koşular: 44,4, 55,0, 45,8, 44,4, 43,0	24 ms (23 ms–24 ms) koşular: 23,9, 23,6, 24,1, 23,3, 24,1	26 ms (25 ms–27 ms) koşular: 27,5, 25,9, 24,6, 25,9, 25,9	karşılaştırma yapılmaz düşük iyi
Düzen geçişi: uzun kare Nasıl ölçüldü Düzen geçişi: uzun kare sayısı (>50 ms) yazılım raster, göreli; uzun kare >50 ms	1 adet (1 adet–3 adet) koşular: 1, 3, 1, 1, 1	1 adet (1 adet–1 adet) koşular: 1, 1, 1, 1, 1 (5 koşuda aynı)	2 adet (1 adet–2 adet) koşular: 2, 2, 1, 1, 2	karşılaştırma yapılmaz düşük iyi

Ölçümün ayrıntısı (düzen geçişi)

Motion: pencereye ortanca 12 kare düştü, pencere ortanca 533 ms, en uzun tek görev ortanca 205 ms.
CSS/WAAPI: pencereye ortanca 29 kare düştü, pencere ortanca 700 ms, en uzun tek görev ortanca 225 ms.
GSAP: pencereye ortanca 18 kare düştü, pencere ortanca 467 ms, en uzun tek görev ortanca 137 ms.

Pencere, giren kartın hareketi bitince kapanır; kare sayısı 10 altındaysa o ölçüm kesik sayılır ve kazanan ilan edilmez.

Görev, istem ve koşullar

Görev

Görev (Hat C)

Kurgusal Tasnora ürün sayfası parçasında AYNI dört hareket, üç tarafta: Motion, düz CSS / Web Animations (araçsız taban) ve GSAP.

Giriş: 40 öğelik özellik listesi sırayla (stagger) belirir.
Kaydırmaya bağlı hareket: kaydırdıkça ilerleyen bir çubuk ve 12 parallax kart.
Sürüklenebilir kart: işaretçiyle sürüklenir, bırakınca yaylanarak yerine döner.
Düzen geçişi: 300 kartlık ızgarada süzgeç/sıralama değişince kartlar yeni yerine akar; giren kartlar da animasyonla gelir.

Üç taraf da dört hareketin tümünü eşit kalitede yapar. Sayfada yalnız iki ölçüm gösterilir: JS aktarım boyutu ve dört hareketin kare süresi.

İstem

Görev (Hat C)

Kurgusal Tasnora ürün sayfası parçasında AYNI dört hareket, üç tarafta: Motion, düz CSS / Web Animations (araçsız taban) ve GSAP.

Giriş: 40 öğelik özellik listesi sırayla (stagger) belirir.
Kaydırmaya bağlı hareket: kaydırdıkça ilerleyen bir çubuk ve 12 parallax kart.
Sürüklenebilir kart: işaretçiyle sürüklenir, bırakınca yaylanarak yerine döner.
Düzen geçişi: 300 kartlık ızgarada süzgeç/sıralama değişince kartlar yeni yerine akar; giren kartlar da animasyonla gelir.

Üç taraf da dört hareketin tümünü eşit kalitede yapar. Sayfada yalnız iki ölçüm gösterilir: JS aktarım boyutu ve dört hareketin kare süresi.

Koşullar

Ölçüm protokolü ve ham koşu günlüğü ölçüm dosyasındadır. Lisans bilgisi için Lisanslar sayfasına bakın.