Memperkenalkan NoState Prefetch

Katie Hempenius
Katie Hempenius

Pengantar

NoState Prefetch adalah mekanisme baru di Chrome yang merupakan alternatif dari proses pra-rendering yang tidak digunakan lagi, yang digunakan untuk mendukung fitur seperti <link rel="prerender">. Seperti pra-rendering, metode ini mengambil resource terlebih dahulu. Namun, tidak seperti pra-rendering, metode ini tidak mengeksekusi JavaScript atau merender bagian apa pun halaman terlebih dahulu. Tujuan NoState Prefetch adalah untuk menggunakan lebih sedikit memori daripada pra-rendering, sambil tetap mengurangi waktu pemuatan halaman.

NoState Prefetch bukan API, melainkan mekanisme yang digunakan oleh Chrome untuk menerapkan berbagai API dan fitur. Resource Hints API, serta pengambilan data halaman oleh kolom URL Chrome, keduanya diterapkan menggunakan NoState Prefetch. Jika Anda menggunakan Chrome 63 atau yang lebih baru, browser sudah menggunakan NoState Prefetch untuk fitur seperti <link rel="prerender">.

Artikel ini menjelaskan cara kerja NoStatePrefetch, motivasi untuk memperkenalkannya, dan petunjuk untuk menggunakan histogram Chrome untuk melihat statistik penggunaannya.

Motivasi

Ada dua motivasi utama untuk memperkenalkan NoState Prefetch:

Mengurangi penggunaan memori

NoState Prefetch hanya menggunakan memori ~45 MiB. Mempertahankan pemindai pramuat adalah biaya memori utama untuk NoState Prefetch dan biaya ini relatif konstan di berbagai kasus penggunaan. Peningkatan ukuran atau volume pengambilan tidak berdampak signifikan terhadap jumlah memori yang digunakan oleh NoState Prefetch.

Sebaliknya, pra-rendering biasanya menggunakan memori 100 MiB dan konsumsi memori dibatasi pada 150 MiB. Konsumsi memori yang tinggi ini membuatnya tidak cocok untuk perangkat kelas bawah (yaitu <= 512 MB RAM). Akibatnya, Chrome tidak melakukan pra-rendering di perangkat kelas bawah dan akan melakukan preconnect.

Memfasilitasi dukungan fitur platform web baru

Dengan pra-rendering, tidak ada tindakan yang ditampilkan kepada pengguna (misalnya memutar musik atau video) atau tindakan stateful (misalnya, memutasikan sesi atau penyimpanan lokal) yang harus terjadi. Namun, mencegah tindakan ini terjadi saat merender halaman bisa sulit dan rumit. NoState Prefetch hanya mengambil resource terlebih dahulu: ini tidak mengeksekusi kode atau merender halaman. Hal ini membuatnya lebih sederhana untuk mencegah terjadinya tindakan yang dilihat pengguna dan stateful.

Penerapan

Langkah-langkah berikut menjelaskan cara kerja NoState Prefetch.

  1. NoStatePrefetch dipicu.

    Petunjuk resource pra-rendering (yaitu <link rel="prerender">) dan beberapa fitur Chrome akan memicu Pengambilan Data NoState asalkan dua kondisi berikut terpenuhi: a) pengguna tidak menggunakan perangkat kelas bawah, dan b) pengguna tidak menggunakan jaringan seluler.

  2. Perender khusus yang baru dibuat untuk NoState Prefetch.

    Di Chrome, “renderer” adalah proses yang bertanggung jawab untuk mengambil dokumen HTML, menguraikannya, menyusun pohon render, dan menampilkan hasilnya ke layar. Setiap tab di Chrome, serta setiap proses NoState Prefetch, memiliki perendernya sendiri untuk menyediakan isolasi. Hal ini membantu meminimalkan dampak masalah (misalnya, tab error) serta mencegah kode berbahaya mengakses tab lain atau bagian lain dari sistem.

  3. Resource yang dimuat dengan NoState Prefetch akan diambil. Kemudian HTMLPreloadScanner akan memindai resource ini untuk menemukan subresource yang perlu diambil. Jika resource utama atau salah satu subresource-nya memiliki pekerja layanan terdaftar, permintaan ini akan melalui pekerja layanan yang sesuai.

    NoState Prefetch hanya mendukung metode HTTP GET; metode ini tidak akan mengambil subresource apa pun yang memerlukan penggunaan metode HTTP lain. Selain itu, alat ini tidak akan mengambil resource apa pun yang memerlukan tindakan pengguna (misalnya, pop-up autentikasi, sertifikat klien SSL, atau penggantian manual).

  4. Subresource yang diambil akan diambil dengan Prioritas Bersih “IDLE”.

    Prioritas Bersih “IDLE” adalah Prioritas Bersih terendah di Chrome.

  5. Semua resource yang diambil oleh NoState Prefetch akan di-cache sesuai dengan header cache-nya.

    NoState Prefetch akan menyimpan semua resource di cache kecuali yang memiliki header Cache-Control no-store. Resource akan divalidasi ulang sebelum digunakan jika ada header respons Vary, header Cache-Control no-cache, atau jika resource sudah lebih dari 5 menit.

  6. Perender akan dihentikan setelah semua subresource dimuat.

    Jika waktu tunggu subresource habis, perender akan dihentikan setelah 30 detik.

  7. Browser tidak melakukan perubahan status apa pun selain mengupdate penyimpanan cookie dan cache DNS lokal. Penting untuk menyebutkan hal ini karena ini adalah "NoState" dalam "NoState Prefetch".

    Pada tahap ini dalam proses pemuatan halaman “normal”, browser mungkin akan melakukan hal-hal yang akan mengubah status browser: misalnya, mengeksekusi JavaScript, mengubah sessionStorage atau localStorage, memutar musik atau video, menggunakan History API, atau meminta pengguna. Satu-satunya perubahan status yang terjadi di NoState Prefetch adalah update cache DNS saat respons tiba dan pembaruan penyimpanan cookie jika respons berisi header Set-Cookie.

  8. Resource yang diperlukan akan dimuat ke jendela browser.

    Namun, tidak seperti halaman yang dipra-render, halaman tidak akan langsung terlihat - halaman masih harus dirender oleh browser. Browser tidak akan menggunakan kembali perender yang digunakan untuk Prefetch NoState dan akan menggunakan perender baru. Tidak merender halaman terlebih dahulu akan mengurangi konsumsi memori NoStatePrefetch, tetapi juga mengurangi kemungkinan dampaknya terhadap waktu muat halaman.

    Jika halaman memiliki pekerja layanan, pemuatan halaman ini akan melalui pekerja layanan lagi.

    Jika NoState Prefetch belum selesai mengambil sub-sumber daya pada saat halaman diperlukan, browser akan melanjutkan proses pemuatan halaman dari tempat terakhir memuat NoState Prefetch. Browser masih perlu mengambil sumber daya, tetapi tidak sebanyak yang diperlukan jika Prefetch NoState belum dimulai.

Dampak pada Analisis Web

Halaman yang dimuat menggunakan NoState Prefetch didaftarkan oleh alat analisis web pada waktu yang sedikit berbeda bergantung pada apakah alat tersebut mengumpulkan data di sisi klien atau sisi server.

Skrip analisis sisi klien mendaftarkan kunjungan halaman saat halaman ditampilkan kepada pengguna. Skrip ini bergantung pada eksekusi JavaScript, dan Prefetch NoState tidak akan mengeksekusi JavaScript apa pun.

Alat analisis sisi server mendaftarkan metrik saat permintaan ditangani. Untuk resource yang dimuat melalui NoState Prefetch, mungkin akan ada jeda waktu yang signifikan antara saat permintaan ditangani dan saat respons benar-benar digunakan oleh klien (jika digunakan). Sejak Chrome 69, NoState Prefetch menambahkan header Purpose: Prefetch ke semua permintaan agar dapat dibedakan dari penjelajahan normal.

Lihat

NoStatePrefetch dikirim pada Desember 2017 di Chrome 63. Saat ini digunakan untuk:

  • Mengimplementasikan petunjuk resource prerender
  • Ambil hasil pertama di hasil Google Penelusuran
  • Mengambil halaman yang diprediksi kolom URL Chrome kemungkinan akan dikunjungi berikutnya

Anda dapat menggunakan Internal Chrome untuk melihat penggunaan NoStatePrefetch selama ini.

Untuk melihat daftar situs yang telah dimuat dengan NoState Prefetch, buka chrome://net-internals/#prerender.

Untuk melihat statistik penggunaan Prefetch NoState, buka chrome://histograms dan telusuri “NoStatePrefetch”. Ada tiga histogram NoState Prefetch yang berbeda - satu untuk setiap kasus penggunaan Prefetch NoState:

  • “NoStatePrefetch” (statistik untuk penggunaan oleh petunjuk resource pra-render)
  • “gws_NoStatePrefetch” (statistik untuk penggunaan oleh halaman hasil penelusuran Google)
  • “omnibox_NoStatePrefetch” (statistik untuk penggunaan oleh kolom URL Chrome)