1.Kirish

Bugun kompaniyamiz dasturlash tanlovini o'tkazdi. Uy egasi qiziqarli savolni taqdim etdi: "Qanday qilib 100 000 ta ma'lumotni sahifada kechikishsiz tezda ko'rsatish mumkin?"

Ishtirokchi sifatida men o'z yechimimni taqdim etishga harakat qildim.

Dastlab, men for tsiklidan foydalanishga harakat qildim, ammo natijalar qoniqarsiz bo'ldi, chunki sahifada sezilarli kechikish kuzatildi.

Ushbu yondashuv talablarga javob bermadi.

Mana boshlang'ich 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>

Sahifaning ishlashi natijasi yomon edi.

  • Renderlash 3 soniyadan ko‘proq vaqtni oldi, bu esa foydalanuvchining sabrsizligiga sabab bo‘ldi.
  • aylantirish bo'sh bo'limlarga olib keldi.

Bu yondashuv ish bermadi, bu esa yangi yechimga ehtiyoj tug'dirdi.

2. Taymerlar va sahifalarni ko'rsatishdan foydalanish

Yuqoridagi kodni optimallashtirish uchun taymerlar va sahifalarni ko'rsatishdan foydalanish haqida o'yladim. Mana takomillashtirilgan versiya:

<!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…