Memperkenalkan NoState Prefetch

Katie Hempenius
Katie Hempenius
X

Dipublikasikan: 20 Juli 2018

Pengantar

Pengambilan Data Awal Tanpa Status 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, fitur ini mengambil resource terlebih dahulu; tetapi tidak seperti pra-rendering, fitur ini tidak mengeksekusi JavaScript atau merender bagian mana pun dari halaman terlebih dahulu. Tujuan pengambilan data NoState Prefetch adalah menggunakan lebih sedikit memori daripada pra-render, sekaligus mengurangi waktu pemuatan halaman.

Pengambilan Data Awal Tanpa Status 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 diimplementasikan menggunakan NoState Prefetch. Jika Anda menggunakan Chrome 63 atau yang lebih baru, browser Anda sudah menggunakan Prefetch Tanpa Status untuk fitur seperti <link rel="prerender">.

Artikel ini menjelaskan cara kerja NoStatePrefetch, alasan diperkenalkannya, dan petunjuk penggunaan histogram Chrome untuk melihat statistik tentang penggunaannya.

Motivasi

Ada dua motivasi utama untuk memperkenalkan Prefetch Tanpa Status:

Mengurangi penggunaan memori

Pengambilan Data Awal NoState hanya menggunakan memori sekitar 45 MiB. Mempertahankan pemindai pra-muat adalah penggunaan memori utama untuk Pengambilan Data Awal Tanpa Status dan biaya ini tetap relatif konstan di berbagai kasus penggunaan. Meningkatkan ukuran atau volume pengambilan data tidak akan berpengaruh signifikan terhadap jumlah memori yang digunakan oleh Pengambilan Data Tanpa Status.

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

Memfasilitasi dukungan fitur platform web baru

Dengan pra-rendering, tidak ada tindakan yang terlihat pengguna (misalnya, memutar musik atau video) atau tindakan stateful (misalnya, mengubah sesi atau penyimpanan lokal) yang boleh terjadi. Namun, mencegah tindakan ini terjadi saat merender halaman bisa menjadi hal yang sulit dan rumit. Pengambilan Data NoState hanya mengambil data resource terlebih dahulu: tidak menjalankan kode atau merender halaman. Hal ini mempermudah pencegahan terjadinya tindakan yang terlihat oleh pengguna dan tindakan stateful.

Penerapan

Langkah-langkah berikut menjelaskan cara kerja NoState Prefetch.

  1. NoStatePrefetch dipicu.

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

  2. Perender khusus baru dibuat untuk pengambilan data NoState.

    Di Chrome, “renderer” adalah proses yang bertanggung jawab untuk mengambil dokumen HTML, menguraikannya, membuat pohon render, dan melukis hasilnya ke layar. Setiap tab di Chrome, serta setiap proses NoState Prefetch, memiliki perender sendiri untuk memberikan isolasi. Hal ini membantu meminimalkan efek jika terjadi kesalahan (misalnya, tab mengalami error) serta mencegah kode berbahaya mengakses tab lain atau bagian lain dari sistem.

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

    Pengambilan Data NoState hanya mendukung metode HTTP GET; metode ini tidak akan mengambil subresource yang memerlukan penggunaan metode HTTP lain. Selain itu, 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 Jaringan “IDLE”.

    Prioritas Jaringan “IDLE” adalah Prioritas Jaringan terendah yang mungkin ada di Chrome.

  5. Semua resource yang diambil oleh Pengambilan Data Tanpa Status di-cache sesuai dengan header cache-nya.

    Pengambilan Data NoState akan menyimpan semua resource ke dalam cache, kecuali resource dengan 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 berusia lebih dari 5 menit.

  6. Perender dihentikan setelah semua subresource dimuat.

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

  7. Browser tidak melakukan modifikasi status apa pun selain memperbarui penyimpanan cookie dan cache DNS lokal. Penting untuk menyebutkan hal ini karena ini adalah “NoState” dalam “Pengambilan Data Awal NoState”.

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

  8. Saat resource diperlukan, resource dimuat ke jendela browser.

    Namun, tidak seperti halaman pra-render, halaman tidak akan langsung terlihat - halaman masih perlu dirender oleh browser. Browser tidak akan menggunakan kembali perender yang digunakannya untuk Pengambilan Data Awal NoState dan akan menggunakan perender baru. Tidak merender halaman terlebih dahulu mengurangi penggunaan memori NoStatePrefetch, tetapi juga mengurangi kemungkinan dampak yang dapat ditimbulkannya pada waktu pemuatan halaman.

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

    Jika NoState Prefetch belum selesai mengambil subresource pada saat halaman diperlukan, browser akan melanjutkan proses pemuatan halaman dari tempat NoState Prefetch berhenti. Browser masih perlu mengambil resource, tetapi tidak sebanyak yang diperlukan jika NoState Prefetch tidak dimulai.

Dampak pada Analisis Web

Halaman yang dimuat menggunakan Pengambilan Data Awal Tanpa Status 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 mencatat tayangan halaman saat halaman ditampilkan kepada pengguna. Skrip ini mengandalkan eksekusi JavaScript dan pengambilan data NoState tidak menjalankan JavaScript apa pun.

Alat analisis sisi server mencatat metrik saat permintaan ditangani. Untuk resource yang dimuat melalui Pengambilan Data NoState, mungkin ada selisih 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 dikirimkan pada Desember 2017 di Chrome 63. Saat ini digunakan untuk:

  • Menerapkan petunjuk resource prerender
  • Mengambil hasil pertama di hasil Google Penelusuran
  • Mengambil halaman yang diprediksi oleh kolom URL Chrome kemungkinan akan dibuka berikutnya

Anda dapat menggunakan Chrome Internals untuk melihat cara Anda menggunakan NoStatePrefetch.

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

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

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