я делаю так. все состоит из блоков, где каждый блок это какое-то хтмл, к которому прилагается свой джаваскрипт, который на этот блок лично навешивает всякие обработчики. есть два случая: загрузка страницы целиком (то есть всех блоков со всеми своими джаваскриптами) и перезагрузка отдельных блоков в фоновом режиме (аджаксом так называемым). в первом случае собственно загружается страница и по готовности отрабатывают все скрипты, которые прилагаются к блокам из которых она состоит. во втором блок загружается на страницу (вставляется в нужное место, реплейсится, аппендится или еще как) и опять же отрабатывают его скрипты (именно его а не все). если в этих скриптах есть биндинги событий, то их сначала нужно отбиндить, потому что блок может перезагружаться сколько угодно раз и с каждым разом события будут навешиваться повторно и нажатие на кнопку будет слать не один запрос а столько сколько раз был перезагружен блок. никогда не было доверия ко всяким .on() .live() и тд. проще и надежнее заменить кусок кода на странице и заребиндить все что его касается.
дополнительное преимущество такое, что вся логика происходит на стороне пхп, а на стороне браузера только работа с домом, никаких вычислений, ну либо только такие, которые не будут теряться после перезагрузки блока или заставлять писать одно и то же 2 раза. только простые манипуляции и отработка событий которые будут сообщать серверу об изменениях. например, какая-нибудь форма отправки заказа, сколько ужаса я повидал, когда условия доставки рассчитываются на странице джаваскриптом а потом это отправляется на сервер (то есть я могу подменить стоимость в запросе) или на сервере подобный алгоритм считает все это еще раз чтоб типа проверить, в результате имеется зеркало алгоритма на другом языке и что-то менять нужно в 2 местах ломая голову. или жмем случайно ф5 и все слетает потому что о данных в полях кроме страницы никто не знал. как правильно в данном случае (имхо конечно же), допустим форма такая, 2 поля имя и телефон и один переключатель доставка/самовывоз. делаем для нее в сессии массив которых способен хранить состояние этих полей и переключателя, задаем дефолтные значения там же. при загрузке страницы с этой формой она просто выводится со значениями которые находятся в сессии. к ней прилагается джаваскрипт который ребиндит событие кейап на полях и событие клик на переключателе. по событию кейап отправляется значение поля чтоб сохранить его в сессии (в ответ ничего не происходит, здесь не нужно). по клику на переключателе так же шлется запрос который меняет в сессии его состояние и в ответ перезагружается вся форма (на основании актуальных данных в сессии) и все на ней заново ребиндится. не знаю смог ли объяснить, короче проще всего отправлять каждый пук пользователя на сервер, обработать его там, и перезагрузить нафиг всё на что он мог повлиять.
все эти килобайты и миллисекунды полная ерунда, все споры на эту тему это отстаивание своих знаний определенных технологий. как по мне если программа на пхп то вся логика в пхп и должна происходить а джс только обслуживать интерфейс и не более того