Привет, тебе опытный разработчик. Помоги справиться со следующей задачей.
Есть таблица с ячейками. Ячеек может быть 50000. Представим, что эти ячейки нужно заполнить инпутами: в зависимости от модели данных, это могут быть
textarea,
input или
select.
Условие в том, что рендерить ячейки построчно нельзя. Можно только рендерить поле в ячейку.
Я использую шаблонизатор lodash и подтягиваю шаблон с инпутами, в зависимости от входной модели срабатывает тот или иной кусок шаблона и ренедерит select/input/textarea.
После целого дня дебаггинга я сделал следующие выводы:
- Если мы грузим все это синхронно то:
- браузер висит,
- пользователь думает, что все сломалось,
- вентилятор компьютера думает, что мы играем в
Crysis GTA V Far Cry 4. - Время рендера t.
- Если мы запускаем каждый рендер в
setTimeout(render, 0), браузер отзывчив, поля появляются как бешеные, но появляются долго. Время рендера 3-4×t
- Время рендера одного поля от 5 до 7ms, время провиса между рекурсивными запусками setTimeout() — 25-35ms (!!!). Вот это неожиданно.
- Делаем рендер пачками. Для своего компа нашел опытным путем значение в 30 шт.. Время рендера уменьшилось, равняется 1,5-2×t
Вопросы:
- как уменьшить интервал между вызовами SetTimeout() ? с 30 ms до хотя бы 4ms
- Как уменьшить время рендера одного поля?
- Доля пользователей, имеющих 50000 полей мала. Они могут подождать, это интранет. 95% пользователей имеют 1000-2000 полей, и совершенно не хочется для основной массы ставить лоадер на 20-30 секунд, а свести его к минимуму, используя индикацию процесса рендера (которая тоже добавляет 10% к процессорному времени).
- Читал, что есть так-называемые web-workers, помогут ли они решить эту проблему? Как распараллелить вычисления?
P.S.: понятное дело, задачу можно решить иначе. Генерировать сервером, генерировать построчно таблицы. Но. Давайте посмотрим на это дело
как на олимпиадную задачу, когда нельзя менять условия. Вот есть 50к полей, вот есть такая задача, Как выжать все соки?
