stackbenchstack benchmark

Kıyas / Hat A

3B sahne: Three.js (saf) ↔ React Three Fiber

Kategori: 3B ve WebGL

Özet hüküm

Bu ölçümde R3F tarafı yaklaşık 30 satır daha az araç kodu taşıyor; tek hero sahnesi (~150 satır) için bu fark küçük ölçekte kalır. Çok bileşenli React ağacı ölçülmedi; ek bilgi olarak ayrı bir deney gerekir.

Araç kodu

React Three Fiber

151,0 satır

≈1,2× daha iyi

düşük iyi

Nasıl ölçüldü

Araç kodu (sloc)

CPU görev süresi

Three.js (saf)

191 ms

≈2,5× daha iyi

düşük iyi

Nasıl ölçüldü

CPU görev süresi (5 sn)

İki sahne farklı kodlandı

JS yürütme

Three.js (saf)

114 ms

≈1,8× daha iyi

düşük iyi

Nasıl ölçüldü

JS yürütme (5 sn)

Etkileşime hazır

Three.js (saf)

680 ms

≈1,2× daha iyi

düşük iyi

WebGL ağır; poster gerçek demo karesinden. SwiftShader ile ölçüldü — göreli kıyas.

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

React Three Fiber

Demo: /demo/ui-001

Three.js (saf)

Demo: /demo/ui-002

Sana ne kazandırır

  • Bu ölçümde R3F tarafı yaklaşık 30 satır daha az araç kodu taşıyor; tek hero sahnesi (~150 satır) için bu fark küçük ölçekte kalır. Çok bileşenli React ağacı ölçülmedi; ek bilgi olarak ayrı bir deney gerekir. (emek.sloc)
  • Önbellek kapalı 5 koşuda React Three Fiber ilk yüklemede daha ağır JS+CSS aktarımı gösterdi (yaklaşık 1.1× ortanca fark). (yuk.js_gzip_kb)
  • Kurulum (paket+transitif, du -sbc) alanında R3F yaklaşık 1.15× daha fazla disk kaplıyor; saf Three yalnız kendi kapanışı. (yuk.kurulum_mb)
  • SwiftShader altında Three.js (saf) daha düşük CPU görev süresi ortancası verdi (CDP TaskDuration). İki sahne farklı kodlandı. (calisma.cpu_task_ms)
  • Canvas kare hızı ve rAF FPS tavanı (~60 Hz) bu ölçümde fark yok; kazanan gerekçesi değildir. (calisma.canvas_fps)
  • Tek ölçülen sahne bir hero. Çok 3B bileşenli React ürününde React Three Fiber ölçülmedi; ek bilgi olarak bu dosyada iddia edilmez. (emek.sloc)

Ölçüm tablosu

Başsız Chromium + SwiftShader. Sayfa rAF FPS tavanı ~60 Hz (bu ölçümde fark yok); canvas kare hızı ve CDP CPU süreleri göreli kıyas içindir.

ÖlçümReact Three FiberThree.js (saf)Yön
JS+CSS aktarımı
Nasıl ölçüldü

JS+CSS (aktarım)

532,7 kB (532,7 kB–532,7 kB)472,8 kB (472,8 kB–472,8 kB)Three.js (saf) düşük iyi
İstek sayısı33 adet (33 adet–33 adet)30 adet (30 adet–30 adet)Three.js (saf) düşük iyi
Paket sayısı
Nasıl ölçüldü

Bağımlılık sayısı

2 adet (2 adet–2 adet)1 adet (1 adet–1 adet)Three.js (saf) düşük iyi
Kurulum boyutu
Nasıl ölçüldü

Kurulum boyutu (paket+transitif)

paket+transitif; tarayıcı hariç

23,1 MB (23,1 MB–23,1 MB)20,1 MB (20,1 MB–20,1 MB)Three.js (saf) düşük iyi
Build süresi
Nasıl ölçüldü

Build süresi (tüm site)

10,7 sn (10,4 sn–11,2 sn)10,7 sn (10,4 sn–11,2 sn)fark yok düşük iyi
İlk anlamlı boyama785 ms (764 ms–814 ms)678 ms (644 ms–686 ms)Three.js (saf) düşük iyi
Etkileşime hazır789 ms (766 ms–823 ms)680 ms (645 ms–689 ms)Three.js (saf) düşük iyi
Ortalama FPS
Nasıl ölçüldü

Ortalama FPS (5 sn)

ekran yenileme sınırı (~60 Hz): bu ölçümde fark yok

58,6 FPS (57,6 FPS–59,0 FPS)60,2 FPS (60,2 FPS–60,4 FPS)fark yok yüksek iyi
Canvas kare hızı
Nasıl ölçüldü

Canvas kare hızı (5 sn)

ekran yenileme sınırı (~60 Hz): bu ölçümde fark yok

58,6 FPS (57,6 FPS–59,2 FPS)60,2 FPS (60,2 FPS–60,4 FPS)fark yok yüksek iyi
CPU görev süresi
Nasıl ölçüldü

CPU görev süresi (5 sn)

478 ms (464 ms–581 ms)191 ms (153 ms–236 ms)Three.js (saf) düşük iyi
JS yürütme
Nasıl ölçüldü

JS yürütme (5 sn)

205 ms (193 ms–230 ms)114 ms (87 ms–144 ms)Three.js (saf) düşük iyi
Kare süresi (p95)
Nasıl ölçüldü

Kare süresi p95

17 ms (17 ms–17 ms)17 ms (17 ms–17 ms)fark yok düşük iyi
Bellek (JS heap)
Nasıl ölçüldü

JS heap

12,1 MB (12,1 MB–15,4 MB)12,1 MB (10,7 MB–12,1 MB)fark yok düşük iyi
Araç kodu
Nasıl ölçüldü

Araç kodu (sloc)

151,0 satır (151,0 satır–151,0 satır)181,0 satır (181,0 satır–181,0 satır)React Three Fiber düşük iyi
Dosya sayısı
Nasıl ölçüldü

az dosya iyi tartışmalı

4 adet (4 adet–4 adet)2 adet (2 adet–2 adet)karşılaştırma yapılmaz düşük iyi
390 px taşma
Nasıl ölçüldü

390 px taşma (px)

0,00 px (0,00 px–0,00 px)0,00 px (0,00 px–0,00 px)fark yok düşük iyi

CPU görev süresi

React Three Fiber
478 ms
Three.js (saf)
191 ms

Paket sayısı

React Three Fiber
2 adet
Three.js (saf)
1 adet

JS yürütme

React Three Fiber
205 ms
Three.js (saf)
114 ms

Araç kodu

React Three Fiber
151,0 satır
Three.js (saf)
181,0 satır

Etkileşime hazır

React Three Fiber
789 ms
Three.js (saf)
680 ms

İlk anlamlı boyama

React Three Fiber
785 ms
Three.js (saf)
678 ms

Kurulum boyutu

React Three Fiber
23,1 MB
Three.js (saf)
20,1 MB

JS+CSS aktarımı

React Three Fiber
532,7 kB
Three.js (saf)
472,8 kB

İstek sayısı

React Three Fiber
33 adet
Three.js (saf)
30 adet
Görev, istem ve koşullar

Görev

Görev (Hat A)

Kurgusal Tasnora dijital setinin hero bölümünde, ziyaretçinin ürün nesnesini görmesi, ışık altında incelemesi ve bir kaydırıcıyla döndürmesi gerekir. Aynı sayfada özellik/plan seçimleri 3B önizlemeyi günceller; geri kalan bölümler düz HTML ile kalır.

Bu hat, React Three Fiber ile saf Three.js (WebGLRenderer) yaklaşımını aynı ürün görevi için yan yana kıyaslar.

İstem

İstem (Hat A)

Not: Aşağıdaki metin bu kıyas hattının tanım istemidir. Mevcut iki demo (/demo/ui-001, /demo/ui-002) ilk iki demo çalışmasıyla, bu dosyadaki kelimesi kelimesine aynı istemle üretilmedi. Karşılaştırılabilirlik koşulları için bkz. kosullar.md.

Tasnora için tek sayfalık ürün demosu: ortak içerik şablonu, hero’da gerçek WebGL 3B sahne (dönen ürün + ışık + “Ürünü döndür” kaydırıcısı), prefers-reduced-motion desteği, WebGL yoksa okunur yedek; geri kalan bölümler native HTML ve “bu bölüm aracın değil” etiketi. Üçüncü parti model/dış ağ yok.

Koşullar ve dürüstlük

Adil koşul kaydı — Hat A (Three.js saf ↔ React Three Fiber)

Ortak olanlar

  • Aynı görev: Tasnora şablonu, sekiz bölüm, hero’da tek 3B sahne, kaydırıcı ile manuel döndürme, plan/kart seçimlerinin sahneyi güncellemesi.
  • Aynı içerik kaynağı: lib/demo-icerik.ts, lib/demo-bolumler.ts.
  • Aynı Three sürüm kilidi: 0.187.0 (her iki tarafta).
  • Aynı erişilebilirlik davranışı: prefers-reduced-motion ile otomatik dönme/yüzme durur; kaydırıcı çalışır.
  • Ölçüm: başsız Chromium, SwiftShader (--use-angle=swiftshader); FPS ve kare süreleri göreli kıyas içindir, mutlak GPU performansı iddiası yok.

Aynı istem iddiası yok

Taraf Üretim emri İstem kaynağı
React Three Fiber (ui-001) ilk demo çalışması demo çalışma notu (R3F API kanıtı, tek Canvas, CanvasTexture ürün kartı)
Three.js saf (ui-002) ikinci demo çalışması demo çalışma notu (imperatif WebGLRenderer, API kanıtı, bölmeli kutu)

Bilinen farklar (kıyası bozabilecek)

  1. 3B nesne tasarımı: R3F tarafı katmanlı kart + CanvasTexture yüz + metal halkalar; Three.js tarafı bölmeli kutu (kutu/silindir geometrileri). Görsel ekran görüntüleri birebir aynı kare değildir; kalite ölçümünde “aynı kare” yerine ilk kare + 3 sn kare yaklaşımı kullanılır.
  2. Kod yapısı: R3F Canvas + useFrame; Three.js manuel requestAnimationFrame döngüsü ve kaynak dispose.
  3. Gölge/ışık: Her iki sahnede directional ışık ve gölge var; sayı ve map boyutları tam eşleştirilmedi (kasıtlı eşitleme yapılmadı).
  4. İşçi süresi: İlk iki demo çalışmasında tur/dakika ayrı kaydedilmedi → ölçümde ölçülmedi, sebep: çalışma notunda süre yok.

Kıyas rotaları

Taraf Demo URL
React Three Fiber /demo/ui-001
Three.js (saf) /demo/ui-002

Kurulum ölçümü

Hat B ile aynı du -sb kapanışı: @react-three/fiber + three transitif bağımlılıkları, iç içe node_modules düşülür. Kapsam JSON kapsam alanındadır. Ayrıntı: kiyas/b/kosullar.md.

Ham günlük

Ham günlük: tüm ölçümler, aktarım dökümü dahil (docs/kanit/sb-37-kiyas-a-kosu-*.log). Her koşu için taraf, JS+CSS aktarımı, istek sayısı, LCP, etkileşime hazır, FPS, canvas FPS, kare süresi p95, JS heap, CPU görev/betik/yerleşim değerleri ve konsol uyarıları yazılır; ayrı aktarim-dokum satırında aynı kökenden gelen her kaydın adı ve bayt değeri (ad:aktarılan:gövde) bulunur; istek sayısı bu kayıtlara sayfanın kendi HTML belgesinin (kaynak kaydı olmayan 1 istek) eklenmesiyle bulunur. Ölçülmeyen alan "ölçülmedi" yazılır, asla 0 yazılmaz. Günlük zaman damgalı yeni dosyadır, eskisi ezilmez.

  • Build süresi (10,72 sn) bu turdaki koşuda yeniden ölçülmedi: önceki ölçümden (2026-11-12T00:27:01Z) alındı (JSON'da not alanı ve ortam.buildNotu bunu söyler). Betik build'i atlarsa değeri 0 değil ölçülmedi yazar; eski değerin JSON'a aktarılması elle yapıldı.