holodepth

Framework entegrasyonları · Angular + Three

Zone Kaçışı & Performans: Ne Zaman Ada Yetmez?

runOutsideAngular çoğu vitrini kurtarır; sıcak yollarda hâlâ Angular vergisi kalır. Bu sayfa ölçülmüş kaçış eşiğini anlatır: NgZone 101 tekrarı veya R3F imperatif kaçış kopyası değildir.

Holodepth bu yaprağı genel «optimize et» sloganı olarak yazmaz. Temel tik politikası Kare döngüsü & NgZone yaprağındadır. R3F ada modeli Performans & imperatif kaçış yaprağındadır (Fiber uzlaştırma vergisi). Ms / CPU-GPU Platform · FPS / CPU / GPU yapraklarındadır. Instancing matematiği Three'dedir. glTF LOD format / Platform asset'tedir.

Sayfayı bitirdiğinizde şu cümleyi kurabilmelisiniz: «OutsideAngular ilk kapıdır, son kapı değildir. CD / liste / bind yağmuru ayrı vergidir. Sıcak ada Object3D + dar API ister. Ölçüm olmadan zoneless ezberi borçtur. Angular + Three izleği burada kapanır.»

Bu sayfanın sınırı · komşu konularla ayrım

Bu sayfa Angular + Three'de Zone kaçış / performans eşiğini anlatır:

  • Outside yetmez sinyalleri
  • CD / OnPush / dar API adası
  • Liste vs instance · ölçüm köprüsü
  • Üç kaçış profili · izlek kapanışı

Bilinçli olarak dışarıda bırakılan konular:

  • Temel rAF / Outside döngü → Kare döngüsü & NgZone
  • R3F ref/instance kaçış → R3F · Performans & kaçış
  • Host / şablon / yük / pick → önceki Angular yapraklar
  • FPS ms / CPU-GPU dilimleri → Platform
  • Zoneless CD tam müfredatı · InstancedMesh formül · glTF

Kısa ayrım: Bu sayfa «Outside sonrası ne zaman daha sert kaçılır?» · NgZone yaprağı «tik nasıl Outside'ta yaşar?» · R3F kaçış «Fiber uzlaştırma adası» · Platform «ms dilimi».

OutsideAngular yetmez sinyalleri

Döngü Outside'ta olsa bile: her kare async pipe, geniş @for, parent'tan inen input sağanağı, global store select'leri Angular ağacını sarsar. Holodepth sinyal listesi: profilde JS dilimi yüksek, GPU sakin; CD sayısı kareyle korelasyonlu; Three tick ince ama şablon «yanıyor».

Bu sinyal yokken zoneless veya full imperatif'e zıplamak prematüre borçtır. Önce ölçün (Platform), sonra eşiği yazın.

Outside kapıyı açar; vergi bazen içerideki salondadır.

CD adası: dar yüzey

Holodepth model: 3D host bileşeni OnPush (veya eşdeğeri), dışarıya 2–3 input / output; içeride Object3D mutasyonu. Parent her saniye yeni object literal basıyorsa OnPush bile kırılır — şablon haritasındaki «kur bir kez» kuralının performans kuzeni.

detach() / elle mark nadiren; çoğu üründe dar API + Outside yeter. detach'i «sihir kill switch» yapmayın; ölçüm ve belge şart.

Liste vergisi vs instance

Binlerce app-part-node Angular + Object3D çifti doğurur. Holodepth: kalabalık benzeri sahnelerde şablon döngüsünü bırakıp instance köprüsüne geçin (Three derinliği link). Karar cümlesi ürün ticket'ında: N eşik, track maliyeti, draw maliyeti.

Kaba süzgeç
Ölçek İlk tercih Kaçış
Onlarca unique parça Bileşen + group Nadiren
Yüzler–binler benzer Instance + dar host Liste CD / draw
Unique material graph Atlas / sınırlı varyant Instance tek başına yetmez

Ağır işi şeritten çıkarın

Parse, pathfinding, büyük dizi map'i ana iş parçacığında Zone fark etmeksizin jank üretir. Worker / async chunk Offload ürün kararıdır; sonuç main'de seyrek merge edilir. Holodepth: kaçış yalnızca Zone değildir; CPU şeridi de olabilir (Platform CPU/GPU).

Zoneless sinyali (eşik)

Deneysel / olgunlaşan zoneless change detection tüm uygulamayı yeniden sözleşmeye zorlar. Holodepth: Three vitrini için varsayılan reçete değildir. Sinyal: uygulama zaten signal-first ve ölçüm Outside'ın yetmediğini gösteriyor. Bu sayfa zoneless kurulum öğretmez; «tüm Angular'ı silmeden önce ada ve OnPush» sırasını mühürler.

Kaçış disiplini

  1. Ölç (taban ms, CD sayımı, dilim).
  2. Outside + dar API dene.
  3. Liste / bind vergisine dokun.
  4. Instance veya worker eşiği.
  5. Zoneless / radikal ancak kanıtla.

R3F kaçışındaki «shell deklaratif · ada elle» burada «shell Angular · çekirdek Object3D» olur. Aynı borç: belge, tavan (COUNT), sahiplik.

Yanlış kaçışlar

  • Ölçüm yokken zoneless.
  • GPU bound sorunu görüp yalnız Zone'u suçlamak.
  • Her vitrini instance yapmak.
  • detach edip unutmak (UI ölür).
  • Outside yazıp her kare markForCheck yağdırmak.

Güvenli ada: simüle kaçış

Örnekler öğretim amaçlıdır. Outside döngü önceki yaprakta varsayılır.

Simüle · OnPush host + dar input. 

import {
  ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges,
} from '@angular/core'

/**
 * Shell Angular · sıcak çekirdek FrameLoopService / Object3D'de.
 * active seyrek UI input'udur · her kare yeni object literal gelmez.
 */
@Component({
  selector: 'app-hot-stage',
  template: `<canvas #glCanvas></canvas>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HotStageComponent implements OnChanges {
  /** Yalnız anlamlı değişimde · {x,y,z} her CD'de yeni referans üretmeyin */
  @Input() active = true
  @Input() quality: 'low' | 'high' = 'high'

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['active'] || changes['quality']) {
      // Loop service / particle tavanı güncelle — CD selı yok
    }
  }
}

Simüle · instance yüzeyi (Angular host ince). 

import * as THREE from 'three'

const COUNT = 400 // Ürün tavanı · profil ile doğrula · kullanıcıdan sınırsız alma

/** Angular @for YOK · tek InstancedMesh · tick Outside loop'ta */
export function createCrowd(scene) {
  const geo = new THREE.BoxGeometry(0.2, 0.2, 0.2)
  const mat = new THREE.MeshStandardMaterial({
    color: '#9aa6b8', roughness: 0.5, metalness: 0.15,
  })
  const mesh = new THREE.InstancedMesh(geo, mat, COUNT)
  const dummy = new THREE.Object3D()
  scene.add(mesh)

  return {
    mesh,
    tick(elapsed) {
      for (let i = 0; i < COUNT; i++) {
        const col = i % 20
        const row = (i / 20) | 0
        dummy.position.set(col * 0.35 - 3.5, Math.sin(elapsed + i * 0.01) * 0.15, row * 0.35 - 3.5)
        dummy.rotation.y = elapsed * 0.4 + i * 0.02
        dummy.updateMatrix()
        mesh.setMatrixAt(i, dummy.matrix)
      }
      mesh.instanceMatrix.needsUpdate = true
    },
    dispose() {
      scene.remove(mesh)
      geo.dispose()
      mat.dispose()
    },
  }
}

Güvenlik: COUNT / buffer boyutunu kullanıcı girdisinden doğrulamadan şişirmeyin. Worker mesajlarında structured clone maliyetini bilin.

Kaçış tuzakları

  1. Premature zoneless: uygulamayı böler.
  2. Outside + mark yağmuru: vergi geri gelir.
  3. Liste unutulmuş: instance yok CD var.
  4. GPU'yu Zone sanmak: yanlış dilim.
  5. COUNT sınırsız: bellek DoS.
  6. Dispose yok: ada sızıntısı.
  7. R3F useFrame ezberi: Fiber store yok.

Üç kaçış profili

  • 01 · Kaçış

    Vitrin (yumuşak)

    Seviye
    Outside + OnPush
    Liste
    Az unique parça
    Risk
    Erken radikalizm
  • 02 · Kaçış

    Sıcak FX adası

    Seviye
    Dar input · buffer tick
    CD
    Parent'tan object literal yok
    Risk
    needsUpdate / sızıntı
  • 03 · Kaçış

    Kalabalık

    Seviye
    Instance · @for terk
    Tavan
    COUNT ürün sabiti
    Risk
    Unique material tuzağı

Ölçüm köprüsü

«Daha akıcı hissettim» kapı değildir. Aynı kamera yolu, taban ms / p99 (Platform FPS), mümkünse CD sayımı / performance mark. Outside sonrası JS dilimi düştü mü? Liste mi instance mı? GPU aynı mı kaldı?

Holodepth perspektifleri

Sırayı unutmayın

Outside → dar API → liste/instance → radikal. Tersten başlamak pahalıdır.

Shell'i koruyun

Tüm Angular'ı silmek nadiren kazançtır; ada çoğu zaman yeter.

Borcu yazın

COUNT, sahiplik, neden kaçıldığı: üç satır ticket.

Teşhis maddeleri

  1. Outside yapıldıktan sonra hâlâ CD yangını var mı?
  2. Input referansları her tur yenileniyor mu?
  3. @for ölçeği instance eşiğini geçti mi?
  4. GPU bound yanlışlıkla Zone'a mı yükleniyor?
  5. Önce-sonra ölçüm alındı mı?
  6. COUNT tavanı var mı?
  7. Dispose / stop loop bağlı mı?
  8. R3F veya glTF bu sayfaya sızmış mı?

Holodepth içgörüsü

Angular + Three performansı «Zone'u kapat» sloganı değildir; verginin hangi salonda olduğunu bilmektir. İzlek: host → harita → tik → kargo → bağ → kaçış.

İzlek kapanışı · sonraki kapılar

Angular + Three alt ana konusu bu yaprakla kapanır. Ölçüm için Platform FPS / CPU-GPU'ya dönün. Framework'te Vue + Three iskeleti bekler; R3F ve Angular omurgaları kardeş köprülerdir. Döngü için Host köküne dönebilirsiniz.