Проблема с производительностью при использовании .html (htmlString)

Question

Мне нужно отобразить огромную таблицу (содержащую сотни записей).

Таблица берется сервером с вызовом XmlHttpRequest.

Запрос XmlHttpRequest длится около 2 секунд (строка размером около 2 МБ).

Рендеринг таблицы с использованием $('#divCont').html(htmlTableString); длится около 20 секунд в зависимости от веб-браузера.

$.ajax({
  url: "/getTable",
  success: function(data){
    $('#divCont').html(data);
  }
});

Любое предложение уменьшить время рендеринга htmlTableString

Answer 1

2 Мб за 2 секунды? Это довольно быстро. Вы работаете локально или на обычном развернутом сервере?

На вашем месте я бы разбил запрос на множество меньших. И добавьте их с помощью appendChild и .setTimeout, чтобы браузеры не блокировались.

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

Answer 2

Мне нравится идея разбить запрос на множество меньших по клиентской части.

Проблема заключалась в том, чтобы найти разумный способ разбить большую строку (всего одну строку) на куски, чтобы постепенно добавлять записи в таблицу, используя appendChild и .setTimeout.

Решение обобщено в этом коде:

$.ajax({
        url: "myUrl",
        cache: true,
        async: true,
        success: function(data){
            setContenentInTable(data);
        }
});

function setContenentInTable(data){
var chunkLength             =   2500;
var chunkNum                =   Math.floor(data.length/chunkLength);
for(var i=0,i less chunkNum+1;i++){
     var contentChunk   =   iovContent.slice(start,stop);
     setTimeout(function(x){
         $('.myTable01').append(x);
     contentChunk, 300*i}
}

Answer 3

Я думаю, что единственное разумное решение для этого:

• Захватить данные кусками (например, 100 строк / на запрос) в JSON
• Вставить их в таблицу, используя DocumentFragment гдевозможно
• обрабатывать события прокрутки и загружать больше данных, как только это понадобится пользователю (прокрутка до конца таблицы).

Answer 4

Отправьте все данные в формате json и проанализируйте их с помощью html.

Анализ такого большого количества данных в javascript займет время.Поэтому отправляйте данные в виде разделенного кода JSON.

JSON сэкономит много памяти.

Если вы используете PHP, используйте json_encode ($ data);

Также для оптимизации загрузки данных добавьте элемент js в конец тега body.Непосредственно перед тем, как /body.

<script src="mydata.js"></script>
</body>

, добавив его в конце body, делает DOM доступным для заполнения.добавление его в head задерживает загрузку DOM до тех пор, пока не будет загружена эта js.

Answer 5

Рендеринг таблиц всегда будет проблемой независимо от того, насколько вы оптимизируете.IE особенно не собирается отображать таблицу, пока не найдет конечный тег таблицы.Если вы не используете пагинацию на стороне клиента (TableSorter), я бы предложил использовать Div вместо использования Table.Если вам нужно использовать таблицы, то я бы предложил гибридную нумерацию страниц на стороне сервера (клиент с числами на страницах .... сервер, использующий следующий пакет или что-то подобное)

HTH

Answer 6

Этот вопрос находится на веб-странице, которая занимает около 9 КБ.Ваша HTML-строка размером 2 МБ почти в 228 раз больше.

Я думаю, что достаточно 20 секунд, чтобы проанализировать ее, вставить в DOM и визуализировать ее графически.

Вместо этого рассмотрим не делая этого .Страница результатов или что-то.

Answer 7

, если можете, ограничьте это. 2MB действительно большой размер. Я думаю, что это зависит от компонентов вашего компьютера.

Answer 8

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