Pergunta

Estamos trabalhando em um painel dinâmico que é muito semelhante ao painel de configurações do Twitter em nossa conta do Twitter. Como o painel tem muitos controles, há muito conteúdo preenchido dinamicamente.

Este é um dos menus no meu painel esquerdo:

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

Esta é a função chamada que obtém o 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);
});

Basicamente, anexamos (anexamos) diretamente o HTML. Mas acabei de passar pelo painel do Twitter enter image description here
O primeiro é o tratamento de URL que eles fazem para navegar entre os diferentes menus à esquerda (imagem adicionada para referência). inspecionando o código notei que eles enviam html como strings JSON.
Não tenho certeza, mas isso melhorar o desempenho de alguma forma?O meu é um pouco ruim na produção e gostaria de saber exatamente quais frameworks posso utilizar para conseguir algo semelhante a isso(Além disso, enfrento problemas conflitantes de AJAX entre scripts).Estou usando PHP, jquery para minha aplicação.
Tentei obter informações de dev.twitter.com,e blog mas não consegui encontrar nenhuma informação específica sobre isso.
Por favor, se possível, tente me orientar e lançar alguma luz sobre isso.
Obrigado pelo seu tempo.

Foi útil?

Solução

Seu HTML, JavaScript, imagens e outros elementos do lado do cliente são todos estático.Eles deveriam continuar assim.Você não precisa criar nenhum elemento dinamicamente em JavaScript.

Suas chamadas AJAX só precisam ser desligadas, obter os dados necessários para preencher seu HTML, e adicione esses dados ao DOM.JSON/XML é como um protocolo:

Os protocolos de comunicação devem ser acordados entre as partes envolvidas.

Para seu JS> PHP> JS, JSON é um ótimo 'protocolo' (método de comunicação acordado) para escolher porque define um padrão, e você apenas usa json_encode() / json_decode() em seu PHP, e $.parseJSON() se você estiver usando jQuery.Usar JSON é apenas um formato de mensagens acordado que, como desenvolvedor, você deve se comprometer a usar porque é um 'padrão'.

Você não deseja enviar dados extras desnecessários pela rede.Não envie HTML a menos que seja necessário.Solicite e responda apenas com os dados que você precisa.

Sem entrar em muito discurso aqui, existem muitas ferramentas incríveis por aí para ajudá-lo a fazer coisas como essa.AngularJS, por exemplo, permite atualizar o DOM automaticamente com JSON retornado do servidor, através do uso de instruções como ng-repeat.Basicamente significa que você não precisa escrever nenhum JavaScript personalizado para preencher elementos DOM com dados recuperados do servidor (que tanto seu painel quanto meu dashboard estão fazendo atualmente).

Além disso, estou usando websockets, porque disparar uma carga de solicitações AJAX para dados em tempo real não é a finalidade dessas solicitações AJAX.Se você só precisa de dados a cada 5 a 10 segundos, tudo bem, mas com mais frequência do que isso e deseja alguma tecnologia bidirecional como websockets, que exigirá que você aprenda React PHP e algo como Ratchet para implementar (quando você começar a trabalhar , no entanto, é incrível).

Primeiro, combine um 'protocolo' que tanto o lado do cliente quanto o lado do servidor usarão.Então, envie e receba apenas os dados que você precisar, e aquilo que mudanças.Qualquer outra coisa é estática e só desperdiçaria largura de banda.Não distribua HTML.Finalmente, em termos de velocidade, enviar JSON vs.enviando texto simples - depende literalmente do comprimento dos caracteres que você está enviando.É isso.Independentemente disso, esses ganhos são tão insignificantes que você não precisa se preocupar com eles, a menos que esteja enviando HTML, o que não é verdade.Você é.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top