Petunjuk dan konteks
Pertanyaan frontend ini menguji status interaksi daftar panjang, batasan jaringan, dan aksesibilitas. Tantangannya bukan sekadar menghubungkan observer ke sebuah sentinel; melainkan menentukan kontrak lengkap untuk pemuatan, pembatalan, kegagalan, percobaan ulang (retry), pemulihan posisi, dan navigasi alternatif.
Hal yang dievaluasi oleh pewawancara
- Apakah Anda dapat memicu pemuatan dengan Intersection Observer atau mekanisme yang setara serta menyesuaikan jarak prefetch.
- Apakah status kursor, deduplikasi permintaan, dan pengurutan dapat mencegah duplikasi halaman, halaman yang tidak berurutan, dan percobaan ulang tanpa akhir.
- Apakah pengguna keyboard, pembaca layar, pembesaran (zoom), dan jaringan lambat mendapatkan status yang terlihat dan dapat dioperasikan.
- Apakah Anda mengenali kapan infinite scroll memerlukan paginasi, jalur lewati-ke-konten (skip-to-content), atau pemulihan posisi.
Pertanyaan klarifikasi yang perlu diajukan
Konfirmasikan apakah daftar tersebut berupa linimasa, hasil pencarian, atau kisi (grid); apakah pengurutan stabil; apakah server dapat menerbitkan kursor; serta ukuran halaman dan target konten pertama. Tanyakan tentang tautan langsung (deep links), pemulihan navigasi kembali, tinggi konten yang berubah-ubah, dan kendala data seluler.
Kerangka jawaban 30 detik
Saya akan menggunakan paginasi kursor yang stabil dan sentinel pemuatan yang dapat dilepas. Muat hanya ketika tidak ada permintaan aktif, kursor lain tersedia, dan sentinel memasuki jendela prefetch; lakukan deduplikasi berdasarkan kursor dan id item sambil mempertahankan urutan. Status pemuatan, kegagalan, percobaan ulang, dan akhir daftar dapat difokuskan dan terlihat. Saya juga akan menawarkan jalur paginasi atau "Load more" yang jelas, lewati-ke-konten, dan pemulihan posisi sehingga scrolling bukan satu-satunya metode navigasi.
Pembahasan mendalam langkah demi langkah
1. Tentukan kontrak data dan posisi
Pilihlah kursor yang tidak bergeser oleh rekaman baru. Kembalikan kursor berikutnya dan id item yang stabil. Simpan kursor yang diketahui, id yang telah dilihat, dan status permintaan di sisi klien sehingga nomor halaman tidak menduplikasi atau melewatkan item setelah ada penyisipan data. Saat berpindah navigasi, catat rute, kursor, dan offset jangkar; pulihkan item yang terlihat saat data telah siap.
2. Rancang pemicuan dan kontrol konkurensi
Intersection Observer memancarkan sinyal "mendekati bagian bawah"; ini tidak mengizinkan pengambilan data tanpa batas. Sebelum memuat, periksa hasNext, loading, kuota percobaan ulang, dan status jaringan. Izinkan satu permintaan per kursor. Sesuaikan ambang batas prefetch menggunakan tinggi item dan latensi, serta sediakan tombol eksplisit untuk scrolling cepat agar callback observer yang berulang tidak menimbulkan lonjakan permintaan mendadak (burst).
3. Tangani respons, pembatalan, dan kegagalan
Validasi bahwa suatu respons sesuai dengan kursor yang diharapkan. Abaikan atau gabungkan respons yang terlambat ke dalam set yang sudah diketahui daripada menambahkannya secara membabi buta. Meninggalkan halaman dapat membatalkan permintaan aktif tanpa menghapus data yang telah dirender. Status kegagalan menjelaskan masalah yang terjadi, menampilkan tombol coba lagi, dan menunjukkan jumlah yang dimuat. Percobaan ulang otomatis menggunakan backoff eksponensial terbatas untuk menghindari badai permintaan selama gangguan layanan.
4. Sediakan jalur alternatif yang aksesibel
Sentinel tidak boleh menjadi satu-satunya kontrol. Sediakan "Load more" yang dapat difokuskan, pengumuman eksplisit untuk pemuatan dan akhir daftar, markup daftar yang semantik, judul yang stabil, dan fokus yang terlihat. Daftar panjang dapat menampilkan paginasi, jalur lewati duplikat, dan tautan "Kembali ke bagian atas daftar". Perpindahan fokus membutuhkan aturan; menyisipkan node baru tidak boleh memindahkan pengguna keyboard ke bagian akhir.
5. Verifikasi performa, kegunaan, dan pemulihan
Uji pemuatan beberapa halaman hanya dengan Tab dan Enter serta verifikasi bahwa pembaca layar dapat menangkap konten baru dan kegagalan. Ujilah pada jaringan lambat, mode offline, scrolling cepat, aktivasi berulang, navigasi kembali/maju, zoom 200%, dan tinggi gambar dinamis. Ukur jumlah permintaan, tingkat duplikasi, latensi halaman pertama dan per halaman, pembatalan, serta keberhasilan pemulihan. Jika virtualisasi diperlukan, verifikasi bahwa semantik dan fokus tetap terjaga.
Contoh jawaban yang kuat
Saya akan mendasarkan daftar pada kursor yang stabil dan id item, dengan status klien untuk kursor yang digunakan, id yang dilihat, permintaan aktif, dan jumlah percobaan ulang. Sentinel memancarkan satu sinyal muat di dalam jendela prefetch; respons harus cocok dengan kursor saat ini, dan item duplikat atau tidak berurutan akan dihapus. Kegagalan akan menampilkan kontrol coba lagi yang dapat difokuskan sementara mode offline tetap mempertahankan konten yang telah dimuat. Bersamaan dengan infinite scroll, saya menyediakan "Load more", paginasi, atau kontrol lompat agar pengguna keyboard dan pembaca layar tidak bergantung pada roda scroll mouse. Navigasi kembali akan memulihkan jangkar item. Saya memvalidasi jaringan lambat dan offline, scrolling cepat, zoom, kembali/maju, dan pembaca layar.
Kesalahan umum
- Menambahkan nomor halaman tanpa mempertimbangkan duplikasi atau data yang terlewat setelah penyisipan.
- Memulai permintaan pada setiap callback observer tanpa deduplikasi kursor atau kunci in-flight.
- Mencoba ulang tanpa henti, atau merender coba lagi sebagai teks yang tidak dapat menerima fokus.
- Menjadikan scrolling sebagai satu-satunya navigasi, tanpa pemuatan via keyboard, paginasi, atau jalur kembali.
- Memindahkan fokus ke akhir saat node baru tiba, sehingga menghilangkan posisi pembaca.
- Hanya menguji pada koneksi desktop yang cepat dan mengabaikan mode offline, zoom, tinggi dinamis, dan pemulihan.
Pertanyaan lanjutan dan jawaban
Mengapa tidak menggunakan paginasi nomor halaman?
Ketika rekaman disisipkan atau dihapus, batas halaman akan bergeser. Pengurutan yang stabil ditambah kursor mengurangi duplikasi dan data yang terlewat. Jika snapshot dapat diterima, token snapshot dapat menentukan satu batas penelusuran.
Bagaimana cara menyesuaikan sentinel yang terpicu terlalu dini?
Sesuaikan root margin dari rata-rata tinggi item, kecepatan scroll, latensi jaringan, dan tingkat pembatalan, serta buat agar dapat dipantau. Prefetch tetap dibatasi oleh hasNext, kunci konkurensi, dan kuota percobaan ulang.
Bagaimana cara mempertahankan posisi ketika ada item baru di bagian atas?
Catat item jangkar dan offset relatifnya, sisipkan node baru, dan kompensasikan offset scroll. Untuk pengguna pembaca layar dan keyboard, tampilkan kontrol "Item baru" sehingga mereka dapat memilih kapan harus melompat.
Kapan desain harus beralih menggunakan paginasi?
Gunakan paginasi ketika deep link, lompatan halaman yang tepat, perbandingan hasil, daftar yang sangat panjang, atau bagian bacaan yang jelas menjadi hal yang penting. Pemuatan progresif dapat tetap dipertahankan, tetapi jalur paginasi atau "Load more" yang terlihat harus ada.