Проблема производительности Javascript с длинной страницей

Question

Я работаю с действительно длинной страницей с более чем 3400 пунктов. Каждый из этих элементов имеет форму с 3 кнопками, и к каждой форме прикреплено событие нажатия jQuery $.on(). Я думаю, что это является причиной моих проблем (медленный ответ при наведении, долгое время рендеринга страницы) в IE8 с режимом IE7 Document. Когда я выбираю $('button'), я получаю более 10K элементов.

Страница визуализируется с использованием быстрой библиотеки шаблонов DoT.js из объекта JSON, которая может иметь глубину около 6 уровней.

Есть идеи, что может быть моей проблемой?

Answer 1

Из моего опыта IE7 и IE8 очень медленные. IE9 лучше, IE10 приемлем.

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

Из того, что вы описываете, скорее всего, снижение производительности не в вашем коде JavaScript. Если всплывающие события занимают много времени, это означает, что браузер работает медленно.

Answer 2

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

Вы не упомянули структуру ваших элементов DOM, но для примера предположим, что вы сейчас подключаете обработчики событий с помощью:

$('.myform').on( 'click', function() { /*...*/ } );

где myform это имя класса в каждой из ваших форм.

Теперь предположим, что эти формы вложены в родительский элемент с id="formparent". Все, что вам нужно сделать, это изменить код на:

$('#formparent').on( 'click', '.myform', function() { /*...*/ } );

Это действительно так просто.

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

Answer 3

Вы пытались удалить JavaScript, чтобы увидеть, как работает страница? Если вы не можете удалить его, отключите его в браузере и посмотрите, как это повлияет. Если ваша страница работает быстрее, то вы знаете, что нашли часть проблемы.

Прослушивателей событий более 3400 - это много, вы можете попробовать переписать javascript, чтобы делегированный обработчик событий находился выше в DOM. У вас есть 3 кнопки, поэтому, возможно, делегируйте трех слушателей и передайте элемент формы, по которому щелкнули, функции обработки. Кроме того, трудно понять, есть ли другие проблемы с производительностью JavaScript, не зная, что делает остальная часть вашего кода.

Фритс также прав, что IE7/8 медленный и если производительность является приоритетом, было бы полезно рассмотреть рендеринг меньшего количества элементов за раз.