Производительность Jquery, создающая огромную таблицу динамически

Question

Я хочу создать огромную таблицу, сгенерированную сервлетом Java и отправленную клиенту как ответ ajax. Мои ячейки таблицы:

<td style="background-color:blue;border-color:yellow;" onClick=tableClick(this)>value1</td> 
<td style="background-color:red;border-color:cyan" onClick=tableClick(this)>value2</td> 

Предположим, у нас есть стол с 30 рядами и 40 колонами, который составляет полностью ок. 1000 чел. Когда я отправляю эту строку из java в браузер, я буду использовать для многих сетевых ресурсов и у клиентов будет плохой способ подключения, поэтому вам нужно свести к минимуму контент, отправленный из java. Сначала я кеширую имена цветов с помощью c1: синий, c2: желтый, c3: красный, c4: голубой

На принимающей стороне устройства являются мобильными или ipad или планшетами, поэтому важна рабочая нагрузка процессора. Каков наилучший способ для производительности генерировать таблицу динамически? Как должны регистрироваться действия? Как должны быть установлены цвета?

Вариант1: Используйте JSON-обозначения, такие как

{ {'c1','c2','value1'},{'c3','c4','value2'}.. 

занесения большую строку, содержащую все клетки и установить в таблице только один раз с добавления.

// iterate in the json array and fetch the corresponding background color 
var bgcolor = extractFromJson(row,col); 
tablestring += "<td onclick=tableClick(this) style='background-color:' + bgcolor + ';border-color:' + brcolor + '>cellvalue</td>"; 

// once we have all the cells, then set to the table 
$('#mytable').append(tablestring); 

Вариант: 2 Отправить пустой шаблон для заполнения на приемнике

Java: Строка tableString; Б.Г. является атрибутом цвета фона, уш является атрибут для цветой границы

tableString += '<td bg=c1 br=c4>cellvalue</td>'; 

на стороне браузера, установите эту таблицу строку таблицы контейнер

$('#mytable').append(tablestring); 
// register actions and set colors 
$('#mytable').find('td').each(funtction() { 
    $(this).on('click', function() { tableClick($(this)[0]); }); 
    $(this).style('background-color', getColor($(this).attr("bg"))); 
    $(this).style('border-color', getColor($(this).attr("br"))); 

Answer 1

Вариант 1 был бы лучшим подходом. Операции DOM, как правило, очень медленные. В первом варианте вы создаете строку и затем, наконец, добавляете один раз. С другой стороны, в Варианте 2 вы выполняете операцию DOM для каждой строки, что делает ее неэффективной. Я считаю, что вариант 1 лучше.

Answer 2

относительно вашей обработки событий, вы должны использовать event delegation. Вместо обработчика в строке вы должны иметь один обработчик. В JQuery:

$('#mytable').parent().on('click', 'td', function(ev) { 
    tableClick($(this)[0]); 
}); 

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

Поэтому создание DOM должно быть подготовлено на сервере. Поскольку вы используете Java, я не вижу причин не использовать некоторые технологии на стороне сервера. для генерации HTML (вручную, JSP, Facelets, Velocity, ...). Это сделает работу клиента намного легче, чем вы хотели.

Если это невозможно, at least use DOM API (as stated in the other answer). Вам следует избегать создания на основе строки ..

Answer 3

вы должны петли через JSON, как этот

for(var i = 0; i < json.length; i++){ 
    $('<td/>').style({ 
     backgroundColor: getColor(json[i][0]), 
     border: getColor(json[i][1]) 
    }) 
    .html(json[i][2]) 
    .click(function(){ 
     tableClick($(this)[0]); 
    }).appendTo("#mytable"); 
}