Gesaan dan konteks
Soalan frontend ini menguji status interaksi senarai panjang, sempadan rangkaian, dan kebolehcapaian. Cabarannya bukan sekadar menyambungkan pemerhati (observer) kepada sentinel; ia adalah mentakrifkan kontrak lengkap untuk pemuatan, pembatalan, kegagalan, percubaan semula, pemulihan kedudukan, dan navigasi alternatif.
Perkara yang dinilai oleh penemu duga
- Sama ada anda boleh mencetuskan pemuatan dengan Intersection Observer atau mekanisme yang setara dan melaraskan jarak prefetch.
- Sama ada status kursor, penyahduplikasian permintaan, dan susunan menghalang halaman pendua, halaman tidak teratur, dan percubaan semula tanpa henti.
- Sama ada pengguna papan kekunci, pembaca skrin, zum, dan rangkaian perlahan mendapat status yang boleh dilihat dan dikendalikan.
- Sama ada anda menyedari bila infinite scroll memerlukan penomboran halaman, laluan langkau-ke-kandungan (skip-to-content), atau pemulihan kedudukan.
Soalan penjelasan untuk ditanya
Sahkan sama ada senarai tersebut ialah garis masa, hasil carian, atau grid; sama ada susunan adalah stabil; sama ada pelayan boleh mengeluarkan kursor; serta saiz halaman dan sasaran kandungan pertama. Tanya tentang pautan dalam (deep links), pemulihan navigasi kembali, ketinggian kandungan yang berubah-ubah, dan kekangan data mudah alih.
Rangka jawapan 30 saat
Saya akan menggunakan penomboran halaman kursor yang stabil dan sentinel pemuatan yang boleh dialih keluar. Muat hanya apabila tiada permintaan aktif, kursor lain wujud, dan sentinel memasuki tetingkap prefetch; nyahduplikasi mengikut kursor dan id item sambil mengekalkan susunan. Status pemuatan, kegagalan, percubaan semula, dan akhir senarai boleh difokuskan dan boleh dilihat. Saya juga akan menawarkan laluan penomboran halaman atau "Load more" yang jelas, langkau-ke-kandungan, dan pemulihan kedudukan supaya menatal bukan satu-satunya kaedah navigasi.
Penyelaman mendalam langkah demi langkah
1. Tentukan kontrak data dan kedudukan
Utamakan kursor yang tidak berganjak disebabkan oleh rekod baharu. Kembalikan kursor seterusnya dan id item yang stabil. Simpan kursor yang diketahui, id yang dilihat, dan status permintaan pada klien supaya nombor halaman tidak menduplikasi atau melangkau item selepas pemasukan. Apabila menavigasi keluar, rekod laluan, kursor, dan ofset sauh; pulihkan item yang kelihatan apabila data sudah sedia.
2. Reka bentuk pencetus dan kawalan keserentakan
Intersection Observer mengeluarkan isyarat "hampir ke bahagian bawah"; ia tidak membenarkan pengambilan tanpa had. Sebelum memuatkan, periksa hasNext, loading, bajet percubaan semula, dan status rangkaian. Benarkan satu permintaan bagi setiap kursor. Laraskan ambang prefetch menggunakan ketinggian item dan kependaman, serta sediakan butang eksplisit untuk penatalan pantas supaya panggilan balik pemerhati yang berulang tidak menghasilkan lonjakan mendadak (burst).
3. Kendalikan respons, pembatalan, dan kegagalan
Sahkan bahawa respons adalah milik kursor yang dijangkakan. Gugurkan atau gabungkan respons yang lewat ke dalam set yang diketahui dan bukannya menambah secara membuta tuli. Meninggalkan halaman boleh membatalkan permintaan aktif tanpa mengosongkan data yang telah direncanakan. Status kegagalan menerangkan masalah, mendedahkan butang cuba semula, dan menunjukkan kiraan yang dimuatkan. Percubaan semula automatik menggunakan backoff eksponen terikat untuk mengelakkan lambakan permintaan semasa gangguan perkhidmatan.
4. Sediakan laluan alternatif yang boleh diakses
Sentinel tidak boleh menjadi satu-satunya kawalan. Sediakan "Load more" yang boleh difokuskan, pengumuman pemuatan dan akhir senarai yang eksplisit, penandaan senarai semantik, tajuk yang stabil, dan fokus yang boleh dilihat. Senarai yang panjang boleh memaparkan penomboran halaman, laluan langkau pendua, dan pautan "Kembali ke atas senarai". Pergerakan fokus memerlukan peraturan; memasukkan nod tidak boleh menghantar pengguna papan kekunci ke bahagian akhir.
5. Sahkan prestasi, kebolehgunaan, dan pemulihan
Uji pemuatan beberapa halaman hanya menggunakan Tab dan Enter serta sahkan bahawa pembaca skrin mengesan kandungan baharu dan kegagalan. Uji pada rangkaian perlahan, mod luar talian, penatalan pantas, pengaktifan berulang, navigasi ke belakang/ke hadapan, zum 200%, dan ketinggian imej dinamik. Ukur kiraan permintaan, kadar pendua, kependaman halaman pertama dan setiap halaman, pembatalan, serta kejayaan pemulihan. Jika virtualisasi diperlukan, sahkan bahawa ia mengekalkan semantik dan fokus.
Contoh jawapan yang mantap
Saya akan mendasarkan senarai pada kursor yang stabil dan id item, dengan status klien bagi kursor yang digunakan, id yang dilihat, permintaan aktif, dan kiraan percubaan semula. Sentinel mengeluarkan satu isyarat muat di dalam tetingkap prefetch; respons mesti sepadan dengan kursor semasa, dan item pendua atau tidak teratur akan dialih keluar. Kegagalan mendedahkan kawalan cuba semula yang boleh difokuskan manakala mod luar talian mengekalkan kandungan yang telah dimuatkan. Di samping infinite scroll, saya menyediakan "Load more", penomboran halaman, atau kawalan lompat supaya pengguna papan kekunci dan pembaca skrin tidak bergantung pada roda tatal. Navigasi kembali memulihkan sauh item. Saya mengesahkan rangkaian perlahan dan luar talian, penatalan pantas, zum, ke belakang/ke hadapan, dan pembaca skrin.
Kesilapan biasa
- Menambah nombor halaman tanpa mengambil kira pendua atau ketinggalan selepas pemasukan.
- Memulakan permintaan pada setiap panggilan balik pemerhati tanpa penyahduplikasian kursor atau kunci in-flight.
- Mencuba semula selama-lamanya, atau memaparkan cuba semula sebagai teks yang tidak boleh menerima fokus.
- Menjadikan penatalan sebagai satu-satunya navigasi, tanpa pemuatan papan kekunci, penomboran halaman, atau laluan kembali.
- Mengalihkan fokus ke bahagian akhir apabila nod baharu tiba, menyebabkan kedudukan pembaca hilang.
- Hanya menguji pada sambungan desktop yang pantas dan mengabaikan mod luar talian, zum, ketinggian dinamik, dan pemulihan.
Soalan susulan dan jawapan
Mengapa tidak menggunakan penomboran halaman berasaskan nombor halaman?
Apabila rekod dimasukkan atau dialih keluar, sempadan halaman akan beralih. Susunan yang stabil bersama kursor mengurangkan pendua dan ketinggalan. Jika snapshot boleh diterima, token snapshot boleh mentakrifkan satu sempadan semakan imbas.
Bagaimana anda melaraskan sentinel yang dicetuskan terlalu awal?
Laraskan root margin daripada purata ketinggian item, kelajuan tatal, kependaman rangkaian, dan kadar pembatalan, serta jadikannya boleh diperhatikan. Prefetch kekal dibatasi oleh hasNext, kunci keserentakan, dan bajet percubaan semula.
Bagaimana anda mengekalkan kedudukan apabila item baharu tiba di bahagian atas?
Rekod item sauh dan ofset relatifnya, masukkan nod baharu, dan imbangkan ofset tatal. Bagi pengguna pembaca skrin dan papan kekunci, dedahkan kawalan "Item baharu" supaya mereka memilih bila untuk melompat.
Bilakah reka bentuk perlu bertukar kepada berhalaman?
Gunakan penomboran halaman apabila pautan dalam, lompatan halaman yang tepat, perbandingan hasil, senarai yang sangat panjang, atau bahagian pembacaan yang jelas adalah penting. Pemuatan progresif boleh dikekalkan, tetapi laluan penomboran halaman atau "Load more" yang kelihatan mesti wujud.