Cara membuat daftar hingga 10000 elemen dengan benar.
Teknologi pemuatan drop-down tak terbatas memungkinkan pengguna untuk menggulir dan melihat di depan sejumlah besar blok konten. Metode ini adalah terus memuat konten baru saat Anda menggulir ke bawah.
Saat Anda menggunakan pengguliran sebagai metode utama untuk menemukan data, itu dapat memungkinkan pengguna Anda untuk tetap di halaman web lebih lama dan meningkatkan keterlibatan pengguna. Dengan popularitas media sosial, sejumlah besar data dikonsumsi oleh pengguna. Gulir nirkabel menyediakan cara yang efisien untuk memungkinkan pengguna menelusuri sejumlah besar informasi tanpa harus menunggu halaman tersebut dimuat sebelumnya.
Jika kita mengubah cara berpikir kita, jika ada 10.000 komponen kolom lurus pada halaman, bagaimana kita bisa menggunakan 5 komponen untuk secara dinamis membuat seluruh halaman?
LarutanDalam optimalisasi daftar panjang, kami memiliki banyak solusi, seperti paging, pemuatan malas, dll. Ada interaksi yang sangat baik (gambar chrysanthemum), sehingga pengguna dapat menunggu. Rencana ini juga sangat sukses.
Bagaimana cara menemukan cara lain?
1. Dalam penerapan halaman tunggal, dapatkah kita menganalisis skema paging sekali, dengan 10 elemen per halaman, dan 10 elemen per halaman diterjemahkan sesuai dengan
2. Dapatkah kita menggunakan braket untuk mendukung seluruh panjang daftar saat layar menggulir ke posisi yang sesuai dan membuat 10 elemen yang sesuai
Masalah berkedipKetika kami menerapkan ide ini, akan ada masalah yang berkedip -kedip. Karena peristiwa pengguliran sering terjadi, kami menemukan bahwa elemen yang kami lihat terus -menerus mengecat ulang, karena kami menemukan sepuluh elemen mana yang perlu diterjemahkan di setiap cutscene, dan kemudian menggantinya secara langsung.
Idenya di sini adalah bahwa ketika saya melihat posisi layar, saya akan membuat 10 dan kemudian 10 ke atas dan ke bawah, dengan total 30. Ketika mengendalikan rendering, saya selalu mengganti elemen atas atau bawah, sehingga bagian yang dapat kita lihat di tengah tidak akan dicat ulang dan diterjemahkan. Hanya saja data yang telah dirender yang telah ditarik kembali.
prinsipMenerapkan komponen yang dapat menampilkan daftar N item dengan ukuran jendela tetap dari 5 elemen: yaitu, kapan saja, hanya ada 5 wadah DOM pada elemen gulir N tak terbatas.
<ul> <Li style = transform: translate3d (0px, 0px, 0px);> ... </li> <Li style = transform: translate3d (0px, 60px, 0px);> ... </li> </ul>
Misalnya: 100 elemen, 5 ditampilkan di halaman beranda. Inisialisasi [0,1,2,3,4] 5 <li> ini perlu diterjemahkan. Ketika saya menggulir ke bawah sedikit, [1,2,3,4,5] <li> ini perlu diterjemahkan. Pada saat ini, jangan secara langsung mengganti keseluruhan, hanya persyaratan perbedaan yang harus diganti. Strukturnya harus [5,1,2,3,4]. Karena itu adalah posisi absolut, itu akan dipisahkan dari aliran standar. Redraw tunggal tidak akan mempengaruhi empat lainnya, sehingga meningkatkan kinerja.
Bagaimana mengimplementasikannya <! Doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = perangkat-lebar, skala awal = 1.0> <meta http-equiv = konten yang kompatibel dengan x-ua = IE = edge> edge> edge> edge> src = https: //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <itement> dokumen </iteme> <tyle> body, ul, li {margin: 0; Padding: 0; List-style: tidak ada; } ul {position: relatif; } ul li {position: absolute; TOP: 0; Lebar: 100%; Tinggi: 31px; Line-Height: 32px; Border-Bottom: 1px solid #CCC; } </tyle> </head> <body> <ul> </ul> </body> <script> // total wadah var list = []; // elemen dalam rentang visual var showlist = []; // render container var renderlist = []; // Tinggi masing -masing wadah var lineHeight = 32 // inisialisasi 1000 elemen untuk (var i = 0; i <1000; i ++) {list.push ({id: i, teks: 'th' + (i + 1) + 'elemen', atas: i * lineHeight, contom bawah: (i + 1) * lineHeight}). 'height:' + 1000 * lineHeight + 'px') // Find the function render(top, bottom) of the initial container { showList = [] // Mark which data is repeated with the rendered after it is rendered, this part will not be rendered repeatedly var sameIndex = [] // Find out which element to scroll position var currentIndex = 0 for (var i = 0; i < list.length; i++) { var item = daftar [i] if (item.top <= window.scrolly && item.bottom> window.scrolly) {currentIndex = i; merusak; }} var range = 0 // Temukan elemen yang akan ditampilkan masing -masing naik dan turun dalam elemen yang saat ini ditemukan, sampai jumlah total mencapai 35 sementara (kisaran <100 && showlist.length + SameIndex.length <35) {if not the Renders, dan rentangnya, dan rentangnya di rendering, dan rentangnya di rendering, dan rentangnya di rendering, dan rentangnya, jika mereka ada di rendering, jika ada di render, jika mereka ada di rendere, jika mereka ada di rendere, jika ada di rendere, jika mereka ada di rendere. SHOWLIST pada waktu itu, ganti elemen yang tidak ditandai IF (renderlist.includes (daftar [CurrentIndex - range] .id)) {// SameIndex.push (CurrentIndex -range) SameIndex.unshift (renderlist.IndexOf (Daftar CurrentIndex (Range] .id))} else {showlist.insshift (list [CurrentIndex). <list.length && range! = 0) {if (renderList.includes (daftar [CurrentIndex + range] .id)) {SameIndex.push (renderList.Indexof (Daftar [CurrentIndex + Range] .id)} else {showList.push (daftar [luseindex + range]}} {showlist. elemen yang tidak ditandai if (renderlist.length> 0) {for (var i = 0; i <renderlist.length; i ++) {if (! SameIndex.includes (i) && showlist.length) {renderlist [i] = showlist.shift (). Id $ ('ul li'). EQ (i) .html (Daftar [renderlist [i]]. ID +DAFTAR [rendering [i]. Daftar [renderlist [i]]. Top + 'px, 0px);')}}} else {// inisialisasi daftar untuk pertama kalinya renderlist = showlist.map (function (val) {return val.id}) renderlist.map (function (key) {$ ('ul'). append ($). Daftar [KEY] .TOP + 'PX, 0PX);>#' + Daftar [KEY] .ID + DAFTAR [KEY] .TEXT + '</li>'))})} console.log (renderlist)} // rendering render pertama () $ (window) .scroll (function (e) {render ()}}); TodoPoin -poin penting
Di atas adalah semua konten artikel ini. Saya harap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.