Существует два основных способа повысить производительность при работе с большими html-страницами - уменьшить количество повторений страниц и уменьшить количество обработчиков.
1. Уменьшить количество повторений страниц
Каждый раз, когда вы вносите изменения в DOM, он должен сам перерисовываться. Это рефлоу. Сведите их к минимуму, создав строку или фрагмент DOM со всеми вашими манипуляциями с DOM, а затем вставив их на свою страницу. Это вызовет только один рефлоу. Например, если вы добавляете таблицу, создайте всю таблицу с текстом в ней, как и должно быть, затем вставьте ее в одну операцию.
JQuery позволяет вам создать фрагмент DOM следующим образом:
var table = $('<table></table');
Вы можете манипулировать своим фрагментом стандартными способами:
var line = $('<tr><td>Some Data</td></tr>');
line.css('color','red');
table.append(line);
Затем, когда фрагмент будет завершен, добавьте его в DOM за один шаг:
$('body').append(table);
вы запустите только один перекомпоновка, и процесс будет на несколько порядков быстрее.
2. Уменьшить количество обработчиков
Если у вас много элементов управления в каждой строке, это много обработчиков. Вместо этого создайте только один обработчик и присоедините его к корневому каталогу документа, а затем, когда он будет вызван, проверьте целевой атрибут, чтобы узнать, что делать. В JQuery вы можете использовать новые обработчики «on» для этого или использовать старые обработчики «live» стиля.
например:
$('table td').on('click', function() {
//do work here
});
Будет создан только один обработчик, который будет обрабатывать все события td click.
Выполните оба этих действия, и вы увидите значительно улучшенную производительность.