Как правильно асинхронно загрузить данные в большую html-таблицу?

Question

[Crash]

Имеется html-таблица. Достаточно большая, как минимум 30 столбцов и 30 строк. В ячейках данные, полученные из БД.
Как можно догадаться, чтобы получить данные для ячеек, нужно сделать соответствующий запрос в БД по определенным критериям. Соотвественно выходит около 900 записей, которые единовременно нужно отрендерить. Это очень сильно тормозит загрузку страницы, а она должна загружаться быстро. Как можно решить эту проблему?

Слать кучу аякс-запросов после загрузки самой страницы тоже на вариант как я понимаю.

Comments

[Exploding]

30 столбцов и 30 строк. ... Соотвественно выходит около 900 записей

Я всегда думал, что 30 строк - это 30 записей, а 30 столбцов - это 30 полей... Странная у вас таблица, однако.

[Crash]

Exploding, каждая ячейка - инфа с определенной записи в таблице БД. Соответсвенно ячеек столько, скольки и самих записей.

[Алексей Склейнов]

не вижу проблемы, и соответственно вопроса. если данные получаешь по аякс, то получай массив с базы на страницу и распределяй в таблице. не обязательно построчно обрабатывать. если каждая строка-отдельный запрос к бд... - глупо. есть варианты с json, нужно смотреть что лучше подходит для твоей задачи

[Exploding]

Crash,

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

Я вовсе не троллю, действительно - не очень понятно, о каких временных интервалах идет речь. Можно уточнить?

[dollar]

Для начала нужно с помощью профайлера определить, что занимает больше времени.
Может, тормоза на стороне сервера.
И если нужно единовременно, то почему асинхронно? Пусть все данные прямо в страницу и встраиваются при загрузке страницы.

Answer 1

[Andrew]

Загрузилась страница->Совершилось действие(завершение загрузки страницы, допустим)->Ajax запрос к серверу->Ответ от сервера и получение массива с записями -> Рендер в нужном виде.
Как еще это может работать?

Слать кучу аякс-запросов после загрузки самой страницы тоже на вариант как я понимаю.

То есть? Откуда страница(сервер) знает какие вам записи нужны? Или предполагается, что на этой странице уже известны нужные записи в таблице?

Answer 2

[Exploding]

Получая данные и в цикле делая что-то типа:
$("td:eq("+i+")").html(data[n]);
мы каждый раз заставляем браузер перерисовывать страницу с учетом новых изменений, что естественно - долго.
Но если в этом цикле просто генерить html, не выводя его, а формируя итог в переменной (table_lines например), а по завершении цикла:
$("table").html(table_lines);
Все должно ускориться в разы.

Answer 3

[PloAl]

Тормоза обычно бывают, при попытке собрать все в одну большую строку.
После получение запроса БД, запишите в файл html построчно, а после отправляйте html из файла.
Также можно на клиенте добавлять строки через метод appendChild.