Q: Bir sayfa, <head içinde <link rel="stylesheet" href="app.css" ile büyük bir stylesheet içeriyor. Kullanıcılar bu inene kadar boş ekran görüyor. Tarayıcı neden bekler?

Doğru cevap: CSS render-blocking'tir: tarayıcı, stilleri elde edene dek boyamayı geciktirir. Varsayılan olarak CSS render'ı bloklar — tarayıcı stilsiz içeriği boyamaktan kaçınır; bu yüzden head'deki büyük bir stylesheet, gelene kadar first paint'i geciktirir. Head, body parse'ını topluca bloklamaz (a); HTML parse'ı sürer ama boyama bekler. CSS bir script değildir (d) ve HTML parse'ı başladıktan sonra istenir, önce değil (b).

Question 1

Bir ürün fotoğrafı 2 MB'lık bir PNG olarak sunuluyor ve yavaş yükleniyor. İndirilen boyutu gözle görülür kalite kaybı olmadan en güvenilir şekilde hangisi küçültür?

Accepted Answer

Doğru cevap: Fotoğrafı JPEG veya WebP gibi lossy bir formata yeniden encode etmek. Fotoğraflar, keskin kenarlı grafikler için tasarlanmış lossless PNG yerine JPEG veya WebP gibi lossy formatlarda çok daha iyi sıkışır. Uzantıyı değiştirmek (a) byte'ları yeniden encode etmez — dosya 2 MB'lık PNG olarak kalır. width/height attribute'ları (c) layout alanını rezerve edip kaymayı önler ama indirilen byte sayısını değiştirmez.

Question 2

Buradaki loading="lazy" attribute'u ne yapar?

Accepted Answer

Doğru cevap: Görselin yüklenmesini, görsel ekrana girmek üzere olana dek erteler. loading="lazy", tarayıcıya ekran dışındaki bir görseli, kullanıcı yakınına kaydırana kadar getirmemesini söyler; böylece hiç görülmeyebilecek görseller için bandwidth harcanmaz. Sıkıştırma yapmaz (a) ve script sırasıyla ilgisizdir (b); placeholder değiştirme deseni (d) attribute'un yaptığı değil, senin kurduğun bir şeydir.

Question 3

Tek ve çok büyük bir JavaScript bundle göndermek sayfa performansı için neden genelde kötüdür?

Accepted Answer

Doğru cevap: Tarayıcı, sayfa etkileşime hazır olmadan önce tümünü indirip parse edip çalıştırmak zorundadır. Büyük bundle etkileşimi geciktirir: kullanıcı, tarayıcı henüz gerekmeyebilecek kodu indirip parse edip çalıştırırken bekler. Büyük dosyalar da küçükler gibi cache'lenebilir (b), onları reddeden bir boyut sınırı yoktur (c) ve bug sayısı bundling ile ilgisizdir (d).

Question 4

Bir single-page app, nadiren kullanılan admin dashboard dahil her ekranı içeren tek bir bundle yüklüyor. Login sayfasındaki kullanıcılar bunun tamamını bekliyor. Bunu en iyi hangi teknik çözer?

Accepted Answer

Doğru cevap: Bundle'ı bölmek; her ekranın kodu ancak o ekran açıldığında getirilir. Code splitting, login sayfasının yalnızca ihtiyaç duyduğunu indirmesini sağlar; admin dashboard'ın kodu sonradan, gerektiğinde yüklenir. CDN (a) ve minification (b) biraz yardımcı olsa da admin kodunu yine her ziyaretçiye baştan gönderir; loading="lazy" ise bir görsel/iframe attribute'udur, uygulama modüllerini ertelemenin yolu değildir (c).

Question 5

Bir CSS veya JavaScript dosyasını minify etmek ne yapar?

Accepted Answer

Doğru cevap: Boşlukları ve yorumları siler, isimleri kısaltır; böylece dosya boyutunu düşürür. Minification, makinenin ihtiyaç duymadığı karakterleri — boşluk, yorum, uzun değişken adları — atarak daha küçük ama işlevsel olarak birebir aynı bir dosya üretir. Şifreleme değildir (a); kod yeniden formatlandıktan sonra hâlâ okunabilir. Dosyayı bölmez (c), binary'ye derlemez (d).

Question 6

Bir sayfa, <head içinde <link rel="stylesheet" href="app.css" ile büyük bir stylesheet içeriyor. Kullanıcılar bu inene kadar boş ekran görüyor. Tarayıcı neden bekler?

Accepted Answer

Doğru cevap: CSS render-blocking'tir: tarayıcı, stilleri elde edene dek boyamayı geciktirir. Varsayılan olarak CSS render'ı bloklar — tarayıcı stilsiz içeriği boyamaktan kaçınır; bu yüzden head'deki büyük bir stylesheet, gelene kadar first paint'i geciktirir. Head, body parse'ını topluca bloklamaz (a); HTML parse'ı sürer ama boyama bekler. CSS bir script değildir (d) ve HTML parse'ı başladıktan sonra istenir, önce değil (b).

Frontend Performance Mülakat Soruları

Örnek sorular

Uzmanlığa göre

Kıdeme göre

Diğer alanlar