API Siklus Proses Halaman

Philip Walton

Browser Support

  • Chrome: 68.
  • Edge: 79.
  • Firefox: not supported.
  • Safari: not supported.

Browser modern saat ini terkadang menangguhkan atau menghapus halaman sepenuhnya saat resource sistem terbatas. Pada masa mendatang, browser ingin melakukan hal ini secara proaktif, sehingga browser menggunakan lebih sedikit daya dan memori. Page Lifecycle API menyediakan hook siklus proses sehingga halaman Anda dapat menangani intervensi browser ini dengan aman tanpa memengaruhi pengalaman pengguna. Lihat API untuk mengetahui apakah Anda harus menerapkan fitur ini di aplikasi Anda.

Latar belakang

Siklus proses aplikasi adalah cara utama sistem operasi modern mengelola resource. Di Android, iOS, dan versi Windows terbaru, aplikasi dapat dimulai dan dihentikan kapan saja oleh OS. Dengan demikian, platform ini dapat menyederhanakan dan mengalokasikan ulang sumber daya di tempat yang paling menguntungkan pengguna.

Di web, secara historis tidak ada siklus proses seperti itu, dan aplikasi dapat terus berjalan tanpa batas waktu. Dengan banyaknya halaman web yang berjalan, resource sistem penting seperti memori, CPU, baterai, dan jaringan dapat kelebihan permintaan, sehingga menyebabkan pengalaman pengguna akhir yang buruk.

Meskipun platform web telah lama memiliki peristiwa yang terkait dengan status siklus proses — seperti load, unload, dan visibilitychange — peristiwa ini hanya memungkinkan developer merespons perubahan status siklus proses yang dimulai pengguna. Agar web dapat berfungsi dengan andal di perangkat berdaya rendah (dan secara umum lebih hemat resource di semua platform), browser memerlukan cara untuk secara proaktif merebut kembali dan mengalokasikan ulang resource sistem.

Faktanya, browser saat ini telah mengambil langkah-langkah aktif untuk menghemat resource untuk halaman di tab latar belakang, dan banyak browser (terutama Chrome) ingin melakukan lebih banyak hal ini — untuk mengurangi jejak resource secara keseluruhan.

Masalahnya adalah developer tidak memiliki cara untuk mempersiapkan jenis intervensi yang dimulai sistem ini atau bahkan mengetahui bahwa intervensi tersebut sedang terjadi. Artinya, browser harus berhati-hati atau berisiko merusak halaman web.

Page Lifecycle API berupaya menyelesaikan masalah ini dengan:

  • Memperkenalkan dan menstandardisasi konsep status siklus proses di web.
  • Menentukan status baru yang dimulai sistem yang memungkinkan browser membatasi resource yang dapat digunakan oleh tab tersembunyi atau tidak aktif.
  • Membuat API dan peristiwa baru yang memungkinkan developer web merespons transisi ke dan dari status baru yang dimulai sistem ini.

Solusi ini memberikan prediktabilitas yang dibutuhkan developer web untuk membangun aplikasi yang tangguh terhadap intervensi sistem, dan memungkinkan browser mengoptimalkan resource sistem secara lebih agresif, yang pada akhirnya akan menguntungkan semua pengguna web.

Bagian selanjutnya dari postingan ini akan memperkenalkan fitur Siklus Proses Halaman baru dan mempelajari hubungannya dengan semua status dan peristiwa platform web yang ada. Panduan ini juga akan memberikan rekomendasi dan praktik terbaik untuk jenis pekerjaan yang harus (dan tidak boleh) dilakukan developer di setiap tahap.

Ringkasan status dan peristiwa Siklus Proses Halaman

Semua status Siklus Proses Halaman bersifat terpisah dan tidak saling berhubungan, yang berarti halaman hanya dapat berada dalam satu status dalam satu waktu. Sebagian besar perubahan pada status siklus proses halaman umumnya dapat diamati melalui peristiwa DOM (lihat rekomendasi developer untuk setiap status untuk pengecualian).

Mungkin cara termudah untuk menjelaskan status Siklus Proses Halaman — serta peristiwa yang menandakan transisi di antaranya — adalah dengan diagram:

Representasi visual dari alur status dan peristiwa yang dijelaskan di seluruh dokumen ini.
Alur status dan peristiwa Page Lifecycle API.

Negara bagian

Tabel berikut menjelaskan setiap status secara mendetail. Dokumen ini juga mencantumkan kemungkinan status yang dapat terjadi sebelum dan sesudah, serta peristiwa yang dapat digunakan developer untuk mengamati perubahan.

Negara Bagian Deskripsi
Aktif

Halaman berada dalam status aktif jika terlihat dan memiliki fokus input.

Kemungkinan status sebelumnya:
pasif (melalui peristiwa focus)
dibekukan (melalui peristiwa resume, lalu peristiwa pageshow)

Kemungkinan status berikutnya:
pasif (melalui peristiwa blur)

Pasif

Halaman berada dalam status pasif jika terlihat dan tidak memiliki fokus input.

Kemungkinan status sebelumnya:
aktif (melalui peristiwa blur)
tersembunyi (melalui peristiwa visibilitychange)
dibekukan (melalui peristiwa resume, lalu peristiwa pageshow)

Kemungkinan status berikutnya:
aktif (melalui peristiwa focus)
tersembunyi (melalui peristiwa visibilitychange)

Tersembunyi

Halaman berada dalam status tersembunyi jika tidak terlihat (dan belum dibekukan, dihapus, atau dihentikan).

Kemungkinan status sebelumnya:
pasif (melalui peristiwa visibilitychange)
dibekukan (melalui peristiwa resume, lalu peristiwa pageshow)

Kemungkinan status berikutnya:
pasif (melalui peristiwa visibilitychange)
dibekukan (melalui peristiwa freeze)
dihapus (tidak ada peristiwa yang diaktifkan)
dihentikan (tidak ada peristiwa yang diaktifkan)

Periode frozen

Dalam status dibekukan, browser menangguhkan eksekusi tugas yang dapat dibekukan di antrean tugas halaman hingga halaman tidak dibekukan. Artinya, hal-hal seperti timer JavaScript dan callback pengambilan tidak berjalan. Tugas yang sudah berjalan dapat selesai (yang paling penting adalah callback freeze), tetapi tugas tersebut mungkin terbatas dalam hal yang dapat dilakukan dan durasi yang dapat dijalankan.

Browser membekukan halaman untuk menghemat penggunaan CPU/baterai/data; browser juga melakukannya untuk memungkinkan navigasi kembali/maju yang lebih cepat — sehingga tidak perlu memuat ulang halaman secara penuh.

Kemungkinan status sebelumnya:
tersembunyi (melalui peristiwa freeze)

Kemungkinan status berikutnya:
aktif (melalui peristiwa resume, lalu peristiwa pageshow)
pasif (melalui peristiwa resume, lalu peristiwa pageshow)
tersembunyi (melalui peristiwa resume)
dihapus (tidak ada peristiwa yang diaktifkan)
Dihentikan

Halaman berada dalam status dihentikan setelah mulai dibatalkan pemuatannya dan dihapus dari memori oleh browser. Tidak ada tugas baru yang dapat dimulai dalam status ini, dan tugas yang sedang berlangsung dapat dihentikan jika berjalan terlalu lama.

Kemungkinan status sebelumnya:
tersembunyi (melalui peristiwa pagehide)

Kemungkinan status berikutnya:
TIDAK ADA

Dibatalkan

Halaman berada dalam status dihapus saat dihapus muatannya oleh browser untuk menghemat resource. Tidak ada tugas, callback peristiwa, atau JavaScript apa pun yang dapat berjalan dalam status ini, karena penghapusan biasanya terjadi karena batasan resource, yang membuat proses baru tidak dapat dimulai.

Dalam status dihapus, tab itu sendiri (termasuk judul tab dan favicon) biasanya terlihat oleh pengguna meskipun halaman sudah tidak ada.

Kemungkinan status sebelumnya:
tersembunyi (tidak ada peristiwa yang diaktifkan)
dibekukan (tidak ada peristiwa yang diaktifkan)

Kemungkinan status berikutnya:
TIDAK ADA

Acara

Browser mengirimkan banyak peristiwa, tetapi hanya sebagian kecil yang menandakan kemungkinan perubahan status Siklus Proses Halaman. Tabel berikut menguraikan semua peristiwa yang terkait dengan siklus proses dan mencantumkan status yang dapat ditransisikan ke dan dari peristiwa tersebut.

Nama Detail
focus

Elemen DOM telah menerima fokus.

Catatan: peristiwa focus tidak selalu menandakan perubahan status. Perubahan status hanya ditandai jika halaman sebelumnya tidak memiliki fokus input.

Kemungkinan status sebelumnya:
pasif

Kemungkinan status saat ini:
aktif

blur

Elemen DOM telah kehilangan fokus.

Catatan: peristiwa blur tidak selalu menandakan perubahan status. Perubahan status hanya disinyalkan jika halaman tidak lagi memiliki fokus input (yaitu, halaman tidak hanya mengalihkan fokus dari satu elemen ke elemen lain).

Status sebelumnya yang mungkin:
aktif

Kemungkinan status saat ini:
pasif

visibilitychange

Nilai visibilityState dokumen telah berubah. Hal ini dapat terjadi saat pengguna membuka halaman baru, beralih tab, menutup tab, meminimalkan atau menutup browser, atau beralih aplikasi di sistem operasi seluler.

Kemungkinan status sebelumnya:
pasif
tersembunyi

Kemungkinan status saat ini:
pasif
tersembunyi

freeze *

Halaman baru saja dibekukan. Setiap tugas yang dapat dibekukan dalam antrean tugas halaman tidak akan dimulai.

Kemungkinan status sebelumnya:
tersembunyi

Kemungkinan status saat ini:
dibekukan

resume *

Browser telah melanjutkan halaman yang dibekukan.

Kemungkinan status sebelumnya:
frozen

Kemungkinan status saat ini:
active (jika diikuti oleh peristiwa pageshow)
passive (jika diikuti oleh peristiwa pageshow)
hidden

pageshow

Entri histori sesi sedang ditelusuri.

Hal ini dapat berupa pemuatan halaman yang benar-benar baru atau halaman yang diambil dari back/forward cache. Jika halaman diambil dari back/forward cache, properti persisted peristiwa adalah true, jika tidak, propertinya adalah false.

Kemungkinan status sebelumnya:
dibekukan (peristiwa resume juga akan diaktifkan)