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…