Altın Konu Sayfa Görünürlüğü API'sini Kullanma

Asalet-i Fatih · 15 Mar 2026

Sayfa Görünürlüğü API'si nedir?

Başlangıçta, Sayfa Görünürlüğü API'si bağımsız bir spesifikasyon olarak geliştirilmişti , ancak doğrudan HTML spesifikasyonuna Sayfa görünürlüğü başlığı altında dahil edildi. Bu API, bir belgenin görünürlük durumunu belirlemenin bir yolunu sunarak bir web sayfasının "görünür" veya "gizli" olup olmadığını kontrol etmenizi sağlar. Bu basit gibi görünse de, sayfalar çeşitli şekillerde "gizlenebilir".

Bir sayfa, tarayıcı penceresi simge durumuna küçültüldüğünde, başka bir uygulama tarafından tamamen gizlendiğinde veya kullanıcı başka bir sekmeye geçtiğinde "gizlenir". İşletim sisteminin ekran kilidi etkinleştirildiğinde de sayfa görünürlüğü "gizlenir" olarak değişir, bu nedenle mobil cihaz davranışı da dikkate alınır. Buna karşılık, bir sayfa ekranda kısmen görünür olsa bile "görünür" kalır.

Sayfa görünürlüğündeki değişiklikleri nasıl kontrol edebilirim?

Belgenin görünürlüğünü kontrol etmek için `invisability` yöntemini kullanabilirsiniz document.visibilityState; bu yöntem `invisability` visibleveya ` invisability` değerini döndürür hidden. Alternatif olarak, Boolean özelliğinin değerini kontrol edebilirsiniz document.hidden:

[CODE title="JS"]console.log(document.visibilityState); // "visible"
console.log(document.hidden); // false[/CODE]

visibilitychange Pratikte, sayfanın görünürlük durumu değiştiğinde mantıksal işlemleri tetiklemek için olayı kullanmak, görünürlüğü manuel olarak kontrol etmekten daha pratiktir :

Kod:

document.addEventListener("visibilitychange", (event) => {
  // doSomething();
});

Durum değiştiğinde, sayfanın görünürlüğünü kontrol edebilir ve sonuca bağlı olarak bir şeyler yapabilirsiniz:

Kod:

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    // do something if the page visibility changes to hidden
  } else {
    // do something if the page visibility changes to visible
  }
});

Şunu belirtmekte fayda var ki, böyle bir seçenek yok document.visible; dolayısıyla sadece o durumla ilgileniyorsanız, document.visibilityState === "visible"(veya !document.hidden) kullanabilirsiniz:

Kod:

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    // The page is visible again!
  }
});

Sayfa görünürlüğünün faydası

Sayfa görünürlüğü birçok durumda faydalıdır, ancak en olası kullanım alanları analiz, işlem kaynaklarının kullanımının yönetimi ve çeşitli cihazlarda kullanıcı deneyimini (UX) iyileştirebilecek işlevsellik eklemektir. Bunlara daha detaylı bakmak gerekiyor.

visibleAnalitik alanında, sayfaların bir durumdan diğerine geçiş noktasını kaydetmek yaygındır hidden. Bir sayfanın bir hidden duruma geçmesi, sayfa tarafından gözlemlenebilen son olay olabilir, bu nedenle geliştiriciler bunu genellikle kullanıcının oturumunun sonu olarak kabul eder. Ancak bu, 'oturum'u nasıl tanımladığınıza büyük ölçüde bağlıdır. Oturumu, yalnızca 'ilk sayfa gizleme'ye güvenmek yerine, belirli bir süre boyunca hareketsiz kalmaya dayalı olarak tanımlayabilirsiniz. Bu nedenle, bu kullanım durumu ihtiyaçlarınıza göre değişecektir:

Kod:

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};

Sayfa görünürlüğünü belirleme yeteneği, ziyaretçi sayfayı artık görüntülemediğinde bir işlemi durdurma fırsatı sunar. Bu özellik, istemci (hatta sunucu) kaynaklarını bilinçli bir şekilde yönetmemizi sağladığı için gerçekten güçlüdür.

Kaynak yönetimi söz konusu olduğunda, tarayıcılar sekme boşaltma ve arka planda çalışan sekmelerin işlevlerini optimize etme gibi özellikleriyle önemli bir rol oynar. Web uygulamalarını nasıl geliştirdiğimize bakarak çözümü daha erken aşamalara taşıyabiliriz. Bu, geliştirme döngüsünün daha başlarında verimlilik kontrolleri yapmamıza veya tarayıcıların otomatik olarak ele almadığı alanlarda bilinçli performans iyileştirmeleri yapmamıza olanak tanır.

Sunucuyla düzenli gerçek zamanlı iletişim (WebSockets ve WebRTC) gerçekleşiyorsa, daha düşük bit hızına sahip videolar kullanmak veya ağ etkinliğini kısıtlamak veya duraklatmak için mükemmel bir fırsat vardır. Tarayıcılar zaman aşımını önlemek için bu bağlantıları kısıtlamadığından, IndexedDB işlemleri optimize edilebilir. Tarayıcıların neleri ele aldığı hakkında daha fazla bilgiyi, Sayfa Görünürlüğü API sayfasındaki "Arka plan sayfa performansına yardımcı olmak için uygulanan politikalar" bölümünde bulabilirsiniz.