Usuário Yahoo! interface Blog (YUIBlog)

No YUI 3 Gallery: O Módulo Preload

10 de junho de 2010 às 07:23 por Caridy Patino | Em Desenvolvimento , YUI 3 Galeria | 2 Comentários

Algumas semanas atrás, Stoyan Stefanov ( @ stoyanstefanov ) publicou o resultado de sua pesquisa sobre componentes pré-carregamento de antecedência, sem executá-los . Esta técnica pode ajudar a melhorar o desempenho de páginas sucessivas que fazem uso dos recursos armazenados em cache.

Para alavancar estes resultados, decidimos portá-lo para YUI 3 com um novo módulo chamado de " galeria de pré-carga ", que está agora disponível através do carregador de YUI.

Vamos ver um exemplo de pré-carga :

  YUI ({
     / / Galeria de última compilação deste módulo
     Galeria: 'galeria-2010.05.05-19-39'
 }). Use ('galeria de pré-carga', function (Y) {
   Y.preload ([
     "Http://tools.w3clubs.com/pagr2/1.sleep.expires.png ',
     "Http://tools.w3clubs.com/pagr2/1.sleep.expires.js ',
     "Http://tools.w3clubs.com/pagr2/1.sleep.expires.css '
   ]);
 }); 

Como é que este módulo de melhorar a experiência do usuário?

Hoje em dia, as aplicações web têm uma pegada grande em termos de JavaScript, CSS e imagens. A maioria dos arquivos em cada uma dessas categorias são estáticos e podem ser servidos através de uma CDN para cacheability. Uma vez que qualquer um desses arquivos é baixado e armazenado em cache, o navegador não precisa baixar o mesmo arquivo em pedidos sucessivos para a mesma página. Mas, ainda assim, temos um grande impacto na solicitação de página inicial.

Estudos recentes sugerem que 0,1 segundo [100ms] é o limite para ter o usuário sentir que o sistema está reagindo instantaneamente; mais do que isso fará com que o usuário impaciente (Jakob Nielsen). O mesmo é verdadeiro para o processo de carregamento. Precisamos fazer a nossa ou aplicações correr rápido, a fim de permanecer à frente das expectativas de nossos usuários.

Com aplicações web como o Facebook ou o Gmail, o usuário geralmente tem que log-in primeiro. Este é um cenário clássico em que "pré-carregamento" faz sentido. Podemos estimar que cada usuário vai gastar entre 5 e 10 segundos interagir com um formulário. Durante esse tempo, nossa aplicação não está fazendo nada. Se podemos usar esse tempo para carregar arquivos em cache no fundo, esses arquivos estarão disponíveis no cache quando o usuário completa o processo de login - porque sabemos onde ele / ela está indo em seguida, nós sabemos exatamente o que ele / ela vai precisar. Em geral, qualquer aplicação web com caminhos de usuário previsível (incluindo fluxos de trabalho de forma) pode aproveitar esta técnica.

Esta técnica não é nova, mas, como Stoyan apontou, é difícil fazê-lo sem executar os scripts ou injetar o CSS ou exibir as próprias imagens, há um custo associado com estas etapas da pós-carga, e que devemos evitar pagar esse custo. Além disso, em alguns casos, esses arquivos não vai jogar bem com a página inicial. , A fim de evitar conflitos e reduzir o tempo para colocar uma solução no lugar, seria preciso garantir que esses arquivos são incluídos no cache sem usá-los na página atual.

Este processo precisa ser completamente inofensivo, e mesmo se o usuário navega ou pára o processo de carregamento antes que os arquivos são baixados e em cache, o retorno é sempre no lugar - a página de destino irá tentar carregar o arquivo diretamente.

O código a seguir mostra como implementar essa abordagem usando a gallery-preload do módulo:

  YUI ({
     / / Galeria de última compilação deste módulo
     Galeria: 'galeria-2010.05.05-19-39'
 }). Utilizar ("evento de foco ',' galeria de pré-carga ', function (Y) {
   / / Espera até que o usuário se concentra em um elemento de entrada para iniciar o carregamento de ativos
   Y.on função ("foco", () {
     Y.preload ([
       "Http://tools.w3clubs.com/pagr2/2.sleep.expires.png ',
       "Http://tools.w3clubs.com/pagr2/2.sleep.expires.js ',
       "Http://tools.w3clubs.com/pagr2/2.sleep.expires.css '
     ]);
   }, ". Myform input.query");
 }); 

Neste exemplo, o script espera até que o usuário se concentra em um dos elementos do formulário de entrada para iniciar o carregamento ativos que serão usados ​​na página do formulário de destino. Isto irá melhorar o tempo de carregamento da página quando o usuário envia o formulário.

Verificar as diferenças entre acessar uma página diretamente, e um conjunto de pré-carregamento YUI 2/YUI 3 componentes antes do tempo:

Incluindo algumas linhas de códigos para pré-carregar este conjunto de componentes permite que esta página para carregar quatro vezes mais rápido. Não são necessárias alterações na lógica de sua aplicação, e nenhuma mudança é necessária na página de destino ... um desempenho barata e eficaz tweak.

Mais uma característica:

Também incluímos um recurso mais avançado para aqueles que querem ser menos agressivo. O módulo inclui um built-in integração com módulo de Nicholas Zakas 'Idle Timer ; Idle Timer permite-nos arquivos de pré-carga somente se o usuário estiver inativo por um determinado período de tempo. Aqui está um exemplo:

  YUI ({
     / / Galeria de última compilação deste módulo
     Galeria: 'galeria-2010.05.05-19-39'
 }). Use ('galeria de pré-carga', function (Y) {
   / / Arquivos de pré-carga apenas quando o usuário estiver inativo por pelo menos 100ms
   Y.preloadOnIdle ([
     "Http://tools.w3clubs.com/pagr2/3.sleep.expires.png ',
     "Http://tools.w3clubs.com/pagr2/3.sleep.expires.js ',
     "Http://tools.w3clubs.com/pagr2/3.sleep.expires.css '
   ], 100);
 }); 

Conclusões:

É importante estar à frente de nossos usuários. Conhecer o fluxo de trabalho de nossas aplicações web, e aproveitando esta técnica preloading vai nos ajudar a melhorar a experiência geral do usuário. Também é importante fazê-lo sem aumentar a complexidade de nossas aplicações. Este novo componente ( gallery-preload ) cumpre esses objetivos.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!