1. Wstęp
W dniu dzisiejszym w naszej firmie odbył się konkurs programistyczny. Prowadzący przedstawił ciekawe wyzwanie: Jak szybko wyrenderować 100 000 elementów danych na stronie, nie powodując opóźnień?
Jako uczestnik próbowałem przedstawić swoje rozwiązanie.
Początkowo próbowałem użyć pętli for
, ale wyniki były niezadowalające, ponieważ na stronie występowały znaczne opóźnienia.
To podejście nie spełniło wymagań.
Oto początkowy kod:
<!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>
Wyniki działania strony były słabe.
- Renderowanie trwało ponad 3 sekundy, powodując niecierpliwość użytkownika.
- przewijanie prowadziło do pustych sekcji.
To podejście nie sprawdziło się, co spowodowało potrzebę opracowania nowego rozwiązania.
2. Korzystanie z timerów i renderowanie paginacji
Pomyślałem o użyciu timerów i renderowania paginacji, aby zoptymalizować powyższy kod. Oto ulepszona wersja:
<!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…