Temuduga Frontend: Bagaimanakah Anda Membina Senarai Terp Maya yang Pantas dan Boleh Diakses?

Prompt dan senario yang berkenaan

Suapan aktiviti produk boleh berkembang sehingga 100,000 item logik. API kursornya mengembalikan 50 item bagi setiap permintaan. Sesuatu kad mungkin berketinggian 48 hingga 240 piksel selepas teks membalut, imej dimuatkan atau butiran dikembangkan. Pengguna boleh menapis suapan, mengembangkan kad dan mendraf balasan sebaris. Pengguna papan kekunci dan pembaca skrin mesti boleh menavigasi suapan tanpa kehilangan maklumat fokus atau kedudukan.

Reka julat pemaparan, pengukuran ketinggian boleh ubah, pemuatan berperingkat, pemilikan keadaan, penambat tatal, tingkah laku fokus, semantik kebolehcapaian dan pelan pengesahan. Terangkan bila senarai berhalaman yang lebih mudah atau senarai tidak terp maya adalah pilihan yang lebih baik.

Kiraan item, saiz halaman dan julat ketinggian adalah andaian temuduga, bukan sasaran produk universal. Soalan ini sesuai untuk peranan frontend kanan, infrastruktur UI dan prestasi Web. Kemahiran terasnya ialah pemaparan penyemak imbas dan reka bentuk interaksi, jadi kategorinya ialah frontend.

Perkara yang dinilai oleh penemuduga

Pertama, bolehkah calon memisahkan empat kebimbangan yang sering dicampuradukkan? Penomboran halaman mengawal rekod yang telah dimuatkan oleh klien. Pemayaan mengawal rekod yang dimuatkan yang mempunyai nod DOM. Identiti stabil mengawal rekod perniagaan yang memiliki keadaan. Kebolehcapaian mengawal cara DOM separa mewakili koleksi logik. Satu mekanisme tidak menyelesaikan tiga yang lain.

Kedua, bolehkah calon memperoleh matematik julat daripada andaian saiz baris? Baris berketinggian sama membolehkan aritmetik ofset terus. Baris berketinggian boleh ubah memerlukan anggaran, saiz yang diukur, ofset kumulatif dan dasar pembetulan apabila anggaran berubah. Jawapan yang kukuh menamakan lompatan tatal yang disebabkan oleh perubahan kandungan di atas viewport dan mengekalkan penambat logik.

Ketiga, bolehkah calon mengelakkan kerosakan keadaan? Slot visual yang dikitar semula bukanlah rekod perniagaan. Draf, pemilihan, pengembangan dan mutasi yang belum selesai memerlukan ID rekod yang stabil dan keadaan yang kekal walaupun selepas baris dinyahlekapkan (unmounted). Pengisihan, penapisan dan respons halaman lapuk tidak boleh melampirkan data atau keadaan pada indeks yang salah.

Keempat, bolehkah calon mengekalkan kebolehcapaian secara utuh? Hanya melekapkan kad yang kelihatan mengeluarkan sebahagian besar set logik daripada DOM. Jawapan yang kukuh mengekalkan semantik asli atau suapan, mendedahkan kedudukan logik dan saiz set, mengumumkan keadaan sibuk dengan betul, mengekalkan kad yang difokuskan dalam keadaan terlekap, dan menyediakan laluan pemuatan yang boleh dikendalikan.

Kelima, bolehkah calon mengesahkan tingkah laku dan bukannya sekadar menjanjikan "penatalan lancar"? Jawapan tersebut harus mentakrifkan peranti dan senario sasaran, kemudian mengukur kiraan nod yang dilekapkan, tingkah laku bingkai dan tugas panjang, anjakan reka letak atau ralat penambat, penduaan permintaan, memori, pengekalan fokus dan output pembaca skrin.

Soalan untuk dijelaskan terlebih dahulu

Adakah senarai itu benar-benar perlahan tanpa pemayaan? Jika produk menunjukkan paling banyak beberapa dozen baris mudah, pemaparan biasa atau penomboran halaman lebih mudah diselenggara dan lebih mudah diakses. Ukur sebelum menambah pembidaian (windowing).
Adakah ketinggian baris tetap, terikat atau sewenang-wenangnya? Ketinggian tetap membenarkan matematik julat masa malar. Ketinggian boleh ubah memerlukan anggaran dan pengukuran. Benaman tidak terikat atau media yang lewat menjadikan pembetulan tatal lebih sukar dan mungkin mewajarkan reka letak kad yang dikekang.
Adakah API mendedahkan jumlah kiraan atau hanya kursor seterusnya? Jumlah yang diketahui boleh menyokong saiz set logik penuh. Jumlah yang tidak diketahui mengubah jangkaan bar tatal dan metadata kebolehcapaian. Penomboran halaman kursor juga bermakna indeks yang belum dimuatkan tidak boleh dialamatkan secara langsung.
Adakah pengguna mesti melompat ke item sewenang-wenangnya? Melompat mengikut indeks dengan baris boleh ubah yang kebanyakannya belum diukur adalah anggaran sehingga baris berdekatan diukur. Melompat mengikut ID rekod mungkin memerlukan carian pelayan atau API yang berbeza.
Keadaan baris yang manakah mesti kekal selepas dinyahlekapkan? Keadaan tuding tetikus sementara boleh hilang. Draf balasan, pemilihan, pengembangan, ralat pengesahan dan mutasi optimistik biasanya berada dalam keadaan yang dikunci oleh ID rekod di luar komponen baris.
Apakah model dan semantik papan kekunci yang terpakai? Suapan bacaan, kotak senarai boleh pilih dan grid boleh edit mempunyai peranan dan kontrak papan kekunci yang berbeza. Pilih corak semantik daripada interaksi, bukan daripada reka letak visual.
Apakah kontrak tatal apabila data berubah? Selepas penapisan, produk mungkin menetapkan semula ke bahagian atas. Apabila item yang lebih lama dipra-tambah (prepend), ia biasanya mengekalkan item pertama yang kelihatan semasa. Apabila item langsung ditambah di hujung (append), ia mengikut hanya jika pengguna sudah berada di hujung.
Apakah sasaran penerimaan prestasi? Namakan peranti sasaran, bentuk data, tindakan tatal dan belanjawan. Surihan desktop pada baris pemegang tempat kecil tidak mengesahkan suapan mudah alih dengan imej dan kawalan.

Rangka kerja jawapan 30 saat

"Saya akan memisahkan pemuatan data, pemayaan dan keadaan baris. Pemuat kursor mengambil dan menyahduplikasi halaman 50 item. Pemaya hanya memaparkan julat yang kelihatan ditambah dengan overscan kecil dan meletakkan baris tersebut di dalam penjarak yang ketinggiannya mewakili data yang dimuatkan. Baris tetap menggunakan aritmetik ofset; baris boleh ubah bermula dengan anggaran, diukur selepas reka letak, dan mengemas kini ofset kumulatif. Apabila ketinggian sebelum viewport berubah, saya mengekalkan rekod pertama yang kelihatan dan ofset intra-barisnya supaya skrin tidak melompat. Setiap baris menggunakan ID rekod, manakala draf dan pemilihan berada di luar baris. Untuk suapan aktiviti, saya akan mendedahkan semantik suapan dan artikel, kedudukan logik dan saiz set, keadaan sibuk, dan tidak sekali-kali menyahlekapkan kad yang mengandungi fokus. Saya akan menguji tatal pantas, perubahan imej dan pengembangan, perlumbaan penapis, tingkah laku pra-tambah dan tambah, navigasi papan kekunci dan pembaca skrin, kiraan nod, tugas panjang, memori dan ralat penambat. Jika pemaparan biasa sudah memenuhi belanjawan, saya akan mengekalkan senarai yang lebih mudah."

Panduan mendalam langkah demi langkah

Langkah 1: Pisahkan rekod yang dimuatkan daripada baris yang dilekapkan

Kekalkan keadaan eksplisit untuk lapisan data: ID rekod tersusun, peta daripada ID kepada rekod, kursor seterusnya, status permintaan dan sama ada terdapat lebih banyak data. Pemaya menerima ID dimuatkan yang tersusun dan bekas tatal. Ia tidak memiliki kursor, percubaan semula, draf atau mutasi pelayan.

Dengan API kursor, pada mulanya hanya 50 rekod boleh dialamatkan. Mayakan awalan yang dimuatkan dan kembangkan ketinggian logiknya apabila halaman tiba. Jangan berpura-pura bahawa indeks 73,421 yang belum dimuatkan tersedia secara tempatan melainkan API menyokong akses berindeks atau mengembalikan pemegang tempat dengan kedudukan yang stabil. Julat yang kelihatan boleh mencetuskan pengambilan apabila penghujungnya mendekati kiraan yang dimuatkan, tetapi pemuat tetap bertanggungjawab untuk menggabungkan permintaan dan berhenti pada penghujungnya.

Pemisahan ini menghalang dua pepijat biasa: pemuatan tak terhingga yang menyebabkan beribu-ribu nod DOM lama kekal dilekapkan, dan pemaya yang mencetuskan permintaan pendua setiap kali julat kecilnya dikira semula.

Langkah 2: Dapatkan julat ketinggian tetap sebelum menambah ketinggian boleh ubah

Untuk baris berketinggian sama, dapatkan indeks pertama dan terakhir yang kelihatan daripada scrollTop, ketinggian viewport dan ketinggian baris. Overscan meluaskan julat tetapi dihadkan kepada kiraan yang dimuatkan. Kanvas dalaman berketinggian penuh mencipta bar tatal; baris yang dilekapkan diletakkan pada ofset logiknya.

function getFixedRange({
  scrollTop,
  viewportHeight,
  rowHeight,
  loadedCount,
  overscanRows,
}) {
  const visibleStart = Math.floor(scrollTop / rowHeight);
  const visibleEnd = Math.ceil(
    (scrollTop + viewportHeight) / rowHeight,
  );

  return {
    start: Math.max(0, visibleStart - overscanRows),
    end: Math.min(loadedCount, visibleEnd + overscanRows),
    totalHeight: loadedCount * rowHeight,
  };
}

Paparkan selang separuh terbuka dari start hingga end, tidak termasuk end. Baris pada indeks i bermula pada i * rowHeight. Kemas kini julat daripada bekas tatal, kumpulkan pemaparan kelompok dengan rangka kerja, dan elakkan membaca reka letak serta menulis gaya berulang kali di dalam satu panggilan balik tatal.

Penyelesaian ini lebih diutamakan apabila reka bentuk boleh menguatkuasakan satu ketinggian baris atau sebilangan kecil varian yang diketahui. Ia boleh diramal, murah dan mudah dipulihkan. Jangan gunakan pengukuran dinamik semata-mata kerana pustaka menawarkannya.

Langkah 3: Ukur baris boleh ubah dan kekalkan ofset kumulatif

Baris boleh ubah menggantikan pendaraban dengan model saiz. Mulakan setiap baris yang belum diukur dengan anggaran yang munasabah berdasarkan reka bentuk kad sebenar. Simpan saiz yang diukur mengikut ID rekod, bukan mengikut slot DOM yang dikitar semula. Ofset mula sesuatu item ialah jumlah saiz sebelumnya, jadi mencari item pertama yang kelihatan menjadi carian ke atas ofset kumulatif.

Tatasusunan awalan mudah mudah dijelaskan tetapi boleh memerlukan banyak ofset kemudian dikemas kini apabila satu ketinggian berubah. Pustaka pemaya atau struktur jumlah awalan berindeks boleh mengurangkan kerja carian dan pengemaskinian. Keputusan temuduga yang penting ialah varian tak berubah (invariant): setiap baris yang dipaparkan mempunyai ofset mula logik yang diperoleh daripada stor saiz yang sama, dan jumlah ketinggian kanvas bersamaan dengan jumlah saiz semasa yang diukur atau dianggarkan.

Gunakan ResizeObserver atau cangkuk (hook) pengukuran pustaka selepas baris melengkapkan reka letak. Simpan ruang imej daripada dimensi yang diketahui jika boleh; jika tidak, pemuatan imej akan menghasilkan ukuran baharu. Abaikan saiz yang tidak berubah, kumpulkan pembetulan secara berkelompok, dan putuskan pemerhati untuk baris yang dinyahlekapkan. Ukur semula apabila lebar, metrik fon, pengembangan atau perubahan kandungan boleh mengubah ketinggian.

Anggaran dibenarkan untuk salah. Sistem gagal apabila ia mengubah ofset tanpa dasar tentang perkara yang patut terus dilihat oleh pengguna.

Langkah 4: Kekalkan penambat tatal logik

Sebelum menggunakan perubahan saiz, tangkap ID rekod pertama yang kelihatan dan jarak dari tepi atasnya ke tepi atas viewport. Selepas mengemas kini ukuran dan ofset kumulatif, cari permulaan baharu rekod tersebut dan tetapkan ofset tatal supaya titik intra-baris yang sama kekal di lokasi visual yang sama.

Jika baris yang berada sepenuhnya di atas penambat membesar sebanyak 30 piksel, ofset tatal biasanya memerlukan pembetulan 30 piksel yang sama. Perubahan di bawah penambat tidak memerlukannya. Jika pengguna sedang menyeret bar tatal atau produk sengaja menavigasi ke item baharu, tangguhkan atau langkau pembetulan mengikut kontrak interaksi tersebut.

Penyemak imbas juga melaksanakan penambatan tatal untuk perubahan reka letak biasa. Pemaya kerap menggunakan kanvas sintetik dan baris yang diletakkan secara mutlak, jadi tingkah laku asli mungkin tidak mengekalkan item logik yang dimaksudkan. Uji gabungan tersebut. Biarkan sama ada penyemak imbas atau pemaya memiliki pampasan untuk bekas tertentu; jika penambatan manual adalah berwibawa, menarik diri daripada penambatan asli di situ untuk mengelakkan pembetulan berganda.

Mempra-tambah rekod yang lebih lama menggunakan peraturan yang sama. Tangkap penambat semasa, masukkan dan ukur rekod baharu, kemudian pulihkan penambat. Menambah rekod langsung di hujung mengikut penghujung hanya apabila pengguna sudah berada dalam ambang "paling terkini" produk; jika tidak, tunjukkan tindakan "aktiviti baharu" dan bukannya mengalihkan viewport.

Langkah 5: Laraskan overscan daripada kerja setiap baris dan tingkah laku tatal

Overscan menyembunyikan kependaman pemaparan dengan melekapkan item di luar viewport. Terlalu sedikit boleh mendedahkan ruang kosong semasa tatal pantas; terlalu banyak mencipta semula kos DOM, reka letak, memori dan kesan yang cuba dielakkan oleh pemayaan. Dengan ketinggian boleh ubah, overscan berasaskan piksel selalunya lebih stabil daripada kiraan baris tetap kerana lima baris padat dan lima baris yang dikembangkan mewakili kerja dan jarak yang berbeza.

Mulakan secara konservatif, rekod surihan pada peranti sasaran, dan laraskan daripada bukti. Pertimbangkan arah tatal, halaju, kos pemaparan baris, penyahkodan imej dan kependaman kemas kini rangka kerja. Overscan bukanlah pengganti untuk memoisasi kerja baris yang mahal, menempah dimensi media, membatalkan kesan usang atau mengurangkan bacaan reka letak segerak.

Kekalkan invarian kiraan nod yang ketat: baris yang dilekapkan bersamaan dengan julat yang kelihatan, overscan dan sebilangan kecil baris yang disematkan secara eksplisit seperti item yang difokuskan. Profil memori harus menunjukkan komponen baris lama, pemerhati dan pendengar peristiwa boleh dikumpul semula (garbage collected) selepas ia meninggalkan set tersebut.

Langkah 6: Muatkan halaman tanpa perlumbaan atau rekod pendua

Cetuskan pemuatan daripada penghujung julat logik dan bukannya bergantung pada sentri yang mungkin dikitar semula. Benarkan paling banyak satu permintaan bagi setiap kursor. Simpan kursor yang dikaitkan dengan setiap permintaan, nyahduplikasi rekod yang dikembalikan mengikut ID yang stabil, dan berhenti apabila pelayan menyatakan tiada kursor seterusnya.

Penapisan atau pengisihan mencipta generasi pertanyaan baharu. Batalkan permintaan sebelumnya jika boleh dan tolak sebarang respons lewat yang generasinya tidak lagi sepadan. Tetapkan semula ID tersusun, kursor, ukuran yang bergantung pada reka letak atau kandungan, dan kedudukan tatal mengikut kontrak produk. Menggunakan semula ofset lama untuk pesanan baharu melampirkan ketinggian yang betul pada kedudukan yang salah.

Pemegang tempat pemuatan memerlukan pengendalian logik yang stabil. Jika satu pemegang tempat mewakili halaman seterusnya, ia bukan 50 rekod yang boleh diakses. Jika API membekalkan jumlah berindeks yang diketahui dan produk memilih pemegang tempat bagi setiap baris, berikan mereka kedudukan yang stabil dan gantikannya tanpa mengalihkan identiti. Sentiasa dedahkan keadaan cuba semula dan penghujung senarai; pengambilan yang gagal tidak boleh meninggalkan ekor kosong kekal yang kelihatan seperti penghujung.

Langkah 7: Simpan identiti rekod dan keadaan penting di luar baris yang dikitar semula

Gunakan ID stabil setiap rekod sebagai kunci rangka kerja dan kunci item pemaya. Indeks tatasusunan tidak selamat apabila halaman dipra-tambah, penapis menyusun semula rekod atau pendua dialih keluar. Slot yang dikitar semula mungkin memaparkan rekod A sekarang dan rekod B kemudian; keadaan yang terikat pada slot boleh membocorkan draf, kotak semak atau hasil optimistik antara rekod pengguna.

Simpan keadaan UI tahan lama sebagai peta yang dikunci oleh ID rekod: teks draf, pengembangan, pemilihan, status pengesahan dan mutasi yang belum selesai. Baris membaca bahagiannya apabila dilekapkan dan menulis melalui pemilik yang kekal selepas dinyahlekapkan. Keadaan tempatan boleh diterima untuk butiran persembahan pakai buang yang kehilangannya disengajakan.

Jangan kekalkan setiap nilai fana selama-lamanya. Alih keluar keadaan apabila produk membuang pertanyaan, hadkan pengekalan draf, dan selaraskan keadaan optimistik dengan hasil pelayan. Matlamatnya ialah pemilikan mengikut identiti perniagaan, bukan cache klien tanpa had.

Langkah 8: Reka kebolehcapaian sebagai sebahagian daripada algoritma julat

Pilih semantik daripada interaksi. Untuk suapan bacaan, bekas boleh menggunakan semantik suapan dan setiap kad semantik artikel dengan nama yang boleh diakses. Setiap artikel yang dilekapkan mendedahkan kedudukan logik berasaskan satu. Jika jumlah diketahui, dedahkan jumlah logik; jika ia tidak diketahui, gunakan perwakilan saiz tidak diketahui corak tersebut. Tandakan suapan sibuk semasa kemas kini berbilang operasi dan sentiasa kosongkan keadaan tersebut apabila kemas kini selesai.

Jangan nyahlekapkan elemen yang mengandungi fokus DOM. Tambahkan rekod yang difokuskan pada julat yang dilekapkan walaupun ia berada di luar overscan biasa, atau alihkan fokus melalui tindakan navigasi yang disengajakan sebelum pengusiran. Apabila arahan papan kekunci beralih ke artikel logik seterusnya, pastikan ia dimuatkan dan dilekapkan, tatal ke dalam paparan, kemudian fokus padanya. Dokumentasikan sebarang kekunci tersuai dan kekalkan cara yang boleh dipercayai untuk beralih sebelum dan selepas suapan.

Pemayaan juga boleh merosakkan ciri cari-dalam-halaman, pemilihan teks penyemak imbas, pencetakan dan tingkah laku pelayaran pembaca skrin kerana kandungan di luar skrin tiada dalam DOM. Tentukan sama ada ciri tersebut adalah keperluan. Carian mungkin memerlukan kawalan disokong pelayan, pencetakan mungkin memaparkan paparan berhalaman yang berasingan, dan kawalan "Muat lebih banyak" yang jelas boleh menyediakan alternatif yang boleh dikendalikan kepada pemuatan automatik.

Akhir sekali, uji dengan operasi papan kekunci sahaja dan pembaca skrin sebenar. Memeriksa atribut mengesahkan markup tetapi tidak dapat membuktikan bahawa fokus, pengumuman, pemuatan dan navigasi berfungsi bersama.

Langkah 9: Sahkan matriks kegagalan, bukan sekadar satu tatal yang lancar

Bina set data deterministik yang mengandungi teks pendek dan panjang, imej tertangguh dengan dimensi, pengembangan, media yang hilang dan ID pendua. Lakukan tatal roda perlahan dan pantas, momentum seperti sentuhan, menyeret bar tatal, saiz semula, zum, muatan fon, perubahan penapis semasa permintaan, pra-tambah, tambah, kegagalan pengambilan, cuba semula dan tamat data.

Rekod kiraan baris yang dilekapkan dan nod DOM sepanjang larian. Gunakan surihan prestasi untuk memeriksa bingkai, tugas panjang, penskripan, reka letak, cat dan ukuran berulang yang tidak dijangka. Jejaki memori puncak dan dikekalkan selepas menatal melalui banyak halaman. Bandingkan penambat logik teratas sebelum dan selepas perubahan ketinggian, dan sahkan bahawa kursor dan ID pendua tidak muncul.

Untuk interaksi, letakkan fokus dalam baris, tatal dengan penuding dan papan kekunci, kembangkan baris di atasnya, muatkan halaman seterusnya dan tukar penapis. Sahkan tempat fokus mendarat dan sama ada draf kekal dilampirkan pada ID yang betul. Dengan pembaca skrin, sahkan nama artikel, kedudukan logik dan saiz set, peralihan sibuk, navigasi seterusnya dan sebelumnya, cuba semula dan keadaan tamat.

Sasaran penerimaan adalah milik produk dan peranti sasaran. Laporkan surihan yang diukur dan pelanggaran invarian daripada mendakwa bahawa pemayaan menjamin kadar bingkai tertentu.

Contoh jawapan berkualiti tinggi

"Saya akan memodelkan suapan sebagai tiga lapisan. Lapisan data memiliki ID tersusun, rekod, kursor seterusnya, generasi permintaan dan penyahduplikasian. Pemaya hanya menerima ID yang dimuatkan dan memiliki julat yang kelihatan, ukuran dan peletakan kedudukan. Draf, pengembangan, pemilihan dan mutasi berada dalam peta yang dikunci oleh ID rekod supaya menyahlekapkan baris tidak memadam atau mengalihkannya.

Untuk baris tetap, julat ialah aritmetik ofset terus dan ketinggian kanvas ialah kiraan dimuatkan didarab dengan ketinggian baris. Kad ini berbeza daripada 48 hingga 240 piksel, jadi saya akan bermula daripada anggaran, mengukur kad yang dilekapkan dan mengekalkan ofset kumulatif. Rekod pertama yang kelihatan dan ofset intra-barisnya membentuk penambat tatal. Apabila ukuran di atas rekod tersebut berubah, saya mengemas kini ofset tatal mengikut delta yang terhasil. Saya akan memilih satu pemilik pampasan untuk bekas supaya penambatan tatal asli dan manual tidak melaraskannya secara serentak.

Julat ini merangkumi overscan terukur yang kecil serta sebarang kad yang difokuskan. Apabila penghujungnya mendekati kiraan yang dimuatkan, pemuat meminta kursor seterusnya sekali. Perubahan penapis memulakan generasi baharu, membatalkan permintaan lama jika boleh, menolak hasil lewat, dan menetapkan semula susunan serta ukuran. ID rekod berfungsi sebagai kunci item; indeks tidak sekali-kali memiliki keadaan.

Untuk kebolehcapaian, aliran aktiviti ini menggunakan semantik suapan dan artikel. Artikel yang dilekapkan mendedahkan kedudukan logik dan jumlah yang diketahui, suapan mendedahkan keadaan sibuk semasa halaman dimasukkan, dan keadaan tersebut dikosongkan selepas itu. Saya tidak menyahlekapkan artikel yang mengandungi fokus. Navigasi papan kekunci memuatkan dan melekapkan artikel logik seterusnya sebelum memfokus padanya, dan saya mengekalkan laluan cuba semula, tamat dan muat lebih banyak yang jelas.

Saya mula-mula akan mengesahkan bahawa pemaparan biasa gagal memenuhi belanjawan sasaran. Kemudian saya akan menguji campuran deterministik ketinggian baris, media tertangguh, pengembangan, tatal pantas, pensaisan semula, perlumbaan penapis, pra-tambah dan tambah, serta kegagalan rangkaian. Saya akan merekodkan kiraan nod yang dilekapkan, tugas panjang, kerja reka letak dan cat, memori yang dikekalkan, ralat penambat, permintaan dan ID pendua, identiti draf, fokus papan kekunci dan output pembaca skrin. Jika senarai biasa berhalaman memenuhi keperluan yang sama, saya akan memilihnya kerana ia mempunyai lebih sedikit mod kegagalan ketepatan dan kebolehcapaian."

Kesilapan biasa

Menganggap pemuatan tak terhingga sebagai pemayaan → halaman lama terus menambah nod DOM dan prestasi merosot dengan jarak yang ditatal → bataskan julat yang dilekapkan secara bebas daripada data yang dimuatkan.
Menggunakan indeks tatasusunan sebagai kunci item → pra-tambah, penapisan dan penyahduplikasian mengalihkan draf dan pemilihan ke rekod yang berbeza → kuncikan baris dan keadaan luaran mengikut ID rekod yang stabil.
Mengandaikan satu ketinggian purata adalah tepat → ralat ofset terkumpul dan menyebabkan julat kosong atau lompatan → ukur baris boleh ubah dan kemas kini satu model saiz kumulatif.
Mengenakan perubahan ukuran tanpa penambat → kandungan di atas viewport mengalihkan perkara yang sedang dibaca oleh pengguna → kekalkan rekod pertama yang kelihatan dan ofset intra-barisnya.
Membiarkan penambatan asli dan manual kedua-duanya membuat pampasan → viewport boleh bergerak dua kali → uji bekas dan tetapkan pampasan kepada satu pemilik.
Melakukan overscan pada kiraan baris besar yang tetap → kad yang dikembangkan mencipta semula kerja DOM dan reka letak yang berat → laraskan jarak piksel dan kos pemaparan pada peranti sasaran.
Mencetuskan pengambilan daripada setiap kemas kini julat → pemaparan berulang meminta kursor yang sama dan menyilang hasil → gabungkan mengikut kursor dan tolak generasi pertanyaan lapuk.
Menyimpan draf di dalam komponen baris → penyahlekapan memadamkannya atau penggunaan semula slot membocorkannya → angkat keadaan penting ke dalam pemilik yang dikunci oleh ID.
Menyahlekapkan baris yang difokuskan → konteks papan kekunci dan teknologi bantuan hilang → sematkan item yang difokuskan atau alihkan fokus dengan sengaja sebelum pengusiran.
Melaporkan hanya kedudukan subset yang dilekapkan → pembaca skrin mendengar saiz dan susunan koleksi yang mengelirukan → dedahkan kedudukan logik dan saiz set logik yang diketahui atau tidak diketahui.
Menetapkan keadaan sibuk dan tidak pernah mengosongkannya → teknologi bantuan mungkin tidak mendedahkan kemas kini yang telah selesai → kosongkan keadaan sibuk dalam setiap laluan kejayaan dan kegagalan.
Mengoptimumkan kadar bingkai sahaja → fokus, draf, perlumbaan, memori dan kedudukan tatal masih boleh menjadi salah → sahkan invarian prestasi dan interaksi bersama-sama.

Soalan susulan dan respons

Susulan 1: Apakah yang berubah jika setiap baris berketinggian tepat 56 piksel?

Keluarkan pengukuran dinamik dan laluan pembetulannya. Kira julat dan ofset secara langsung daripada 56 piksel, dapatkan jumlah ketinggian yang dimuatkan melalui pendaraban, dan pulihkan kedudukan mengikut indeks ditambah ofset intra-baris. Kekalkan ID yang stabil, perlumbaan pemuatan, fokus dan pengendalian kebolehcapaian; ketinggian tetap memudahkan geometri tetapi tidak menyelesaikan identiti atau interaksi. Buat penanda aras sebelum menambah struktur jumlah awalan yang tidak lagi diperlukan oleh kekangan tersebut.

Susulan 2: Bagaimanakah anda menyokong jumlah yang tidak diketahui daripada API kursor sahaja?

Mayakan awalan yang dimuatkan dan kembangkan kanvas apabila halaman tiba. Jangan mereka-reka indeks yang belum dimuatkan atau saiz bar tatal akhir palsu. Dedahkan saiz set tidak diketahui corak suapan, umumkan keadaan pemuatan dan tamat, dan kekalkan kawalan muat lebih banyak atau cuba semula yang jelas. Lompatan ke indeks sewenang-wenangnya tidak tersedia melainkan pelayan menambah carian berindeks, pencari rekod atau kontrak anggaran yang stabil.

Susulan 3: Item yang lebih lama dipra-tambah semasa pengguna membaca bahagian tengah. Bagaimanakah anda menghentikan lompatan tersebut?

Tangkap ID rekod pertama yang kelihatan dan ofset relatif viewport sebelum pemasukan. Masukkan ID yang lebih lama, anggar atau ukurnya, kira semula ofset kumulatif, dan tetapkan ofset tatal supaya rekod yang ditangkap kembali ke titik visual yang sama. Nyahduplikasi ID pada sempadan halaman. Jika pengukuran berterusan selepas media dimuatkan, kenakan delta kemudian di atas penambat menggunakan peraturan yang sama.

Susulan 4: Kad yang difokuskan berada 5,000 item jauhnya selepas pengguna menyeret bar tatal. Adakah anda mengekalkannya terlekap selama-lamanya?

Tentukan kontrak interaksi. Memastikan satu kad yang difokuskan disematkan ialah kos DOM yang terikat, tetapi sasaran fokus tersembunyi yang jauh dari viewport boleh mengelirukan pengguna. Semasa lompatan bar tatal yang disengajakan, alihkan fokus ke bekas suapan atau artikel kelihatan yang baru dinavigasi dengan pengumuman, kemudian nyahsemat kad lama. Semasa pengukuran sampingan atau tatal penuding, jangan musnahkan fokus secara senyap. Uji tingkah laku yang dipilih dengan pengguna papan kekunci dan pembaca skrin.

Susulan 5: Produk meminta fungsi cari-dalam-halaman penyemak imbas dan mencetak kesemua 100,000 item. Bolehkah satu DOM maya memuaskan perkara itu?

Tiada DOM separa yang boleh dipercayai boleh mendedahkan teks yang tidak dilekapkan kepada carian penyemak imbas atau mencetaknya sebagai kandungan halaman biasa. Anggap ini sebagai keperluan berasingan. Sediakan carian disokong pelayan yang bergerak ke dan melekapkan rekod yang sepadan. Hasilkan eksport berhalaman atau paparan data khusus cetakan dengan had eksplisit dan bukannya melekapkan 100,000 kad interaktif secara sementara yang membekukan halaman.

Susulan 6: Bagaimanakah anda akan menguji pemaya tanpa hanya bergantung pada tangkapan skrin?

Uji invarian julat tetap tulen dan ofset kumulatif dengan input deterministik, kemudian jalankan senario penyepaduan dalam penyemak imbas sebenar. Sahkan bahawa ID yang dilekapkan meliputi julat yang kelihatan dan overscan, saiz keseluruhan sepadan dengan model saiz, penambat logik kekal dalam toleransi yang dipersetujui selepas pengukuran, setiap kursor diminta sekali, dan draf mengikut ID melalui susunan semula. Tambahkan semakan papan kekunci dan pembaca skrin kerana penegasan geometri DOM tidak dapat mengesahkan fokus dan pengumuman.