Какой путь выбрать для оптимизации ооочень большой страницы с кучей инпутов?

Приветствую.



Есть страница сервиса. На ней есть много инпутов, span с числами, кнопок. По кнопкам происходят действия, например:

• заполнение всех инпутов определенного класса значением из другого инпута значением
  
• обхода инпутов, сбора их значений и data-атрибутов в массивы, отправка аяксом на сервер
  
• отправка аяксом только выделенных строк или строк, сгруппированных по родителю (типа раздела)
  

Проблема в том, что строк (дивов с пятью инпутами, кучей другого html) больше 18 000. Пока строк было несколько сотен, всё работало быстро. Но теперь во-первых, шаблонизатор (Smarty) генерирует страницу за ~8 секунд, html на выходе весит >80 мегабайт, всё это грузится по полторы-две минуты и еле как скроллится в браузере. К тому же, при некоторых действиях, упираюсь в js ошибку maximum call stack size exceeded. Конечно на сервере есть gzip сжатие, но не особо оно и помогает.



Очевидно пора что-то менять :)



Возможные варианты:

• Отдавать с сервера на клиент .json с голыми данными, на клиенте формировать контролы с помощью jQuery Templates.
  
• Пытаться сократить количество элементов в html. Возможно будет выигрыш, но, кажется, совсем небольшой.
  
• Пагинация. Но отметается, т.к. в массовых операциях, ctrl+f и подобном самый кайф.
  
• Последний в моём списке, но наверняка первый по приоритету пункт: сейчас у меня например такие конструкции: $(selector).on('click', function(){// some code});. Как следствие, около тысячи обработчиков. И таких тысяч больше одной. Очевидно, что нужно переписать это на

  $('body').on('click', selector, function(){// some code});

  
  

У кого есть опыт, знания, подскажите, рационально ли вообще применять здесь jQuery Templates, какие стратегии нужно применять при работе с таким количеством данных, элементов и обработчиков. Очень не хотелось бы переписать всё на json+templates и обнаружить, что грузится оно за 3 секунды, но рендерится 40.



Заранее спасибо.