Frontend geliştirici mülakat soruları

Neyi kontrol ediyorlar

Asenkron kodun nasıl yazıldığını değil, gerçekte nasıl çalıştığını anlayıp anlamadığınız.

Güçlü bir cevap şunlara değinir

1. JavaScript'in tek bir çağrı yığını (call stack) üzerinde çalıştığını, asenkron işlerin devredilip sonrası için kuyruğa alındığını anlatın.
2. Kuyrukları ayırın; setTimeout geri çağrıları gibi görevler (task) ve promise geri çağrıları gibi mikro görevler (microtask).
3. Bekleyen tüm mikro görevlerin bir sonraki görevden önce çalıştığını, bu yüzden çözülmüş bir promise'in sıfır gecikmeli bir setTimeout'tan önce çalıştığını söyleyin.
4. Bunu gerçek bir sonuca bağlayın, örneğin yığın hiç boşalmadığı için uzun bir döngünün sayfayı dondurması.

Neyi kontrol ediyorlar

Sayfanın yüklenme ve render sürecini ne kadar iyi bildiğiniz; çoğu performans çalışması buna dayanır.

Güçlü bir cevap şunlara değinir

1. Ağ adımlarını kısaca sayın; DNS sorgusu, bağlantı ve TLS el sıkışması, ardından HTTP isteği.
2. Ayrıştırmayı anlatın; HTML'den DOM'un, CSS'ten CSSOM'un oluşması ve ikisinin birleşerek yerleşime (layout) ve boyamaya (paint) gitmesi.
3. Render'ı neyin engellediğini belirtin, örneğin defer ya da async olmadan yüklenen script'ler ve head içindeki CSS.
4. Sonraki ziyarette önbelleğin ve CDN'in yolu nasıl kısalttığıyla bitirin.

Neyi kontrol ediyorlar

Render sürecini doğru yorumlayıp hem gereksiz render'lardan hem de erken optimizasyondan kaçınabilmeniz.

Güçlü bir cevap şunlara değinir

1. Tetikleyicileri sayın; bileşenin state'inin değişmesi, üst bileşenin yeniden render olması ya da okuduğu bir context'in değişmesi.
2. Yeniden render'ın DOM güncellemesi anlamına gelmediğini, React'in sonucu karşılaştırıp yalnızca farklı olanı değiştirdiğini açıklayın.
3. İşi atlamanın araçlarını, yani memo, useMemo ve useCallback'i ve getirdikleri maliyeti anlatın.
4. Optimize etmeden önce profiler ile ölçeceğinizi söyleyin ve yaptığınız bir düzeltmeden örnek verin.

Neyi kontrol ediyorlar

Düzeltmeden önce teşhis koyup koymadığınız ve yavaş sayfaların yaygın nedenlerini bilip bilmediğiniz.

Güçlü bir cevap şunlara değinir

1. Önce Lighthouse ya da tarayıcının performans paneliyle ölçün ve hangi metriğin önemli olduğuna karar verin, örneğin yükleme süresi ya da etkileşim gecikmesi.
2. Olağan şüphelileri kontrol edin; gereğinden büyük görseller, büyük JavaScript paketleri, render'ı engelleyen kaynaklar ve yavaş API çağrıları.
3. En büyük nedenden başlayın, örneğin kodu bölerek, tembel yükleme (lazy loading) yaparak ya da cevapları önbelleğe alarak.
4. Değişikliğin işe yaradığını doğrulamak için tekrar ölçün ve sorunun geri dönmemesi için bir kontrol ekleyin.

Neyi kontrol ediyorlar

Beceriniz kadar muhakemeniz; kullanıcıyı, tasarımı ve teknik kısıtları nasıl tarttığınız.

Güçlü bir cevap şunlara değinir

1. Ne yaptığınızı, kimin kullandığını ve hangi sorunu çözdüğünü anlatın.
2. Karmaşık state, erişilebilirlik ya da performans gibi zor bir kısmı ve onu nasıl çözdüğünüzü açıklayın.
3. Doğru sonucu almak için tasarım ya da backend ekibiyle nasıl çalıştığınızı belirtin.
4. Mümkünse ölçülmüş bir sonuçla bitirin, örneğin işlemlerin daha kısa sürede tamamlanması ya da daha az destek talebi.