Tag Archives: Cache

Coitado do cache em JavaScript

1 Resposta

[TL;DR versão: utilizamos cookies para armazenar os resultados de chamadas assíncronas; processar os resultados das últimas chamadas assíncronas imediatamente e em seguida, validá-los após o carregamento da página.]

Tenho trabalhado no site de intranet do SharePoint para um cliente que apresenta, entre outras coisas, uma navegação secundária estilizada, cujas opções de menu são gerenciadas através de uma lista personalizada velha regular.  A idéia é que o cliente obtém controle menu do "seu" site sem afetar ou ser afetado pela navegação global, por isso.

(Há algo de incrivelmente subversiva sobre a adição de um CEWP que aponta para um arquivo HTML que carrega alguns CSS e JS fundamentalmente alterar quase tudo sobre o comportamento de um site... mas isso é para outro post)

O código para esta bem simples:

O local dolorido, aqui é que toda vez que alguém bate uma das páginas do site, navegador da web do usuário que está tentando para obter os itens da lista.  Uma vez que o colaborador é completo e teste provou coisas para ser estável e completa, Essa chamada não é necessário mais do que 99% o tempo desde o menu raramente muda.  Também tem um estranho efeito de interface do usuário que é comum este admirável mundo novo de hiper-ajaxy web sites – processa a página e só então é que o menu render.  É nervosa e distraindo na minha opinião.  E nervoso. Assim, armazenamento em cache. 

Eu modifiquei a lógica desta forma:

  • Procure um cookie no navegador que contém o menu como última li-
    • Se encontrou, torná-lo imediatamente.  Não espere terminar o carregamento da página.  (Você precisa ter certeza de que seu HTML é estrategicamente colocado aqui, Mas não é difícil de fazer).
  • Esperar a página terminar de carregar e fazer async chamada para carregar itens de menu de uma lista usando o resto ou Lists. asmx ou qualquer outro
  • Comparar o que eu tenho contra o cookie
    • Se combina com, PARAR
    • Caso contrário, usando jQuery, popular dinamicamente um bando se <Li>está em um <UL>
  • Usar CSS para fazer toda a formatação
  • Lucro!

Alguns de vocês vão dizer, "Ei! Não há verdadeiro cache aqui desde que você está lendo o menu Enfim cada vez que.”  E você está certo-eu não vou dar o servidor qualquer tipo de pausa.  Mas porque a chamada é assíncrona e acontece após a página inicial carga HTML totalmente processa, "parece" mais ágil para o usuário.  O menu processa muito tanto quanto desenha a página.  Se o menu acontece para a mudança, o usuário é submetido a uma re-desenhar nervoso do menu, Mas só uma vez.

Existem algumas maneiras de tornar mais eficaz esta cache e ajudar o servidor ao mesmo tempo:

  • Colocar em uma regra que o cache de"cookie" é válido por um período mínimo de 24 horas ou algum outro período de tempo. Enquanto não há nenhum cookie expirado, Use o instantâneo de menu do cookie e nunca bateu o servidor.

Bem... isso é tudo o que vêm à mente agora :). 

Se alguém tiver alguma idéia inteligente aqui eu adoraria conhecê-los.

E por último – esta técnica pode ser usada para outras coisas.  Página do cliente, este tem uma série de coisas orientado a dados em várias páginas, muitos deles relativamente raramente mudando (como uma vez por semana ou uma vez por mês).  Se você destinar a áreas específicas de funcionalidade, Você pode dar uma interface de usuário mais responsiva puxando o conteúdo da loja do cookie local e tornando-se imediatamente.  Parece mais rápido para o usuário, mesmo se você não está salvando o servidor qualquer ciclos.  Você pode Salve os ciclos de servidor por decidir em algumas condições e gatilhos para invalidar esta cache local de cookie.  Isso é tudo situacional e artsy coisas e realmente a coisa mais divertida :). 

</fim>

undefinedSubscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin