Nossa, esse é um super navegador que você está usando, ao mesmo tempo fazendo solicitações para vários servidores, interpretando e renderizando os quase indecifráveis HTML e CSS. É uma parte fantástica da tecnologia, mas, para os desenvolvedores, ela possui uma falha fatal. Você. Os navegadores precisam de usuários, e quando se trata de teste, isso é uma grande desvantagem quando se trabalha com os complexos aplicativos web de hoje.

O PhantomJS é uma novidade. É um navegador baseado no WebKit. Ele é estaticamente construído contra QT, por isso funciona em todas as plataformas (downloads para Windows, Linux e Mac OS X estão disponíveis) e possui dependências mínimas. Você não precisa do sistema X instalado para usá-lo, por isso ele é adequado para instalar em seus servidores. Na verdade, eu já instalei no 80 de nossos servidores alimentando “Where´s fast”.

Assim que você tiver tudo instalado, é hora de dar um giro nos exemplos. A velocidade de carregamento é fácil e interessante: ./bin/phantomjs ./examples/loadspeed.js http://webadvent.org/ produz:

SyntaxError: Parse error

Page title is Web Advent 201
Loading time 610 msec

Leva 610 ms para o PhantomJS carregar a página dentro de seu navegador. Note que isso não é um pedido básico com cURL para simplesmente agarrar o documento índice, que está “renderizando” o HTML, agarrando as tabelas de estilo, as imagens etc. O “Parse Error” que estamos vendo é a saída do mecanismo de JavaScript produzindo erros, já que ele agarra um recurso mal configurado. Ou você prefere o JavaScript ou a CoffeeScript, o código envolvido é quase “decepcionantemente” trivial. Grave o tempo atual, tente abrir a página, em caso de sucesso subtraia a partir de agora e imprima. Se existe um erro, imprima a mensagem apropriada. Essas poucas linhas de código foram obrigadas a devolver essa métrica de monitorização útil, o que realmente me levou a olhar com mais atenção para o PhantomJS.

Para uma análise mais aprofundada sobre os recursos dele, o exemplo netsniff.js é perfeito. Ele recupera por igual a página solicitada, mas também retorna informações detalhadas sobre cada recurso que ele solicita em seu log solicitando webadvent.org.

Aqui, temos algumas informações básicas do aplicativo, seguidas pelos detalhes na página, incluindo a variável pageTimings – levou apenas 393ms para o navegador atingir onLoad (o Wi-Fi deve ter melhorado). O que se segue é uma entrada para cada recurso solicitado, incluindo o pedido e a resposta, assim como vários detalhes de tempo. Esse ponto de vista bem mais granular da página nos permite não somente garantir que ela carregue rápido, mas também determinar que recursos levaram mais tempo. Usando startedDateTime, bem como a informação de tempo, é possível replicar a cascata de carga da página detalhada que você recebe do Firebug ou de ferramentas similares.

Eu acho isso muito interessante e excitante. Uma grande piscina de recursos mostrou que a velocidade em que a sua página carrega e se torna usável é extremamente importante. Páginas mais rápidas resultam em mais vendas. Conseguir automatizar o monitoramento de todas essas estatísticas da página fornece uma camada adicional de segurança, no sentido de que as páginas estão funcionando conforme seus provedores esperam. Esses são alguns valores que são facilmente escondidos se o seu servidor JavaScript estático está atrasando as coisas, em vez do seu servidor dinâmico principal, ou seu banco de dados.

Mas espere, tem mais!

O PhantomJS também é capaz de rasterizar sua página, e de criar um PDF para o seu prazer. Este site utiliza um segundo (e apropriado) arquivo CSS para impressão, então eu vou usar o meu próprio site de comparação aqui. O PDF que o PhantomJS gera (com /bin/phantomjs ./examples/rasterize.js http://wondernetwork.com/ wondernetwork.pdf letter) pode ser comparado diretamente com wondernetwork.com. Além da necessidade de fazer algum trabalho para suportar melhor os navegadores limitados (foi mal), estou muito impressionado como isso funcionou tão bem. A geração de thumbnails de páginas foi uma coisa muito de vanguarda recentemente (e, vamos ser honestos, gerar PDFs programaticamente é quase sempre um porre).

Outras leituras

Além desses exemplos (e, apesar de não dita, a clara implicação de que você pode editar o código limpo para fazer mais), também houve algumas coisas construídas em cima do PhantomJS para continuar a utilizar esse navegador. Em particular, eu gostaria de chamar sua atenção para os CasperJS, que facilita a criação de scripts e testes com PhantomJS. Seu site documenta uma maneira simples de iterar sobre alguns resultados de pesquisa do Google, possivelmente para garantir a sua classificação contínua no ranking, mas estou mais interessado nos testes. Eu explorei usando Node.js para testar meu JavaScript no passado, mas nunca fui muito feliz com a forma como isso exigia que eu mudasse a forma como eu estava lidando com as coisas (já que eu não estava implementando com Node.js). Com CasperJS, eu sou capaz de testar minhas páginas do jeito que as escrevi, sem quaisquer modificações.

De modo geral, eu acho que o PhantomJS é uma ferramenta fantástica para adicionar à sua caixa de ferramentas. Monitoramento, imagens e testes, tudo em um só pacote.

***

Artigo de Paul Reinheimer, traduzido pela Redação iMasters. Publicado originalmente em http://webadvent.org/2012/phantomjs-by-paul-reinheimer