Ajax проблема: задержка в получении данных из веб-службы с использованием innerHTML, пожалуйста, руководство

Question

Я работаю над приложением ajax, которое будет отображать около миллиона записей в HTML-таблице.Веб-служба возвращает записи с сервера, я строю строку регистрации, объединяя данные и теги, а затем помещаю эту строку с помощью innerHTML (не используя DOM для повышения производительности).

Для тестирования я поместил 6000 записей в базу данных (хранимая процедура занимает около 4 секунд для завершения ее выполнения).

Во время тестирования в локальной системе (база данных и приложение на одном компьютере) для отображения записей на странице потребовалось около 5 минут.После входа на веб-сервер он не отвечал даже в течение большего времени.Это выглядит очень низкой производительностью.Я поместил записи в файл CSV, и его вес был менее 2 МБ.Я не мог понять, почему конкатенации строк для построения html-таблицы и помещения строки во innerHTML занимают такое огромное время (если это проблема).Требуется показать около миллиона записей на веб-странице, но производительность только 6000 записей разочаровывает.Я не понимаю, что делать, чтобы повысить производительность.

Пожалуйста, помогите мне и помогите мне.

Answer 1

Вы пытаетесь отобразить миллион записей на одной странице? Независимо от того, как вы оптимизируете свой серверный код, это ОЧЕНЬ много HTML для анализа / рендеринга, особенно если он находится в таблице.

Даже использование .innerHTML никогда не спасет вас. Механизму рендеринга все еще придется анализировать / стилизовать / отображать / позиционировать многие миллионы строк / ячеек таблицы, и вам придется подождать, пока он заработает.

Если вам абсолютно НЕОБХОДИМО показывать все эти записи на одной странице, попробуйте разбить вещи на управляемые куски. Сделайте так, чтобы вызов AJAX возвращал (скажем) 100 записей за раз, помещал их в таблицу, затем извлекал еще 100 записей и т. Д. По крайней мере таким образом вы увидите, что содержимое страницы будет расти, а не сидеть. там и подождите, пока 1 000 000 строк таблицы не отобразятся в одном кадре.

Лучшим вариантом было бы сделать постраничное позиционирование, когда одновременно показывается только 100 записей, и вы представляете стандартную навигацию с кнопками << first / prev / next / last >> для переключения между «страницами» данных.

Answer 2

Как сказал Марк, вам нужно сделать нумерацию страниц. Посмотрите, поможет ли это - Как выполнить разбиение на страницы в ASP.NET MVC?

В дополнение к этому вы можете оптимизировать результат, используя шаблон мастер-детализации - извлекать только сводку записи (мастер) и по некоторым действиям в мастере, извлекать детали и отображать на экране. Это уменьшит размер данных, передаваемых с сервера.