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…