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…