Помогают ли шаблоны JSON загружать контент через AJAX и повышать производительность?

Question

Мы работаем над динамической информационной панелью, которая очень похожа на панель настроек твиттера под нашей учетной записью в твиттере. Поскольку на этой панели есть много элементов управления, динамически заполняется много контента. Так что в настоящее время мы так и делаем.

Это одно меню в моей левой панели:

<a href="javascript:void(0);" onclick="fnGetFiles();">Files</a>     

Это функция, которая вызывает HTML:

function fnGetFiles(){
  $('#mainDashboard').html('<div class="rightContainer"><div class="tabLoader"></div></div><div class="clear"></div>');
  $.get(USER_DASHBOARD+'file_share/files.php',function(data){
  $('#mainDashboard').html(data);
});

Таким образом, мы в основном прикрепляем (добавляем) непосредственно HTML. Но я только что прошел через панель управления Twitter
Во-первых, это обработка URL, которую они выполняют для навигации между различными меню слева (добавлено изображение для справки). Это просто изменяется на лету, и содержимое загружается. При проверке кода я заметил, что они отправляют html в виде строк JSON.
Я не совсем уверен, но это как-то повышает производительность? У меня немного плохая производительность, и я хотел бы точно знать, какие фреймворки я могу использовать для достижения чего-то похожего на это (также я сталкиваюсь с конфликтующими проблемами AJAX между скриптами Я использую PHP, JQuery для моего приложения.
Я пытался получить информацию от https://dev.twitter.com// и блога, но не смог найти никакой конкретной информации по этому вопросу.
Пожалуйста, если возможно, попытайтесь направить меня и пролить немного света на это.
Спасибо за ваше время.

Answer 1

Ваш HTML, JavaScript, изображения и другие клиентские элементы все статичны. Они должны оставаться такими. Вам не нужно создавать какие-либо элементы динамически в JavaScript.

Ваши AJAX-вызовы просто должны прекратиться, получить данные, необходимые для заполнения вашего HTML, и добавить эти данные в DOM. JSON / XML похож на протокол:

Протоколы связи должны быть согласованы заинтересованными сторонами.

Для вашего JS > PHP > JS JSON - это отличный "протокол" (согласованный метод связи), потому что он устанавливает стандарт, а вы просто используете json_encode() / json_decode() в вашем PHP, и $.parseJSON() если вы используете JQuery. Использование JSON - это просто согласованный формат обмена сообщениями, который, как разработчик, вы должны использовать, потому что это "стандарт".

Вы не хотите отправлять по сети дополнительные данные, которые вам не нужны. Не отправляйте HTML, если вам не нужно. Запрос и ответ только с теми данными, которые вам нужны.

Не вдаваясь в подробности разглагольствования здесь, есть много замечательных инструментов, которые помогут вам делать подобные вещи. Например, AngularJS позволяет автоматически обновлять DOM с помощью JSON, возвращаемого с сервера, с помощью таких операторов, как ng-repeat, По сути, это означает, что вам не нужно писать какой-либо пользовательский JavaScript для заполнения элементов DOM данными, полученными с сервера (что в настоящее время делают и ваша панель, и моя панель).

Кроме того, я использую веб-сокеты, потому что запуск AJAX-запросов на данные в реальном времени - это не то, для чего эти AJAX-запросы созданы. Если вам нужны данные каждые 5–10 секунд, хорошо, но не чаще, чем это, и вам нужна какая-то двунаправленная технология, такая как веб-сокеты, которая потребует от вас изучения React PHP и реализации чего-то вроде Ratchet (когда вы его заработаете) Впрочем, это круто).

Во-первых, договоритесь о "протоколе", который будут использовать как ваша сторона клиента, так и сторона сервера. Затем отправляйте и получайте только те данные, которые вам нужны, и те, которые меняются. Все остальное статично и будет только расходовать пропускную способность. Не передавайте HTML. Наконец, по скорости, отправка JSON вместо отправки простого текста - это зависит буквально от длины отправляемых символов. Вот и все. В любом случае, эти выгоды в любом случае настолько незначительны, что вам не нужно о них беспокоиться, если только вы не отправляете HTML, а это не так. Ты.