stackbenchstack benchmark

Kıyas / Hat E

Arka plan / gradyan

Kategori: 3B ve WebGL

Özet hüküm

Bu görevde JS+CSS aktarımı en küçük CSS gradyan (ShaderGradient 447,1 kB, CSS gradyan 150,7 kB).

JS+CSS aktarımı

CSS gradyan

150,7 kB

≈3,0× daha iyi

düşük iyi

Nasıl ölçüldü

JS+CSS (aktarım)

Bellek (JS heap)

CSS gradyan

4,63 MB

≈2,2× daha iyi

düşük iyi

Nasıl ölçüldü

Yükleme ve 1 sn yerleşme sonrası anlık JS heap (tek okuma; süreç RSS değil)

İstek sayısı

CSS gradyan

10 adet

≈1,7× daha iyi

düşük iyi

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

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

ShaderGradient

Demo: /demo/kiyas-e/shadergradient

CSS gradyan

Demo: /demo/kiyas-e/css

Ölçüm tablosu

JS+CSS aktarım ve istek sayısı: önbellek kapalı, 5 koşu. Heap: yükleme ve 1 sn yerleşme sonrası tek okuma (anlık, tepe değil) (--enable-precise-memory-info), süreç RSS değil. Kurulum ve doğrudan paket sayısı, sahnenin içe aktardığı paketlerden okunur; CSS tarafında paket yok.

ÖlçümShaderGradientCSS gradyanYön
JS+CSS aktarımı
Nasıl ölçüldü

JS+CSS (aktarım)

447,1 kB (447,1 kB–447,1 kB)
koşular: 447,1, 447,1, 447,1, 447,1, 447,1 (5 koşuda aynı)		150,7 kB (150,7 kB–150,7 kB)
koşular: 150,7, 150,7, 150,7, 150,7, 150,7 (5 koşuda aynı)		CSS gradyan düşük iyi
İstek sayısı17 adet (17 adet–17 adet)
koşular: 17, 17, 17, 17, 17 (5 koşuda aynı)		10 adet (10 adet–10 adet)
koşular: 10, 10, 10, 10, 10 (5 koşuda aynı)		CSS gradyan düşük iyi
Bellek (JS heap)
Nasıl ölçüldü

Yükleme ve 1 sn yerleşme sonrası anlık JS heap (tek okuma; süreç RSS değil)

10,2 MB (10,1 MB–10,6 MB)
koşular: 10,2, 10,2, 10,1, 10,1, 10,6		4,63 MB (4,57 MB–4,64 MB)
koşular: 4,6, 4,6, 4,6, 4,6, 4,6		CSS gradyan düşük iyi
Kurulum boyutu
Nasıl ölçüldü

Kurulum boyutu (node_modules, paket+transitif)

kapsam: ShaderGradient sahnesinin içe aktardığı paketler ve transitif bağımlılıkları (react, react-dom, next, clsx, tailwind-merge ortak, dışarıda). CSS gradyan: yok (paket yok). Bu satırda kazanan vurgusu yok, değerler düz. Paylar: ShaderGradient: en büyük pay three 20.1 MB; çıkarılırsa 3.4 MB

23,4 MB (23,4 MB–23,4 MB)yok (paket yok)karşılaştırma yapılmaz düşük iyi
Paket sayısı
Nasıl ölçüldü

Doğrudan içe aktarılan paket sayısı

3 adet (3 adet–3 adet)yok (paket yok)karşılaştırma yapılmaz düşük iyi

JS+CSS aktarımı

ShaderGradient
447,1 kB
CSS gradyan
150,7 kB

Bellek (JS heap)

ShaderGradient
10,2 MB
CSS gradyan
4,63 MB

İstek sayısı

ShaderGradient
17 adet
CSS gradyan
10 adet
Görev, istem ve koşullar

Görev

Görev (Hat E)

Kurgusal Tasnora hero bölümü için tam genişlikte, canlı hareket eden bir gradyan arka plan: aynı renk paleti, aynı boyut, üstünde aynı başlık ve düğme.

Bu hat, aynı hero'yu ShaderGradient (WebGL) ve CSS gradyan animasyonu (araçsız taban: @keyframes + background-position, bileşende JS yok) ile yan yana kıyaslar.

İstem

İstem (Hat E)

Tasnora hero bölümü için tek ekran. İçerik lib/demo-icerik.ts olsun (etiket, başlık, vurgu, açıklama, eylem düğmesi). Hero tam genişlik, 560 px yüksekliğinde olsun; arkasında canlı hareket eden bir gradyan olsun. Palet iki tarafta aynı olsun: #274e40, #8aab8b, #e6d4a6. Başlık, açıklama ve düğme aynı açık panelde dursun. "Kurgusal ürün" notu görünür kalsın.

Gradyan sürekli hareket etsin; prefers-reduced-motion: reduce iken dursun. İki taraf aynı renk bandını hedefler; birebir aynı görüntü beklenmez.

ShaderGradient tarafı @shadergradient/react kullansın; CSS tarafı yalnız CSS ile yazılsın.

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.