Test

Prompt

Sen kıdemli bir software architect, debugging uzmanı ve code reviewer'sın. Aşağıdaki senaryoyu analiz et: Bir vanilla JavaScript + CSS + Vite tabanlı bir web uygulamam var. Uygulama yaklaşık 9.000 veri kaydı içeriyor ve kullanıcılar bu kayıtları arayabiliyor, filtreleyebiliyor, favorilere ekleyebiliyor ve detay modalında görüntüleyebiliyor. Son aylarda uygulamaya şu özellikler eklendi: - Fuzzy search - Çoklu filtreleme - Favorites sistemi - URL üzerinden state paylaşımı - Infinite scroll - Lazy-loaded images - Modal open/close animasyonları - Dark/light theme - localStorage persistence - Keyboard navigation - Mobile responsive layout Ancak kullanıcılar şu problemleri raporluyor: 1. Büyük ekranlarda arama yaparken bazen 200–500 ms takılma oluyor. 2. Mobilde hızlı şekilde aşağı/yukarı scroll yapıldığında bazı görseller yanlış kartta görünüyor. 3. Modal arka arkaya hızlı açılıp kapatıldığında bazen eski animasyon yeni modalın üzerinde kalıyor. 4. Favorilere çok sayıda öğe eklendiğinde sayfa zamanla yavaşlıyor. 5. URL'deki filtre state'i ile ekrandaki filtre state'i bazı durumlarda birbirinden farklı hale geliyor. 6. Sayfa açık kaldığında memory usage zamanla artıyor. 7. Kullanıcı 4–5 kez hızlı şekilde filtre değiştirirse bazı eski search sonuçları yeni sonuçların üzerine yazabiliyor. Elinde gerçek source code olmadığını varsay. Buna rağmen problemi yüzeysel geçiştirme. Şunları sırayla yap: A) Her problemin altında yatabilecek teknik nedenleri belirle. Her problem için: - en olası neden - alternatif neden - bunu doğrulamak için yapılacak test - beklenen gözlem belirt. B) Problemleri önem ve kök neden ilişkisine göre grupla. Aynı kök nedenden kaynaklanabilecek problemleri fark et. C) Özellikle şu konuları derinlemesine değerlendir: - event listener lifecycle - AbortController - race conditions - stale closures - async request cancellation - DOM node reuse - IntersectionObserver - layout thrashing - forced synchronous layout - excessive re-rendering - memory leaks - localStorage serialization - state synchronization - animation lifecycle D) Search sistemi için performans mimarisi öner. 9.000 kayıt için hangi yaklaşımı seçerdin? Kararını nedenleriyle açıkla ve hangi durumda Web Worker, debounce, indexing veya farklı bir search algoritması kullanacağını belirt. E) Race condition problemini çözmek için en az iki farklı mimari yaklaşım göster. Örneğin AbortController tabanlı yaklaşım ile request ID / generation counter yaklaşımını karşılaştır. Her birinin avantajlarını, dezavantajlarını ve edge case'lerini açıkla. F) Modal animation problemini çözmek için sağlam bir lifecycle tasarla. Open → active → closing → removed akışını düşün. Rapid open/close/open durumunda eski animation'ın yeni modalı etkilememesini garanti edecek bir yaklaşım öner. G) Memory leak problemini teşhis etmek için Chrome DevTools kullanarak adım adım uygulanabilir bir investigation planı yaz. H) Sonunda bir "uygulama sırası" oluştur: 1. Önce neyi düzeltirdin? 2. Sonra neyi? 3. Neden bu sırayı seçtin? Ancak önemli bir kural var: GERÇEK SOURCE CODE ELİNDE OLMADIĞI İÇİN, belirli bir kodun kesin olarak hatalı olduğunu iddia etme. "Kesin sorun budur" yerine kanıt düzeyini belirt: - High confidence - Medium confidence - Low confidence Son olarak kendi cevabını eleştir: - Hangi varsayımları yaptın? - Hangi önerilerin gereksiz optimizasyon olabilir? - Hangi noktada gerçek source code olmadan karar vermek mümkün değil? - Cevabındaki en zayıf bölüm hangisi? Cevabını teknik ama anlaşılır yaz. Gereksiz genel bilgiler verme. En önemli nokta, problemler arasındaki bağlantıları ve gizli race condition / lifecycle / memory leak ihtimallerini yakalaman.