Next-Gen YSlow alimentado por YUI »User Interface do Yahoo! Blog (YUIBlog)

Next-Gen YSlow alimentado por YUI

18 de julho de 2011 às 9:17 pm por Marcel Duran | Em Desenvolvimento e Desempenho | 4 Comentários

Um par de semanas atrás, o Yahoo! anunciou YSlow for Mobile no Velocity 2011 , trazendo o poder do YSlow análise de desempenho para o mundo móvel.

YSlow para celulares funciona como um bookmarklet , tornando possível para rodar em outros navegadores além do Firefox (como um add-on) ou Chrome (como uma extensão) .

A arquitetura YSlow foi parcialmente remodelado para trabalhar cross-plataforma e YUI foi o fator essencial para fazer de modo seguro, a captação de cross-browser e acesso YQL simples possível.

Sandboxing

A fim de ser incorporado em uma página, sem interferir com a análise de desempenho e sem mexer com a própria página, o YSlow é um bookmarklet que injeta JavaScript e CSS em qualquer página, aproveitando o poder do YUI sandboxing:

URL Bookmarklet:

 javascript: (function (y, p, o) {p = y.body.appendChild (y.createElement ('iframe')); p.id = 'YSlow-bookmarklet "; exibição p.style.cssText =': none ';. o = p.contentWindow.document; o.open () write (' <head> <body onload = YUI_config "= {win: window.parent, doc: window.parent.document}; var d = document; d.getElementsByTagName (\ '\' cabeça) [0] appendChild. (d.createElement (\ 'script \')). src = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \ '">'); o.close ()} (documento))

O código acima:

cria um iframe vazio;
anexa ao corpo da página;
* esconde o iframe;
recebe o seu manipulador de janela;
escreve em seu conteúdo o corpo do iframe;
este corpo está vazio, mas tem um onload evento
o onload evento define como injetar YSlow JS:
- define YUI_config , para win e doc aponta para a página que está sendo analisado window e document respectivamente
- dinamicamente injeta URL YSlow, criando um script elemento em iframe da head

* O iframe é exibido no momento em que todos os ativos de apresentação YSlow são carregados

Isto irá colocar um iframe na página que está sendo analisado. Este iframe irá funcionar como um ambiente de modo seguro e YSlow irá residir dentro dela. Desde que o iframe é criado dinamicamente sem a src atributo, ele terá acesso a seu pai (a página que está sendo analisado), porque não há política de mesma origem, violação acontecendo lá.

O YUI_config objeto é útil porque ele define win e doc para o pai do iframe (a página que está sendo analisado), assim qualquer instância YUI novo será vinculado ao documento pai pela fiação padrão, qualquer chamada para Y.all e Y.one através Y.config.win ou Y.config.doc do YUI use callback.

Apresentação YSlow é tratado pelo iframe window e document referências, permitindo que o script YSlow principal para tornar a marcação, bem como buscar o CSS externo dentro deste iframe sem entrar em conflito com os estilos da página pai. YSlow analisa a página pai, a fim de obter todos os componentes (imagens, scripts, links, fundo de imagens, flash, etc) necessários para análise de desempenho mais tarde. Isto é feito acessando Y.config.win e Y.config.doc , uma vez que se referem à página pai.

Cross-browser abstração

Sendo um bookmarklet, YSlow for Mobile é suposto funcionar em qualquer navegador *. YUI abstrai questões cross-browser normalizando diferenças de navegador, resultando em um ambiente limpo, codebase fácil de ler e de fácil manutenção.

YSlow não foi totalmente portado para YUI 3 - apenas a camada do controlador (a partir do componente App próximo) para agora - mas ainda assim, toda a manipulação DOM e manipulação de eventos são feitas pelos node e event módulos. Em versões futuras que planeja portar mais recursos para YSlow YUI 3.

* Nem todos os navegadores são suportados atualmente

YQL

YSlow analisa as páginas, verificando os cabeçalhos HTTP para os componentes encontrados na página. Cabeçalhos de resposta HTTP não estão disponíveis na página, portanto, esses componentes precisam ser solicitada novamente para que YSlow obter as informações de cabeçalho de resposta. Isto poderia ser alcançado, solicitando a lista de URLs componente através XMLHttpRequest (AJAX), mas infelizmente, devido à restrição de mesma origem política , isso não é possível se todos os componentes estão no mesmo domínio que a página que é muito improvável.

Uma solução comum para a restrição de mesma origem política está usando JSONP, onde um servidor externo funciona como um proxy solicitando a lista de URLs componentes e recuperar seus cabeçalhos de resposta HTTP em nome do YSlow. Devido à popularidade YSlow e recentes esforços móveis de análise de desempenho, estamos esperando o tráfego bastante pesado para o YSlow para bookmarklet Mobile. A fim de apoiar esse tipo de tráfego, YQL foi a solução adotada por YSlow escalável através de uma tabela de dados aberto chamado data.headers , que recupera os cabeçalhos de resposta e de conteúdo para uma determinada lista de URLs ao representar o agente de usuário para garantir que o conteúdo esperado é recuperados.

A consulta YQL componente faz todo o trabalho de gerenciamento de consultas YQL enquanto gerenciamento de solicitações de JSONP sob o capô, tornando o código controlador YSlow muito mais simples e fácil de manter.

Melhorias futuras: YSlow para Nova interface amigável móvel

Atualmente, o YSlow para experiência do usuário móvel é o mesmo que a experiência de desktop. Lidar com uma longa lista de dados de análise de desempenho não é a melhor experiência em pequenas telas de telefones inteligentes. Desde YUI também abstrai vários dispositivos gestos , YSlow for Mobile estará recebendo uma interface móvel-friendly nova em versões futuras.

Desempenho da ferramenta de desempenho

YSlow para a implantação Mobile foi feita com cuidado, considerando o seu impacto no desempenho no tempo de carregamento da página que está sendo analisado. Os YUI 3 módulos utilizados no YSlow foram analisados de modo a incluir apenas os módulos necessários para carregar o YSlow o mais rápido possível. O arquivo de origem YUI e carregador não foram incluídos desde que todos os módulos necessários e sub-módulos foram combinados após Ryan Grove de Desempenho Zen dicas, o que tornou possível carregar tudo junto em um pequeno pedido único single: YSlow-bookmarklet.js: 204KB, 66KB ( gzip), onde:

YUI: 75KB, 27KB (gzip)
YSlow: 129KB, 39KB (gzip)

Mais sobre YSlow

Mantenha-se atualizado com os últimos anúncios YSlow por:

Visitando a página YSlow redesenhado no getyslow.com
YSlow Gostar no Facebook: facebook.com / getyslow
YSlow seguindo no Twitter: twitter.com / getyslow

Sobre o autor: Marcel Duran é o líder front-end para Yahoo! 's Team Desempenho excepcional. Ele foi para a otimização de desempenho em web sites de alto tráfego em Page Yahoo! frontal e Equipes de busca onde aplicados e pesquisou as práticas da web o melhor desempenho, tornando as páginas mais rápido. Ele é agora dedicada a YSlow e outras ferramentas de desenvolvimento de desempenho, pesquisas e evangelismo. Seu objetivo é tornar a web mais rápido do que ele pode ser e acredita que não existe tal coisa como "apenas alguns milissegundos não vai doer".

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

4 Comentários »

RSS feed dos comentários deste post. URI TrackBack

Poderia definitivamente usar uma folha de estilo móvel agora
Comentário por Juan - 19 de julho de 2011 #
Boa notícia Marcel. Mantenha o bom trabalho!
Comentário por Eduardo Lundgren - 21 de julho de 2011 #
[...] Next-Gen YSlow alimentado por YUI [...]
Pingback por Melhores Práticas para acelerar o seu Web Site «Chandara - 25 jul 2011 #
Eu não sou um desenvolvedor, mas estou interessado em desempenho App ove a WAN e Internet. Eu tentei pela primeira vez e funcionou muito bem para mim. Obrigado por colocar o esforço em ...
Comentário por Cliff Chapman - 27 de julho de 2011 #

Deixe um comentário

Alimentado por WordPress em Yahoo! Web Hosting .

Yahoo! Blog User Interface (YUIBlog)