1. Introducere
Astăzi, compania noastră a organizat un concurs de programare. Gazda a prezentat o provocare interesantă „Cum să redați rapid 100.000 de elemente de date pe o pagină fără a provoca decalaj?
În calitate de participant, am încercat să ofer soluția mea.
Inițial, am încercat să folosesc o buclă for
, dar rezultatele au fost nesatisfăcătoare, deoarece pagina a înregistrat un decalaj semnificativ.
Această abordare nu a îndeplinit cerințele.
Iată codul inițial:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul id="ul"></ul> <script> let now = Date.now(); const total = 100000; const ul = document.getElementById("ul"); for (let i = 0; i < total; i++) { let li = document.createElement("li"); li.innerHTML = ~~(Math.random() * total); ul.appendChild(li); } console.log("js running time", Date.now() - now); setTimeout(() => { console.log("all time", Date.now() - now); }, 0); </script> </body> </html>
Rezultatul performanței paginii a fost slab.
- Redarea a durat peste 3 secunde, provocând nerăbdare utilizatorului.
- defilarea ducea la secțiuni goale.
Această abordare nu a funcționat, ceea ce a determinat necesitatea unei noi soluții.
2. Utilizarea temporizatoarelor și redării paginației
M-am gândit să folosesc cronometre și randarea paginației pentru a optimiza codul de mai sus. Iată versiunea îmbunătățită:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <ul id="ul"></ul> <script> let now = Date.now(); const total = 100000; const once = 20; const page = total / once; let index = 1; const ul = document.getElementById("ul"); function loop(curTotal…