Sayfa Yaşam Döngüsü API'sı

Günümüzde modern tarayıcılar bazen sayfaları askıya almakta veya sistem kaynakları kısıtlandı. Gelecekte tarayıcılar bunu yapmak istiyor Böylece daha az güç ve bellek kullanabilirler. Page Lifecycle API sayfalarınızın bu tarayıcıları güvenli bir şekilde işleyebilmesi için yaşam döngüsü kancaları sağlar en iyi uygulamaları paylaşacağız. API'ye göz atarak uygulamanızda bu özellikleri kullanmanız gerekip gerekmediğine karar verin.

Arka plan

Uygulama yaşam döngüsü, modern işletim sistemlerinin kaynaklar. Android, iOS ve son Windows sürümlerinde uygulamalar başlatılabilir ve herhangi bir zamanda durdurulmuş olur. Bu, söz konusu platformların işlerini kolaylaştırarak kaynakları kullanıcıya en faydalı olacak şekilde yeniden tahsis eder.

Web'de bugüne kadar böyle bir yaşam döngüsü yoktur ve uygulamalar her zaman süresiz olarak yaşayabilir. Çok sayıda web sayfası çalışırken, kritik sistem bellek, CPU, pil ve ağ gibi kaynaklara aşırı abone olunabilir. kötü bir son kullanıcı deneyimine yol açıyor.

Web platformunda uzun zamandır yaşam döngüsü durumlarıyla ilgili etkinlikler — load gibi, unload ve visibilitychange Bu etkinlikler yalnızca geliştiricilerin yanıt verebilmeniz için çok önemlidir. Web'in çalışabilmesi için daha güvenilir sunmasını sağlar (ve bir yandan da genel olarak tarayıcılar, sistemi proaktif olarak geri almak ve yeniden dağıtmak için bir yönteme kaynaklar.

Hatta günümüzde tarayıcılar, kaynakları korumak için aktif önlemler alıyor. tarayıcı (özellikle Chrome) olmak üzere tüm tarayıcı (özellikle de Chrome) toplam kaynak ayak izlerini azaltmak istiyor.

Sorun şu ki, geliştiricilerin bu tür durumlara karşı hazırlıklı farkında bile olmazsınız. Bunun anlamı şudur: korumacı olması gerekir. Aksi takdirde web sayfalarını bozabilir.

Page Lifecycle API şu şekilde çözme girişiminde bulunur:

• Web'de yaşam döngüsü durumları kavramını kullanıma sunuyoruz ve standart hale getiriyoruz.
• Tarayıcıların gizli veya etkin olmayan sekmeler tarafından tüketilebilecek kaynaklar.
• Web geliştiricilerin yanıt vermesine olanak tanıyan yeni API'ler ve etkinlikler oluşturma veya bu yeni durumlardan uzaklaşmak anlamına gelir.

Bu çözüm, web geliştiricilerinin oluşturması gereken öngörülebilirliği sağlar. dirençli hale getirir ve tarayıcıların daha fazla sistem kaynaklarını agresif bir şekilde optimize ederek sonuçta tüm web kullanıcılarına fayda sağlar.

Bu gönderinin geri kalanında yeni Sayfa Yaşam Döngüsü özellikleri tanıtılacak mevcut tüm web platformu durumlarıyla ilişkilerini keşfedin. ve etkinlikler. Ayrıca, yeni 360 derece yayıncılık kategorisinde her eyalette geliştiricilerin yapması gereken (ve yapmaması gereken) işlerin oranı.

Sayfa Yaşam Döngüsü durumlarına ve etkinliklerine genel bakış

Tüm Sayfa Yaşam Döngüsü durumları tek bir sayfadır ve karşılıklı olarak birbirini dışlar. Yani bir sayfa, aynı anda yalnızca bir durumda olabilir. Bir sayfanın yaşam döngüsü durumunda yapılan çoğu değişiklik genellikle DOM etkinlikleri aracılığıyla gözlemlenebilir (istisnalar için her eyalet için geliştirici önerilerine bakın).

Sayfa Yaşam Döngüsü durumlarını açıklamanın en kolay yolu aralarında geçişlerin yapıldığına dair sinyal veren olayları bir diyagramda görebilirsiniz:

Eyaletler

Aşağıdaki tabloda her bir eyalet ayrıntılı olarak açıklanmaktadır. Ayrıca potansiyel riskleri ve geliştiricilerin daha önce ve sonra gerçekleşebilecek etkinlikleri, nasıl kullanacağınızı göstereceğim.

Eyalet	Açıklama
Etkin	Bir sayfa görünür durumdaysa ve giriş odağı. Önceki olası eyaletler: pasif (focus etkinliği üzerinden) donduruldu (resume etkinliği aracılığıyla pageshow etkinliği) Sonraki olası durumlar: pasif ( blur etkinliği üzerinden)
Pasif	Bir sayfa görünüyorsa ve görünüyorsa pasif durumdadır. giriş odağı yok. Önceki olası eyaletler: etkin (blur etkinliği üzerinden) gizli ( visibilitychange etkinliği) donduruldu (resume etkinliği üzerinden, pageshow etkinliği) Sonraki olası durumlar: etkin (focus etkinliği üzerinden) gizli ( visibilitychange etkinliği)
Gizli	Bir sayfa görünür değilse (ve görünür değilse) gizli durumundadır dondurulmuş, silinmiş veya feshedilmiş olabilir. Önceki olası eyaletler: pasif ( visibilitychange etkinliği) donduruldu (resume etkinliği aracılığıyla pageshow etkinliği) Sonraki olası durumlar: pasif ( visibilitychange etkinliği) donduruldu (freeze etkinliği aracılığıyla) silindi (hiçbir etkinlik tetiklenmedi) feshedildi (hiçbir etkinlik tetiklenmedi)
Donmuş	Dondurulmuş durumda, tarayıcı şunun yürütülmesini askıya alır: donabilir görevlerin yer aldığı görev sıralarına yerleştirir. Bunun anlamı, JavaScript zamanlayıcıları ve getirme geri çağırmaları çalışmaz. Zaten çalışıyor tamamlayabileceğinizi düşünerek (en önemlisi freeze geri arama), ancak yapabilecekleri ve ne kadar süre yayınlayabileceklerini. Tarayıcılar CPU/pil/veri kullanımını korumak için sayfaları dondurur; onlar aynı zamanda daha hızlı etkinleştirmenin geri/ileri gezinmeler - tam sayfa ihtiyacını ortadan kaldırır yeniden yükleyin. Önceki olası eyaletler: gizli (freeze etkinliği üzerinden) Sonraki olası durumlar: etkin (resume etkinliği üzerinden, ardından pageshow etkinliği) pasif (resume etkinliği aracılığıyla, pageshow etkinliği) gizli (resume etkinliği aracılığıyla) silindi (hiçbir etkinlik tetiklenmedi)
Sonlandırıldı	Bir sayfa, başlatılmaya başladıktan sonra sonlandırılmış durumundadır tarayıcı tarafından kaldırıldı ve bellekten temizlendi. Sıra No: yeni görevler bu durumda başlayabilir ve devam etmekte olan görevler çok uzun sürerse ölür. Önceki olası eyaletler: gizli (pagehide etkinliği üzerinden) Sonraki olası durumlar: YOK
Silindi	Bir sayfa, koruma altına almak için bir web sitesini ziyaret edin. Görev, etkinlik geri çağırması veya Her türlü JavaScript bu durumda çalışabilir, zira genellikle silme işlemi yeni süreçlerin başlatılmasını gerektiren kaynak kısıtlamaları imkansızdır. Silindi durumunda sekmenin kendisi (sekme başlığı ve site simgesi dahil) genellikle kullanıcı tarafından görülebilir ancak sayfa kaldırılmış olsa bile. Önceki olası eyaletler: gizli (hiçbir etkinlik tetiklenmedi) dondu (hiçbir etkinlik tetiklenmedi) Sonraki olası durumlar: YOK

Etkinlikler

Tarayıcılar çok sayıda etkinlik gönderir ancak bunların yalnızca küçük bir kısmı bir durumunda herhangi bir değişiklik olabileceğini unutmayın. Aşağıdaki tabloda tüm etkinlikler özetlenmiştir yaşam döngüsüyle ilgilidir ve hangi durumlarda geçiş yapabileceklerini listeler.

Ad	Ayrıntılar
focus	Bir DOM öğesine odaklanıldı. Not: focus etkinliği mutlaka bir durum değişikliğine işaret eder. Yalnızca aşağıdaki durumlarda durum değişikliği sinyali verir sayfada daha önce giriş odağı yoktu. Önceki olası eyaletler: pasif Olası mevcut durumlar: etkin
blur	Bir DOM öğesine odaklanılmış. Not: blur etkinliği mutlaka bir durum değişikliğine işaret eder. Yalnızca aşağıdaki durumlarda durum değişikliği sinyali verir sayfada artık bir giriş odağı yoktur (yani sayfada bir öğeden diğerine geçer). Önceki olası eyaletler: etkin Olası mevcut durumlar: pasif
visibilitychange	Belgenin visibilityState değeri değişti. Bu Kullanıcı yeni bir sayfaya gittiğinde, sekmeler arasında geçiş yaptığında, bir sekmeyi kapattığında tarayıcıyı simge durumuna küçültür veya kapatır ya da mobil çalışmada uygulamalar arasında geçiş yapar sistemlerdir. Önceki olası eyaletler: pasif gizli Olası mevcut durumlar: pasif gizli
freeze *	Sayfa az önce donduruldu. Herhangi biri sayfanın görev sıralarındaki dondurulabilir görev başlatılmaz. Önceki olası eyaletler: gizli Olası mevcut durumlar: dondu
resume *	Tarayıcı, dondurulmuş bir sayfayı devam ettirdi. Önceki olası eyaletler: dondu Olası mevcut durumlar: etkin (ardından pageshow etkinliği) pasif (ardından pageshow etkinlik) gizli
pageshow	Bir oturum geçmişi girişine geçiliyor. Bu, yeni bir sayfa yüklenmiş veya geri-ileri önbellek. Sayfa alınan geri-ileri önbellek üzerinden, etkinliğin persisted özelliği true değeridir, aksi takdirde false. Önceki olası eyaletler: dondu (resume etkinlik de tetiklenir) Olası mevcut durumlar: etkin pasif gizli
pagehide	Bir oturum geçmişi girişi çekiliyor. Kullanıcı başka bir sayfaya gidiyorsa ve tarayıcı, sayfayı geri/ileriye önbellek daha sonra yeniden kullanılacaksa, etkinliğin persisted mülkü true. true olduğunda, sayfa donduruldu, aksi takdirde sonlandırıldı durumuna geçmektedir. Önceki olası eyaletler: gizli Olası mevcut durumlar: dondu (event.persisted doğru, freeze etkinliği takip eder) feshedildi (event.persisted yanlış, unload etkinlik takip ediliyor)
beforeunload	Pencere, doküman ve kaynakları kaldırılmak üzere. Doküman hâlâ görünür durumda ve etkinlik buradan iptal edilebilir puan. Önemli: beforeunload etkinliği kullanıcıyı yalnızca kaydedilmemiş değişiklikler konusunda uyarmak için kullanılmalıdır. Bu etkinlik kaydedildiğinde kaldırılması gerekir. Değerin hiçbir zaman hiçbir koşulsuz olarak ekleyebilirsiniz. Çünkü bunu yapmak, bazı durumlarda kullanabilirsiniz. Eski API'ler bölümüne bakın. Önceki olası eyaletler: gizli Olası mevcut durumlar: feshedildi
unload	Sayfa kaldırılıyor. Uyarı: unload etkinliğinin kullanılması hiçbir zaman önerilmez çünkü güvenilir değildir ve bazı durumlarda performansı düşürebilir. Bkz. eski API'ler bölümünü inceleyebilirsiniz. Önceki olası eyaletler: gizli Olası mevcut durumlar: feshedildi

* Page Lifecycle API tarafından tanımlanan yeni bir etkinliği gösterir

Chrome 68'e eklenen yeni özellikler

Önceki grafikte, kullanıcı tarafından başlatılan: donduruldu ve silindi. Daha önce de belirtildiği gibi, günümüzde tarayıcılar zaman zaman donup siliniyor (kendi takdirine bağlı olarak) gizli sekmelerin ne zaman gösterme zamanı.

Chrome 68'de geliştiriciler artık gizli bir sekmenin ne zaman donduğunu freeze dinleyerek dondurulma işlemi çözüldü ve document tarihinde resume etkinlik.

document.addEventListener('freeze', (event) => {
  // The page is now frozen.
});

document.addEventListener('resume', (event) => {
  // The page has been unfrozen.
});

Chrome 68'den itibaren document nesnesi artık bir wasDiscarded mülkü (Android desteği bu sorunla ilgili olarak izleniyor). Bir sayfanın gizli durumdayken silinip silinmediğini belirlemek için sekmesinden, sayfa yükleme sırasında bu özelliğin değerini inceleyebilirsiniz (not: Silinen sayfaların tekrar kullanılması için yeniden yüklenmesi gerekir).

if (document.wasDiscarded) {
  // Page was previously discarded by the browser while in a hidden tab.
}

freeze ve resume içinde yapılması gerekenlerle ilgili tavsiye için Ayrıca, silinen sayfaların nasıl ele alınıp buna hazırlanılması gerektiği, her eyalet için geliştirici önerilerini inceleyin.

Sonraki bölümlerde, bu yeni özelliklerin şu anki işleyiş şekline genel bir bakış sunulur: mevcut web platformu durumlarını ve etkinliklerini kontrol edin.

Kodda Sayfa Yaşam Döngüsü durumlarını gözlemleme

Etkin, pasif ve gizli durumlarda durumlarda, geçerli tüm bilgileri belirten JavaScript kodu Mevcut web platformu API'lerindeki sayfa yaşam döngüsü durumu.

const getState = () => {
  if (document.visibilityState === 'hidden') {
    return 'hidden';
  }
  if (document.hasFocus()) {
    return 'active';
  }
  return 'passive';
};

Donduruldu ve sonlandırıldı durumları, Ancak yalnızca ilgili etkinlik işleyicide algılanabilir. (freeze ve pagehide) bir değişim söz konusu.

Durum değişikliklerini gözlemleme

Daha önce tanımlanan getState() fonksiyonunu temel alarak, Yaşam döngüsü durumu aşağıdaki kodla değişir.

// Stores the initial state using the `getState()` function (defined above).
let state = getState();

// Accepts a next state and, if there's been a state change, logs the
// change to the console. It also updates the `state` value defined above.
const logStateChange = (nextState) => {
  const prevState = state;
  if (nextState !== prevState) {
    console.log(`State change: ${prevState} >>> ${nextState}`);
    state = nextState;
  }
};

// Options used for all event listeners.
const opts = {capture: true};

// These lifecycle events can all use the same listener to observe state
// changes (they call the `getState()` function to determine the next state).
['pageshow', 'focus', 'blur', 'visibilitychange', 'resume'].forEach((type) => {
  window.addEventListener(type, () => logStateChange(getState(), opts));
});

// The next two listeners, on the other hand, can determine the next
// state from the event itself.
window.addEventListener('freeze', () => {
  // In the freeze event, the next state is always frozen.
  logStateChange('frozen');
}, opts);

window.addEventListener('pagehide', (event) => {
  // If the event's persisted property is `true` the page is about
  // to enter the back/forward cache, which is also in the frozen state.
  // If the event's persisted property is not `true` the page is
  // about to be unloaded.
  logStateChange(event.persisted ? 'frozen' : 'terminated');
}, opts);

Bu kodun üç işlevi vardır:

• getState() işlevini kullanarak başlangıç durumunu ayarlar.
• Sonraki durumu kabul eden bir fonksiyon tanımlar ve bir değişiklik varsa, durum değişikliklerini konsola kaydeder.
• Eklemeler yakalama tüm gerekli yaşam döngüsü olayları için etkinlik işleyicileri logStateChange(), sonraki eyalette geçiyor.

Kodla ilgili dikkat edilmesi gereken nokta, tüm etkinlik işleyicilerin window adlı katılımcıya gönderilen tüm testler {capture: true} Bu durumun birkaç nedeni vardır:

• Tüm sayfa yaşam döngüsü etkinlikleri aynı hedefe sahip değildir. pagehide ve pageshow, window tarihinde tetikleniyor; visibilitychange, freeze ve resume, document tarihinde, focus ve blur, ilgili DOM öğelerini kullanın.
• Bu etkinliklerin çoğu baloncuk olarak görünmez. Bu nedenle, yakalamayan etkinlik işleyicileri ortak bir üst öğe öğesine uygular ve sağlayabilir.
• Yakalama aşaması, hedef ya da balon aşamasından önce devam eder. Dolayısıyla, işleyiciler, diğer kod tarafından iptal edilmeden önce çalıştırılmalarına yardımcı olur.

Her eyalet için geliştirici önerileri

Geliştiriciler olarak hem Sayfa Yaşam Döngüsü durumlarını anlamak hem de bunları kodda nasıl gözlemleyeceğinizi de bilirsiniz çünkü yapmanız (ve nasıl engelleneceğini büyük ölçüde sayfanızın hangi durumda olduğuna bağlıdır.

Örneğin, geçici bir bildirim görüntülemek kesinlikle mantıklı değildir. sayfa gizli durumdaysa yine kullanıcıya gösterir. Bu örnek oldukça Ancak, değinmeye değecek kadar bariz olmayan başka öneriler de vardır. sıralanıyor.

Eyalet	Geliştirici önerileri
Active	Etkin durum, kullanıcı için en kritik zamandır ve bu nedenle sayfanız için en önemli zamanları duyarlılığını göster. Ana iş parçacığını engelleyebilecek, kullanıcı arayüzü harici tüm çalışmalara öncelik verilmelidir alıcı: boşta kalma süreleri veya nasıl aktarılacağına ilişkin bir örnektir.
Passive	Pasif durumda ise kullanıcı, sayfayla etkileşim kurmuyordur. ancak yine de görebilirler. Bu, kullanıcı arayüzü güncellemelerinin ve animasyonlarının sorun yaşanmamalıdır, ancak bu güncellemelerin ne zaman gerçekleşeceği daha az kritik öneme sahiptir. Etkin olan sayfa pasif duruma getirildiğinde kaydedilmemiş uygulama durumunu korumak için iyi bir zamandır.
Hidden	Pasif olan sayfa gizli olarak değiştiğinde, Sayfa yeniden yüklenene kadar kullanıcının reklamla tekrar etkileşime geçmemesi olasılığıdır. Gizli durumuna geçiş de genellikle son durum değişikliğidir güvenilir bir şekilde gözlemlenebilir (bu, özellikle mobil cihazlarda (ör. kullanıcılar sekmeleri veya tarayıcı uygulamasını) kapatabilir ve beforeunload, pagehide ve unload etkinlikleri tetiklenmez). Bu, gizli durumunu kullanıcı oturumu. Başka bir deyişle, kaydedilmemiş uygulama durumlarını koruyun ve gönderilmemiş analiz verilerini gönderebilirsiniz. Görülmeyeceği için kullanıcı arayüzü güncellemeleri yapmayı da tarafından yürütülür) ve kullanıcının istemediği görevleri durdurmanız gerekir. arka planda çalışıyor.
Frozen	Dondurulmuş durumda, görevlerin görev sıraları, sayfa dondurulana kadar askıya alınır. Bu işlem, hiçbir zaman olmaz (ör. sayfa silinirse). Bu, sayfanın gizli durumundan donduruldu durumuna geçtiği anlamına gelir. zamanlayıcıları durdurmanız veya veya dondurulması durumunda aynı kaynaktaki diğer açık sekmeleri veya tarayıcının sayfayı geri-ileri önbellek için de geçerlidir. Özellikle: Tümünü kapat IndexedDB bağlantıları. Kapat açık BroadcastChannel bağlantıları. Etkin uygulamasını kapat WebRTC bağlantıları için geçerlidir. Ağ yoklamalarını durdurun veya açık olanları kapatın Web Socket bağlantıları. Beklemedeki tüm öğeleri serbest bırakın Web Kilitleri'ne dokunun. Ayrıca tüm dinamik görünüm durumlarını (ör.kaydırma konumu) korumanız gerekir. sonsuz liste görünümünde) sessionStorage (veya Dizin üzerinden alınan veritabanı commit()) geri yüklemeyi isteyebilirsiniz. silindi ve daha sonra yeniden yüklendi. Sayfa dondu durumundan tekrar gizli durumuna geçerse kapalı bağlantıları yeniden açabilir veya istediğiniz yoklamayı yeniden başlatabilirsiniz Sayfa ilk donduğunda durdu.
Terminated	Sayfa geçişlerinde genellikle herhangi bir işlem yapmanız gerekmez sonlandırılmış duruma getirilir. Kullanıcı işleminin sonucu olarak kaldırılan sayfalar her zaman sonlandırılmış ifadesi girmeden önce gizli durumunu kontrol edin hidden durumu ise oturum sonlandırma mantığının (ör. uygulama durumu ve Analytics'e raporlama) arasındaki fark, gerçekleştirildi. Ayrıca (bununla ilgili önerilerde gizli duruma geçtiğinizde, geliştiricilerin bunu fark etmesi çok önemlidir. sonlandırılmış duruma geçişin güvenli bir şekilde mümkün mobil cihazlarda yaygın olarak kullanılan bir teknoloji. Bu nedenle, kapatma etkinliklerinde (ör. beforeunload, pagehide ve unload) büyük olasılıkla veri kaybediyor.
Discarded	Silindi durumu, geliştiriciler tarafından zamanına dikkat edin. Çünkü sayfalar genellikle sırasında, kaynak kısıtlamaları altında silinir ve bir sayfanın dondurulmasının yalnızca izin komut dosyasının bir silme etkinliğine yanıt olarak çalıştırılması mümkün değildir. gerekir. Sonuç olarak, e-postalarınızın kalıcı olarak silinme ihtimaline karşı gizli olan değişikliği donduruldu durumuna getirdikten sonra, sayfa yüklenme zamanında silinmiş bir sayfanın geri yüklenmesi için document.wasDiscarded kontrol ediliyor.

Yaşam döngüsü olaylarının güvenilirliği ve sıralaması, tüm tarayıcılarda tutarlı bir şekilde uygulanır. Önerileri izlemenin en kolay yolu, tablodaki PageLifecycle.js'yi tıklayın.

Kaçınılması gereken eski yaşam döngüsü API'leri

Aşağıdaki olaylardan mümkün olduğunca kaçınılmalıdır.

Kaldırma etkinliği

Birçok geliştirici, unload etkinliğini garantili bir geri çağırma olarak değerlendirir ve durumu kaydetmek ve analiz verilerini göndermek için bir oturum sonu sinyali, ancak bunu yaparken özellikle mobil cihazlarda son derece güvenilmez. unload etkinliği şunları yapmaz: Sekmedeki bir sekmeyi kapatmak da dahil olmak üzere pek çok tipik kaldırma durumunda etkinleşebilir. mobil cihazda değiştiriciyi kullanarak tarayıcı uygulamasını kapatın.

Bu nedenle her zaman için Oturumun ne zaman olduğunu belirlemek için visibilitychange etkinliği ve bu gizli durumun uygulama ve kullanıcı verilerinden tasarruf etmek için en son güvenilir zaman.

Ayrıca, yalnızca kayıtlı bir unload etkinlik işleyicisi ( onunload veya addEventListener()) olması, tarayıcıların kullanarak sayfaları daha hızlı yapmak için geri-ileri önbelleğe yükleme sayısını artırır.

Tüm modern tarayıcılarda her zaman Olası sayfa kaldırma işlemlerini algılamak için pagehide etkinliği (diğer adıyla unload durumu yerine sonlandırıldı durumu). Şu durumda: Internet Explorer 10 ve daha eski sürümlerini desteklemeniz gerekiyorsa pagehide etkinliğini algıla ve yalnızca tarayıcı şunları desteklemiyorsa unload seçeneğini kullan pagehide:

const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';

window.addEventListener(terminationEvent, (event) => {
  // Note: if the browser is able to cache the page, `event.persisted`
  // is `true`, and the state is frozen rather than terminated.
});

beforeunload etkinliği

beforeunload etkinliğinde unload etkinliğiyle benzer bir sorun var. Önceden bir beforeunload etkinliğinin varlığı, sayfaların geri-ileri önbelleğe uygun olması gerekir. Modern tarayıcılar bu kısıtlamayı uygulayabilirsiniz. Ancak, önlem olarak bazı tarayıcılar etkinleşmez bir sayfayı geri-ileri bölümüne yerleştirmeye çalışırken beforeunload etkinliği Bu da etkinliğin oturum sonu sinyali olarak güvenilir olmadığı anlamına gelir. Ayrıca bazı tarayıcılar (Chrome dahil) beforeunload etkinliğine izin vermeden önce sayfada kullanıcı etkileşimi gerektirir. güvenilirliğini daha fazla etkileyecektir.

beforeunload ile unload arasındaki farklardan biri beforeunload meşru kullanımları. Örneğin, kullanıcıyı uyarmak istediğinizde kaydedilmemiş değişiklikleri olduğundan, sayfayı kaldırmaya devam etmeleri durumunda silinecekleri.

beforeunload kullanmak için geçerli nedenler bulunduğundan, beforeunload işleyicileri yalnızca bir kullanıcının kaydedilmemiş değişiklikleri olduğunda ekler ve ardından kaydedildikten hemen sonra kaldırmamız gerekir.

Diğer bir deyişle, bir beforeunload işleyici eklediği için bunu yapmayın koşulsuz olarak):

addEventListener('beforeunload', (event) => {
  // A function that returns `true` if the page has unsaved changes.
  if (pageHasUnsavedChanges()) {
    event.preventDefault();

    // Legacy support for older browsers.
    return (event.returnValue = true);
  }
});

Bunun yerine bunu yap (beforeunload işleyiciyi yalnızca gerekir ve gerekli olmadığı durumlarda kaldırılır):

const beforeUnloadListener = (event) => {
  event.preventDefault();
  
  // Legacy support for older browsers.
  return (event.returnValue = true);
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  removeEventListener('beforeunload', beforeUnloadListener);
});

SSS

Neden bir "yükleme" durumu nedir?

Page Lifecycle API, durumları tek ve karşılıklı olarak dışlayıcı olacak şekilde tanımlar. Bir sayfa etkin, pasif veya gizli durumda yüklenebildiği için ve durum değişebileceği (ve hatta sonlandırılabilir) için, yükleme tamamlanmadan önce ayrı bir yükleme durumu bu paradigmada mantıklı değildir.

Sayfam gizlenmişken önemli çalışıyor. Dondurulmasını veya silinmesini nasıl engelleyebilirim?

Çalışırken web sayfalarının dondurılmamasının birçok geçerli nedeni vardır. gizli durumda olmalıdır. Bunun en bariz örneği müzik çalan bir uygulamadır.

Chrome'un bir sayfayı silmesinin riskli olabileceği durumlar da vardır. Örneğin, gönderilmemiş kullanıcı girişi içeren bir form veya Sayfa yüklemesi kaldırılırken uyarı veren beforeunload işleyicisi.

Şu an için Chrome, sayfaları silerken ve yorumlarken Bunu yalnızca kullanıcıları etkilemeyeceğinden emin olduğunda yapmalısınız. Örneğin, gizli moddayken aşağıdakilerden herhangi birini yaptığı gözlemlendiğinde, aşağıdaki durumlar söz konusu değilse silinmelidir:

• Ses çalınıyor
• WebRTC'yi kullanma
• Tablo başlığını veya site simgesini güncelleme
• Uyarılar gösteriliyor
• Push bildirimleri gönderme

Bir sekmenin güvenli olup olmadığını belirlemek için kullanılan geçerli liste özellikleri (bkz.: Donma için bulgular ve donma için bulgular Siliniyor seçeneğini tıklayın.

Geri-ileri önbellek nedir?

Geri-ileri önbellek, bir problemi gezinme optimizasyonu bazı tarayıcılar tarafından uygulanır. daha hızlı ilerlemenizi sağlar.

Kullanıcı bir sayfadan ayrıldığında, bu tarayıcılar o sayfanın bir sürümünü Böylece, kullanıcının geri ya da ileri düğmelerine basın. unload eklemenin etkinlik işleyici bu optimizasyonun mümkün olmasını engeller.

Tüm amaçlar ve amaçlar için, bu donma işlevsel olarak dondurucu tarayıcılar CPU/pil tasarrufu sağlar; Bu nedenle dondurulmuş yaşam döngüsü durumunun bir parçası olarak kabul edilir.

Dondurulmuş veya sonlandırılmış durumlarda eşzamansız API'leri çalıştıramazsam verileri IndexedDB'ye nasıl kaydedebilirim?

Dondurulmuş ve sonlandırılmış durumlarda Dondurulabilir görevler bir sayfanın görev sıralarında askıya alınır. Bu nedenle, IndexedDB gibi eşzamansız ve geri çağırmaya dayalı API'ler güvenli şekilde kullanılamaz.

İleride, IDBTransaction nesneye bir commit() yöntemi ekleyeceğiz. Bu yöntem, geliştiricilere, yalnızca yazılabilir işlemleri etkili şekilde gerçekleştirmeleri için bir yöntem sunar. bu yöntemin kullanılmasıdır. Diğer bir deyişle, geliştirici yalnızca ve verileri IndexedDB'ye aktarıyor ve okumalardan oluşan karmaşık bir işlem gerçekleştirmiyor. ve yazarsa commit() yöntemi, görev sıraları tamamlanmadan önce tamamlanabilir askıya alınır (IndexedDB veritabanının zaten açık olduğu varsayılır).

Ancak şu anda çalışması gereken kod için geliştiricilerin iki seçeneği vardır:

• Oturum Depolama Alanını Kullanın: Oturum Depolama Alanı eşzamanlıdır ve sayfa silme işlemlerinde kalıcıdır.
• Hizmet çalışanınızdaki IndexedDB'yi kullanma: Bir hizmet çalışanı verileri şurada depolayabilir: Sayfa sonlandırıldıktan veya silindikten sonra IndexedDB. freeze veya Service Worker'ınıza veri gönderebileceğiniz pagehide etkinlik işleyici postMessage(), verileri kaydetme işini Service Worker'lar da yapabilir.

Uygulamanızı donmuş ve atılmış durumda test etme

Uygulamanızın donmuş ve atılmış durumlarda nasıl davrandığını test etmek için şu adresi ziyaret edebilirsiniz: chrome://discards bu önerileri dondurmak veya silmek için açık sekmelerde.

Bu, sayfanızın freeze ve resume öğelerini doğru bir şekilde işleyeceğinden emin olmanızı sağlar etkinliklerin yanı sıra sayfalar daha sonra yeniden yüklendiğinde document.wasDiscarded işareti silin.

Özet

Kullanıcı cihazlarının sistem kaynaklarına saygı duymak isteyen geliştiriciler Sayfa Yaşam Döngüsü durumlarını göz önünde bulundurarak geliştirmelidir. Projeyi ilerletmek için bazı durumlarda, web sayfalarının aşırı miktarda sistem beklemediği bir durum

Yeni Page Lifecycle API'lerini ne kadar fazla geliştirici uygulamaya başlarsa o kadar güvenli olur kullanılmayan sayfaları dondurarak silmeye çalışır. Bu tarayıcılar daha az bellek, CPU, pil ve ağ kaynağı tüketir. Bu da kullanıcılar için bir avantajdır.