Tarayıcıda Video Render Süresini %80 Nasıl Kısalttık
Bir video render motorundaki dört gizli performans hatası nasıl bulundu ve düzeltildi: kare süresi %80 azaldı, gizli bir opaklık hatası da ortaya çıktı.
Bir ekip, DOM tabanlı katmanları canvas'a çizip WebCodecs ile H.264 kodlayan tarayıcı içi video render motorunda saniyede 1 kareye düşen bir performans sorununu analiz etti. Tüm render süresini profillemek yerine her aşamayı (DOM yakalama, efekt birleştirme, overlay işleme, kodlama) ayrı ayrı ölçtüler ve dört farklı darboğaz buldular.
Sorunlar arasında export sırasında gereksiz yere çalışan önizleme overlay'leri, kare boyutu değiştikçe yeniden oluşturulan WebGL bağlamları ve en kritiği, opaklık gibi çizim-zamanı özelliklerinin önbellek anahtarına dahil edilmesi yer alıyordu — bu da basit bir fade animasyonunun her karede yeniden DOM rasterizasyonu (domToCanvas) tetiklemesine neden oluyordu. İçerik ile dönüşüm/opaklığı ayıran iki seviyeli bir önbellek tasarımıyla bu maliyetli işlem 1-3ms'ye indirildi.
Piksel karşılaştırmalı doğrulama süreci ayrıca export'un opaklığı hem bitmap'e hem de çizim sırasında iki kez uyguladığı gizli bir hatayı ortaya çıkardı. Sonuçta sahne medyanları 0.5-1.0 saniyeden 90-165ms'ye düştü, sunucu render süresi 10 dakikadan 3 dakikaya indi. Yazı, katman başına ölçüm yapmanın, içerik/dönüşüm ayrımının ve piksel-diff doğrulamanın neden kritik olduğunu gösteriyor.
Bu sentez, kaynağından yapay zeka tarafından üretildi; insan editör ya da elle onay adımı yoktur. Nasıl çalışıyoruz