Tarayıcı Desteği
-
.
-
.
-
.
-
.
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 |
Bir sayfa görünüyorsa ve görünüyorsa pasif durumdadır. giriş odağı yok.
Önceki olası eyaletler:
Sonraki olası durumlar: |
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:
Sonraki olası durumlar: |
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
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:
Sonraki olası durumlar: |
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:
Sonraki olası durumlar: |
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:
Sonraki olası durumlar: |
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:
Önceki olası eyaletler:
Olası mevcut durumlar: |
blur
|
Bir DOM öğesine odaklanılmış.
Not:
Önceki olası eyaletler:
Olası mevcut durumlar: |
visibilitychange
|
Belgenin
|
freeze
*
|
Sayfa az önce donduruldu. Herhangi biri sayfanın görev sıralarındaki dondurulabilir görev başlatılmaz.
Önceki olası eyaletler:
Olası mevcut durumlar: |
resume
*
|
Tarayıcı, dondurulmuş bir sayfayı devam ettirdi.
Önceki olası eyaletler:
Olası mevcut durumlar: |
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
Önceki olası eyaletler: |
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
Önceki olası eyaletler:
Olası mevcut durumlar: |
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:
Önceki olası eyaletler:
Olası mevcut durumlar: |
unload
|
Sayfa kaldırılıyor.
Uyarı:
Önceki olası eyaletler:
Olası mevcut durumlar: |
* 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
vepageshow
,window
tarihinde tetikleniyor;visibilitychange
,freeze
veresume
document
tarihinde ateşlendi,focus
veblur
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ü dışı 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. |
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
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:
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)
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. |
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
|
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 yaparsı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, 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ğinizpagehide
etkinlik işleyicipostMessage()
, 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.
![Chrome Silinen Kullanıcı Arayüzü](https://developer.chrome.google.cn/static/docs/web-platform/page-lifecycle-api/image/chrome-discards-ui-4c0620d6f8619.png?authuser=8&hl=tr)
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.