1. Введение

Сегодня в нашей компании прошли соревнования по программированию. Ведущий предложил интересную задачу: «Как быстро отобразить 100 000 элементов данных на странице, не вызывая задержек?»

Как участник, я попытался предложить свое решение.

Сначала я попробовал использовать цикл for, но результаты оказались неудовлетворительными, так как на странице наблюдались значительные задержки.

Такой подход не соответствовал требованиям.

Вот исходный код:

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

Результат производительности страницы был плохим.

  • Рендеринг занял более 3 секунд, что вызвало нетерпение пользователей.
  • прокрутка приводила к пустым разделам.

Этот подход не сработал, что привело к необходимости нового решения.

2. Использование таймеров и рендеринга страниц

Я подумал об использовании таймеров и рендеринга страниц для оптимизации приведенного выше кода. Вот улучшенная версия:

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