ÍNDICEINTRODUÇÃO 			                          				                              03ARQUITETURA DO BROWSER						            ...
INTRODUÇÃO    A camada online do CliqCCEE está homologada para uso nos navegadores Google    Chrome, Internet Explorer 8 e...
Arquitetura do Browser    Este infográfico demonstra de maneira simplificada como é a Arquitetura de um navegador web.    ...
Workstation     CONFIGURAÇÕES UTILIZADAS NOS TESTES     HARDWARE                                                          ...
PREFERÊNCIAS DOS USUÁRIOS6
Testes de performance    CRUZAMENTO DE TESTES PARA    MENSURAR A PERFORMANCE E    COMPATIBILIDADE DE CADA    NAVEGADOR    ...
1           ACID3            Testando a compatibilidade                                                            Especif...
1    ACID3        Resultados:9
2           JavaScript Performance Test             Testa a performance dos                                               ...
2    JavaScript Performance Test         Resultados:11
2           JavaScript Performance Test             Análise de performance dos             Interpretadores de JavaScript  ...
3           CSS Stress Test             Estressando a camada visual                                                       ...
3    CSS Stress Test         Resultados:14
4            Benchmark Performance              RUM – Real User Monitoring                                                ...
4    Benchmark Performance         RUM – Real User Monitoring         Resumo do processo de temporização         de carreg...
4     Benchmark Performance         Cenários aplicados no monitoramento:               Telas de Pesquisa                  ...
4      Benchmark Performance         Resultados:         Tempo médio do Front-end         Cálculo do tempo de processament...
4      Benchmark Performance         Resultados:         Tempo médio de carregamento da página         Após a aplicação do...
4      Benchmark Performance         Resultados:         Percentual de tempo do Front-end         da aplicação         Per...
4      Benchmark Performance         Resultados:         Percentual de carregamento das páginas         Percentual de quan...
4        Benchmark Performance           CONCLUSÕES                                      Gráfico de conclusão do RUM (Real...
5      Browser layout engine         O que diferencia cada browser e suas versões.         Quais as vantagens e problemas ...
5      Browser layout engine         O que diferencia cada browser e suas versões.         Quais as vantagens e problemas ...
5      Browser layout engine         O que diferencia cada browser e suas versões.         Quais as vantagens e problemas ...
5      Browser layout engine         O que diferencia cada browser e suas versões.         Quais as vantagens e problemas ...
5      Browser layout engine         O que diferencia cada browser e suas versões.         Quais as vantagens e problemas ...
5    Browser layout engine         O que diferencia cada browser e suas versões.         Quais as vantagens e problemas pa...
5    Browser layout engine         O que diferencia cada browser e suas versões.         Quais as vantagens e problemas pa...
ENTRE A APLICAÇÃO     E O USUÁRIO                                                                                         ...
Problemas de cross-browser ocorrem porque no momento do desenvolvimento poucos se preo-                               cupa...
PRINCIPAIS CONCLUSÕES                             • Os browsers homologados possuem compatibilidade para os padrões Web St...
REQUISITOS DE USO DO SISTEMA     Os requisitos mínimos são configurações básicas estipuladas para a utilização     do Cliq...
REQUISITOS DE USO DO SISTEMA     Para PC com Windows     Componentes:          Requisitos mínimos:                        ...
REQUISITOS DE USO DO SISTEMA     Para PC com Linux     Componentes:          Requisitos mínimos:                          ...
REQUISITOS DE USO DO SISTEMA     Para MAC     Componentes:          Requisitos mínimos:                           Requisit...
CliqCCEE Cross-browser test & performance
CliqCCEE Cross-browser test & performance
CliqCCEE Cross-browser test & performance
CliqCCEE Cross-browser test & performance
CliqCCEE Cross-browser test & performance
Upcoming SlideShare
Loading in …5
×

CliqCCEE Cross-browser test & performance

3,338 views

Published on

2012 - O nível de detalhes dos testes realizados resultaram em uma análise minuciosa dos padrões e da performance dos navegadores disponíveis no mercado para utilização do sistema CliqCCEE, com foco nos detalhes inerentes ao seu funcionamento: motores, interpretadores de códigos e configurações.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,338
On SlideShare
0
From Embeds
0
Number of Embeds
250
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CliqCCEE Cross-browser test & performance

  1. 1. ÍNDICEINTRODUÇÃO 03ARQUITETURA DO BROWSER 04CONFIGURAÇÕES UTILIZADAS NOS TESTES 05PREFERÊNCIAS DOS USUÁRIOS 06TESTES DE PERFORMANCE 07 ACID3 08 JAVASCRIPT PERFORMANCE TEST 10 CSS STRESS TEST 13 BENCHMARK PERFORMANCE 15 BROWSER LAYOUT ENGINE 23ENTRE A APLICAÇÃO E O USUÁRIO: O DOM E O RENDERTREE 30PERFORMANCE CLIENT-SIDE NA VISÃO DA ARQUITETURA E USER EXPERIENCE (UX) 31 PRINCIPAIS CONCLUSÕES 32REQUISITOS DE USO DO SISTEMA 33 PARA PC COM WINDOWS 34 PARA PC COM LINUX 35 PARA MAC 36GLOSSÁRIO 37LINKS ÚTEIS 39
  2. 2. INTRODUÇÃO A camada online do CliqCCEE está homologada para uso nos navegadores Google Chrome, Internet Explorer 8 e Mozilla Firefox, selecionados pela Arquitetura desde o início do Projeto Novo SCL, levando em consideração o grande share que estes softwares possuem como preferência dos usuários. Existem inúmeras opções de navegadores com características similares ou idênticas em rela- ção às especificações e desenvolvimento dos componentes de sua Arquitetura. Estes navega- dores são classificados como softwares parcialmente habilitados para utilização do CliqCCEE. A diversidade de modelos e versões que foram identificadas somam cerca de 40 navegadores ativos, que seguem as mesmas especificações dos navegadores homologados pela CCEE. O nível de detalhes dos testes realizados resultaram em uma análise minuciosa dos padrões e da performance dos navegadores disponíveis no mercado, com foco nos detalhes inerentes ao seu funcionamento: motores, interpretadores de códigos e configurações. Em linhas gerais, este documento foi produzido para avaliar a performance do CliqCCEE nos diversos browsers e sugerir a configuração de hardware que proporcionará um ambiente con- Visando alcançar o maior número de fortável para utilização do sistema. interessados que queiram entender sobre o cross-browser, elaboramos um glossário com os termos e siglas mais utilizados OBJETIVOS DOS TESTES neste documento. • Benchmark de performance e padrões dos navegadores para uso do CliqCCEE. Consulte a página 38 • Testar os browsers populares que possuem o mesmo motor de layout (engine) dos navegadores (browsers) homologados. • Medir o nível de qualidade e performance em tempo real (RUM). • Explorar cenários e situações de navegação nas telas do sistema, focando em usabilidade e acessibilidade do browser. • Entender pontos críticos inerentes ao desenvolvimento client-side (JavaScript, HTML e CSS). • Projetar combinações de situações diversas que afetam a experiência do usuário – hardware, rede, segurança, etc. • Definir o requisito mínimo e o recomendado para melhor aproveitamento do sistema. • Colaborar com recomendações e melhorias importantes para futuras versões do sistema.3
  3. 3. Arquitetura do Browser Este infográfico demonstra de maneira simplificada como é a Arquitetura de um navegador web. Interface de Usuário - É o espaço onde a interação entre os usuários e o navegador ocorre. A maioria dos navegadores têm entradas comuns para interface do usuário como uma barra de endereços, botões de avanço e retorno, página inicial, atualização, favoritos, etc. Browser Engine - Motor encarregado pela comunicação de entradas de Interface do Usuário em conjunto com o Rendering Engine (Motor de Renderização). Seu papel é USER INTERFACE consultar e manipular o Rendering Engine de acordo com as Quando termina o p rocessamento requisições que ocorrem entre a aplicação e a interface de (evento DOMContentReady) usuário. Browser Engine Motor do Browser Rendering Engine - Componente responsável por exibir o conteúdo solicitado na tela, primeiramente analisando Processo DOM o código recebido e, em seguida, usando os estilos para Rendering Engine Motor de Renderização construir parte da árvore de renderização do layout que exibe o conteúdo na tela. Está entrelaçado com execuções do inter- pretador de JavaScript em carregamentos específicos que ocorrem em tempo de execução (runtime). JavaScript Engin e Networking - A fração do código escrito no navegador, Motor de interpr etação do Ja vaScript responsável por enviar chamadas de rede diferentes. Por UI Backend exemplo o envio de solicitações HTTP para o servidor. JavaScript Engine - Motor Interpretador de JavaScript do Networking navegador. Backend UI - Camada de Interface Usuário padrão de cada Data Stor ge a navegador como caixas de confirmação, janelas, abas e botões. Data Storage - É um pequeno banco de dados criado no disco local do computador onde o navegador está instalado. Este banco de dados armazena arquivos diversos, como cache, cookies, etc.4
  4. 4. Workstation CONFIGURAÇÕES UTILIZADAS NOS TESTES HARDWARE BROWSERS Homologados Google Chrome Versões: 5.0 + Google Chrome Versões: 3.6 + Dell - PC HP - Notebook Apple Ipad 2 - WIFI - 64GB Apple Iphone 4 - 16GB Intel Core i7 Centrino X86 - 2394 Mhz Internet Explorer Samsung Galaxy GT 1000 Sony Ericsson Xperia X10 1.5GB RAM 1GB RAM Versões: 8 Samsung Galaxy Tab Samsung Galaxy SII Apple iMac Apple Macbook Pro Intel Core i3 - 3.06 GHz Intel Core 2 Duo - 2.6 GHz Outros 4GB 1333MHZ RAM DDR3 8GB 1333 MHZ RAM DDR3 HP - PC Safari Versões: 4.0 + Pentium 4 HT - 3.0 GHz 1GB 400MHZ RAM DDR Opera Versões: 11.X Internet Explorer SISTEMAS OPERACIONAIS Versões: 7, 9 e 10 (preview) Google Chrome Canary Versões: 24.X Android Webkit Browser Versões: 4.0.3 Windows XP Profissional (SP3) Mac OS X Version 10.7.4 (Lion) Linux Redhat 5.7 (Tikanga) 5.1.1 e 6.0 2.3 Gingerbread Skyfire Versões: 2.0 Windows Vista Home Mac OS X Version 10.6.8 (Snow Leopard) Windows 7 Professional Dolphin HD Windows 8 (Release Preview - Versões: 5.4.1 Set. 2012)5
  5. 5. PREFERÊNCIAS DOS USUÁRIOS6
  6. 6. Testes de performance CRUZAMENTO DE TESTES PARA MENSURAR A PERFORMANCE E COMPATIBILIDADE DE CADA NAVEGADOR Método Para validar a aderência das características dos navegadores quanto às necessidades requeri- das pelo CliqCCEE e, consequentemente promover a melhor experiência para o usuário, foram utilizadas ferramentas que comparam os pontos chave da estrutura de cada browser. 1 ACID3 Testando a compatibilidade para padrões W3C. 2 Os três testes iniciais: Acid3, JavaScript Performance Test e CCS Stress Test testam as características específicas dos browsers que, quando cruzados no tópico 4 Benchmark Pefor- JavaScript Performance Test mance, determinam o grau de conforto do usuário no acesso ao CliqCCEE. Testando os interpretadores de script. 3 Após o cruzamento dos resultados temos a conclusão de quais os melhores browsers, configu- rações e características gerais mapeadas e descritas no tópico 5 Browser layout engine. CSS Stress Test Estressando a camada visual. 4 Benchmark Performance RUM – Real User Monitoring - Monitoramento de performance dos browsers em tempo real. 5 Browser layout engine O que há dentro de cada browser e versões, quais as vantagens e restrições.7
  7. 7. 1 ACID3 Testando a compatibilidade Especificações testadas: para padrões Web Standard. • DOM2 Core • DOM2 Events O Acid3 Test é referência em teste de compatibilidade com padrões web (Web Standards) para • DOM2 HTML navegadores. O teste oferece uma suite com 100 diferentes tipos de testes de browser, com alto nível de exigência em relação aos padrões e especificações estipuladas. • DOM2 Range • DOM2 Style (getComputedStyle, …) O CliqCCEE é um sistema desenvolvido dentro dos padrões de tecnologia Web Standard, especificados pelo consórcio internacional W3C, que visa desenvolver padrões para a criação • DOM2 Traversal (NodeIterator, TreeWalker) e a interpretação de conteúdos para a Web publicando um conjunto de normas, diretrizes e • DOM2 Views (defaultView) recomendações de caráter técnico. Padrões como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são utilizados de forma incorreta, devido ao desconhecimento da • ECMAScript especificação. • HTML4 (<object>, <iframe>, …) Os padrões de acessibilidade e usabilidade são publicados pelo Web Standards Project para • HTTP (Content-Type, 404, …) expor o grau de compatibilidade necessário no desenvolvimento com os padrões web existen- • Media Queries tes dos navegadores. • Selectors (:lang, :nth-child(), combinators, dynamic changes, …) Fundada em 1998, The Web Standards Project (WaSP) luta para elaborar e manter normas • XHTML 1.0 que reduzam o custo e a complexidade de desenvolvimento, aumentando a acessibilidade e viabilidade a longo prazo de qualquer aplicação publicada na web. Trabalham em conjunto com • CSS2 (@font-face) empresas fabricantes de navegadores. • CSS2.1 (’inline-block’, ‘pre-wrap’, parsing…) Voltando ao cenário de testes, é frequente que desenvolvedores de browser entreguem relea- • CSS3 Color (rgba(), hsla(), …) ses e correções que atendem aos padrões estabelecidos pelo consórcio, além de otimizações • CSS3 UI (’cursor’) feitas nos motores. • data: URIs Na prática, a compatibilidade do browser influencia diretamente na performance, pois está • SVG (SVG Animation, SVG Fonts, …) atrelada à capacidade de interpretação dos motores de layout. Quanto maior o grau de compatibilidade (de 0 a 100), melhor será o tempo que o navegador levará para interpretar o “texto“ enviado pelo servidor até a renderização do layout. Exemplo da tela de resultado8
  8. 8. 1 ACID3 Resultados:9
  9. 9. 2 JavaScript Performance Test Testa a performance dos Como funciona? interpretadores de script dos Os testes são automatizados através dos próprios browsers, utilizando frameworks em JavaScript executados através de um HTML simples. principais navegadores. O benchmark testa a capacidade do núcleo da linguagem JavaScript para medir a capacidade de tempo de leitura de cada browser. O teste compara as diferenças entre os navegadores e as O Java Script é a principal linguagem de programação client-side para páginas web. O de- diferenças entre versões do mesmo navegador incluindo testes de descompressão de código, sempenho do interpretador de javascript é uma característica importante de um navegador e criptografia, JSON, e as mais complexas interpretações que são relevantes para interpretação da deve ser levada em consideração no desenvolvimento de uma aplicação, como no caso do linguagem. CliqCCEE. Parte das referências de benchmark é disponibilizada pelos próprios desenvolvedores (Mozilla, A utilização de um grande volume de JavaScript impacta no tempo de carregamento das telas e no processamento das informações no client-side (DOM). Google, Microsoft) e o resultado pode sofrer leves variações, consequentes dos processos ativos na máquina, rede, memória, etc. A expectativa dos usuários é que suas requisições sejam rapidamente carregadas e, para isso, é fundamental saber otimizar a comunicação de entregas entre o servidor e o browser. Portanto, o resultado é a média de 3 rodadas, mantendo um intervalo de confiança de 95% para assertividade do resultado. No caso, este benckmark demonstra o desempenho dos motores de layout dos diversos nave- gadores, auxiliando o usuário na escolha da melhor opção, considerando suas possibilidades e necessidades. Com exceção do Internet Explorer, a maioria das versões dos browsers possuem o mesmo inter- pretador de JavaScript, mas é importante ressaltar que qualquer mudança de versão do browser Também é importante avaliar aspectos como a capacidade do hardware utilizado. pode trazer pequenas variações nos resultados deste teste. Em certos casos, é perceptível que alguns navegadores mais velozes apresentem um consu- mo maior de memória da máquina, ou seja, para usufruir de um maior desempenho, o equipa- mento precisa ter recomendações técnicas adequadas. Entenda o que é o JavaScript e JavaScript Engine no glossário Usuários com máquinas antigas enfrentarão dificuldades em relação ao desempenho, pois os do documento. padrões atuais dos navegadores exigem mais da memória e do processador. Página 38 Sobre o resultado do teste, é perceptível que o JavaScript Engine V8 utilizado pelo Chrome e o SquirrelFish implementado no Safari são os mais rápidos em comparação com navegadores como o Firefox, IE8 e Opera. No entanto, os resultados do Internet Explorer 10 demonstram uma relevante melhora que colocará o browser da Microsoft entre os mais rápidos quando for lançado, mas isso exigirá máquinas mais atualizadas.10
  10. 10. 2 JavaScript Performance Test Resultados:11
  11. 11. 2 JavaScript Performance Test Análise de performance dos Interpretadores de JavaScript Iniciamos o comparativo com uma análise resumida dos principais JavaScript Engines homolo- A Microsoft, desenvolvedora do Internet Explorer, atualmente é responsável pelo Chakra gados ou habilitados para o CliqCCEE: SpiderMonkey e V8. (JavaScript Engine das versões do IE9 e IE10), que oferece desempenho e performance compe- titivo com os concorrentes. O Firefox utiliza no seu engine o SpiderMonkey, desenvolvido pela Mozilla Corporation. Porém, o que leva aos resultados ruins do Internet Explorer é a capacidade de tempo de inter- O Google Chrome opta pelo Engine V8, open source, desenvolvido pela própria comunidade pretação da versão 8 do browser da Microsoft. do Google, dentre outras empresas consorciadas. O V8 é a promessa do Google em manter um dos mais rápidos interpretadores de JavaScript do mercado, mas está diante de uma cres- cente batalha com o interpretador do Safari (browser da Apple), seu concorrente direto pelo O CliqCCEE é configurado para renderizar em modo IE8, uso do mesmo Layout Engine (Webkit). O Safari desenvolve o JavaScript Engine SquirrelFish, independente das versões posteriores do browser. Isso torna que obteve os melhores resultados de performance. sua interpretação lenta em relação às versões recentes. Entre os mais performáticos, a maior diferença está na compilação. SpiderMonkey foi escrito Este hoje pode ser considerado nosso principal ponto de melhoria para o futuro pois o desempe- para o Netscape (browser antigo) que funciona compilando o JavaScript para uma linguagem nho da versão 8 afeta a experiência do usuário. intermediária que é interpretada. A proposta do V8 é acelerar o desempenho de uma aplicação compilando JavaScript para instruções de máquina, eliminando a necessidade de um intérpre- Alguns fatores sobre o Internet Explorer 8 justificam o resultado inferior aos concorrentes. O te. fato do IE8 não incluir nenhuma funcionalidade de script nativa, como todos os outros, expõe a Durante a compilação e recompilação, eles realizam várias otimizações. As otimizações são fragilidade da versão com o uso de JavaScript. No caso do IE8, o MSHTML.dll expõe uma API usualmente específicas para cada Browser Engine (Gecko vs. Webkit), paralelo à forma como que permite que um programador desenvolva o script que deverá ser encarregado por acessar a eles são construídos junto com o motor de renderização. As otimizações não são um grande árvore DOM (Document Object Model). O browser inclui ligações para o motor Active Scripting, diferencial, já que geralmente o foco em aspectos semelhantes, como melhorar a coleta de que é uma parte do Microsoft Windows e permite que qualquer linguagem implementada como lixo e o equilíbrio em tempo de execução, entre muitas outras otimizações ainda não evoluiram este módulo possa ser utilizada para desenvolvimento client-side. Por consequência, apenas os tanto quanto poderiam. módulos de JScript e VBScript são fornecidos; implementações de terceiros como ScreamingMonkey (para suporte ECMAScript 4) também podem ser usados​​ Há um excesso . Diferenças de desempenho entre os V8 e SpiderMonkey são mínimas. É interessante notar de dependência do sistema operacional e, por consequência, do uso do processador da máqui- que quando o V8 foi introduzido teve sua publicidade apoiada no desempenho do Google na. Por outro lado, nos browsers concorrentes a exigência é maior em memória, uma tendência Chrome. Atualizações subsequentes para SpiderMonkey, incluindo TraceMonkey e que já é realidade nas versões mais recentes do IE. JagerMonkey nas últimas versões do Firefox, ajudaram a fechar a lacuna, tornando-o tão performático quanto seu concorrente no conjunto da obra. A guerra para criar o melhor interpretador irá favorecer aplicações complexas com muito uso de JavaScript, como é o caso do CliqCCEE. Nos browser baseados no Layout Engine Webkit (Chrome e Safari) há uma sutíl vantagem do interpretador JavaScript SquirrelFish em relação ao V8 do Chrome. O interpretador utilizado Mas isso só será concretizado quando os browsers mais recentes tiverem estabelecido na prefe- pelo Safari, apesar de ser cross-plataform, tem seu diferencial verificado somente em desktops rência do usuário. Mac OS X devido às diferenças arquiteturais com Windows.12
  12. 12. 3 CSS Stress Test Estressando a camada visual Como funciona? do navegador. 440 seletores são disparados numa cadeia de 40 a 50 testes - a quantidade de testes varia confor- me a capacidade de interpretação trazida pelo motor do navegador. Todo o layout da aplicação é formatado por meio dos arquivos de CSS (Cascading Style O framework de teste indexa todos os elementos e suas classes - classe por classe - posterior- Sheets), uma linguagem que agrega seletores e atributos que deverão desencadear na forma- mente as remove para calcular o tempo que leva para rolar a página. A “classe“ é um atributo do tação visual da tela. Esta é a parte do código que de fato dá forma ao conteúdo. HTML utilizado para o CSS da página identificar o que representa aquela parte do layout. Ex. Textos, posicionamento de caixas, campos, listas, etc. Um dos principais problemas de padrões nos diferentes browsers está relacionado com esta linguagem, em maior grau com o Internet Explorer devido à ausência de adequação aos Os seletores que economizam uma quantia considerável de tempo quando removidos indicam a padrões da web (W3C), como demonstrado no teste 1. Acid3. Aqui começa o cross-browser área problema para aquele browser. de uma interface: arquivos para as diferentes versões do Internet Explorer são construídos e importados como exceção pelo browser. Neste caso somente o Internet Explorer entende o Foi extraída a média dos 3 melhores resultados num total de 6 testes por navegador, em até 3 comentário destacado: versões diferentes, sistema operacional Windows e Mac OS X. Aplicado em doses incorretas ou não equilibradas, o CSS pode comprometer sensivel- mente o tempo de carregamento de uma página. Algumas práticas não recomendas, mesmo que necessárias, aumentam o problema, como, por exemplo, a adição de Style inline em runtime - prática que também é comum em plugins de jQuery (framework de JavaScript). O CSS Stress Test é uma forma de medir a capacidade do browser em lidar com as situações dos diversos seletores disponíveis nesta linguagem. É um método interessante para identificar os seletores específicos que afetam a perfor- mance por navegador a fim de melhorar o código. Navegadores baseados no Layout Engine Webkit, como o Chrome e o Safari, trazem a melhor experiência visual para as aplicações web. O teste pode ser expandido para os navegadores nativos do dispositivos mobile iOS e Android. Neste teste, o Opera Browser teve o pior desempenho entre as versões mais recentes.13
  13. 13. 3 CSS Stress Test Resultados:14
  14. 14. 4 Benchmark Performance RUM – Real User Monitoring Para o comparativo de performance dos navegadores foi planejada uma PoC pela equipe de Arquitetura do projeto, utilizando a ferramenta NewRelic monitorando acessos em tempo real (RUM) em uma aplicação local. Monitoramento de performance O principal objetivo era simular cenários de requisição de telas inciais, telas comple- dos browsers em tempo real. xas e telas de resposta do sistema e fazer um comparativo de performance por browser. Foram criados 3 cenários baseados no feedback dos usuários em tempo de homologação, mas as melhorias sugeridas no final deste relatório aplicam-se para todo o sistema. Como funciona? Os agents do software configurados na aplicação coletam as informações dos processos que são 1. Tempo médio de Front-end executados no aplicativo. A implementação é similar ao Google Analytics. Através da injeção de Calcula o tempo de processamento do navegador (DOM) com o tempo que o usuário recebe a JavaScript nas telas em runtime (tempo de execução), que envia as informações coletadas nos página processada para a etapa de carregamento. processamentos que ocorrem na aplicação (client-side), cada browser é identificado por um user-agent que nada mais é que a configuração do motor e do esquema para cada tipo de 2. Tempo médio de carregamento das páginas dispositivo ou sistema operacional. As informações coletadas são enviadas de forma assíncrona Tempo médio que cada navegador levou para carregar o HTML processado - Página Carregada / para não influenciar o tempo de carregamento das páginas. Entrega da tela. A camada de rede inclui o tempo de redirecionamentos e solicitação / recebimento do HTML. Não 3. Percentual de tempo do Front-end inclui o tempo de serviço para ativos estáticos, o que é ótimo pois traz resultados mais puros. Percentual que o Front-end corresponde no carregamento da tela da aplicação. Comparativo que leva em conta inúmeros cruzamentos, que vão desde a inteligência de leitura do motor do browser O Monitoramento em Tempo Real possui inteligência para ignorar páginas em cache, detectando à qualidade e o tipo de implementação que o programador utilizou. as páginas que já haviam sido processadas, comparando o tempo total do Back-end com o tempo de fila da aplicação. Quando a soma de aplicação e tempo de entrega é maior que o tempo de 4. Percentual de carregamento das páginas Back-end total, o resultado assume que a página foi armazenada em cache e modifica a fórmula Representa em percentual o quanto a tela impacta a experiência do usuário no tempo de carrega- de cálculo. De qualquer forma, cada cenário foi rodado com o cache resetado e todas as extensões mento desde a requisição inicial (clique no link). e os processos do navegador foram finalizados antes do início do monitoramento. 5. Rendimento O monitoramento foi realizado com 2 usuários ativos e foram cruzados os tempos de resposta da Capacidade e rendimento do browser calculados em PPM (páginas por minuto). Estes números aplicação, com características e oscilações da rede, árvore de processamento da aplicação feita não foram importantes na nossa análise, mas são interessantes de serem analisados num futuro pelo browser (DOM) e o resultado do carregamento da página para o usuário em cinco escalas: monitoramento em tempo real do sistema.15
  15. 15. 4 Benchmark Performance RUM – Real User Monitoring Resumo do processo de temporização de carregamento da página.16
  16. 16. 4 Benchmark Performance Cenários aplicados no monitoramento: Telas de Pesquisa Inclusão de Ativo Pesquisar e Editar Dados Horários 1 2 3 Módulo: Módulo: Módulo: Cadastro Corporativo Medição Contábil Contratos Cache limpo somente na primeira Tela Cache Limpo e extensões desativadas Cache Limpo e extensões desativadas e extensões desativadas para todos para todos os browsers. para todos os browsers. os browsers. Código do Agente: 11 Sigla: CEB Código do Agente: 11 Sigla: CEB 1. Requisitar somente a tela inicial de todas 1. Tela Inicial de Medição Contábil (Pesquisa) 1. Gerenciamento de Contratos Funcionalidades do módulo. 2. Menu de Ações: “Incluir novo Ativo” 2. Consultar Contratos do Agente 3. Incluir Início de Vigência 3. Clicar em “Editar” Contrato CCEAl 6069 4. Incluir Hora 4. Abrir a aba “Montantes de Energia” 5. Incluir Código 5. Clicar no ícone Editar para abrir janela modal de 6. Incluir Nome Completo Dados Horários 7. Incluir Nome Resumido 6. Clicar na aba “Patamar/MWmédio” (Confirmar janela de diálogo) 8. Selecionar o Tipo de Ativo 9. Selecionar Status 7. Clicar na aba “Patamar/MWh” (Confirmar janela de diálogo) 10. Clicar em Gravar 8. Fechar Janela e Voltar para tela inicial de Gerencia- 11. Voltar para tela de pesquisa mento de Contratos. 12. Pesquisar o item incluso e aguardar resultado17
  17. 17. 4 Benchmark Performance Resultados: Tempo médio do Front-end Cálculo do tempo de processamento do navegador (DOM) com o tempo que o usuário recebe a página processada para a etapa de carregamento da tela (page load time).18
  18. 18. 4 Benchmark Performance Resultados: Tempo médio de carregamento da página Após a aplicação dos três cenários, o gráfico demonstra o tempo médio que cada navegador levou para interpretar o HTML processado pelo DOM para renderização da página e entrega da tela.19
  19. 19. 4 Benchmark Performance Resultados: Percentual de tempo do Front-end da aplicação Percentual que o Front-end corresponde no carregamento da tela da aplicação cruzando os processos (tempo de rede, tempo do servidor de aplicação, etc.).20
  20. 20. 4 Benchmark Performance Resultados: Percentual de carregamento das páginas Percentual de quanto a tela representa no tempo desde a requisição (clique inicial) para o carregamento da tela.21
  21. 21. 4 Benchmark Performance CONCLUSÕES Gráfico de conclusão do RUM (Real User Monitoring) Como analisado nos testes anteriores, os browsers com motores Webkit (Chrome e Safari) proporcionam maior agilidade no processamento e carregamento das telas para o usuário, ao contrário do Internet Explorer em todas as versões testadas (7, 8, 9 e 10) que principalmente no percentual de Front-end aumenta o tempo de espera do usuário. Portanto, o teste traduz em suas variáveis que entre os browsers homologados para o uso do CliqCCEE o Google Chrome é o que oferece a melhor performance e experiência para o usuário em tempo de processamento e carregamento da tela. Overview do RUM O gráfico ao lado foi extraído da ferramenta de monitoramento para demonstrar um overview das oscilações e picos ocorridos durante os cenários de testes no período de uma hora. A visualização mostra os quatro processos monitorados.22
  22. 22. 5 Browser layout engine O que diferencia cada browser e suas versões. Quais as vantagens e problemas para o CliqCCEE. LAYOUT ENGINE Browsers principais Browsers Alternativos Mobile Engine Developer(s) Sistema Operacional Comodo Dragon, iOS, Android, BlackBerry Apple, KDE, Nokia, Goo- WebKit Chrome e Safari RockMelt, SRWare Iron e iCab Tablet OS, WebOS, Dolphin HD, Chronium e Steel gle, RIM, Palm, Samsung, outros Cross-plataform Relatório do Engine Foram testados todos os componentes de interface do CliqCCEE, considerando os força entre os usuários domésticos. aspectos não-funcionais, usabilidade e acessibilidade do browser. O CliqCCEE também foi homologado através de testes exploratórios utilizando o browser Google Chrome a partir É caracterizado principalmente pela boa performance em múltiplas plataformas, pela da versão 10 (atualmente na versão 22 no Windows). popularidade dos browsers Chrome, Safari e browsers nativos de IOS e Android. O que os diferencia é a implementação das especificações do JavaScript Engine, além das caracte- A homologação garante funcionamento do Layout da aplicação nos browsers baseados rísticas específicas de cada User Interface. no Layout Engine Webkit para desktop, como por exemplo o Safari (a partir da versão 4), navegador nativo do sistema operacional Mac OS, que também possui instalação para Devido à acirrada disputa entre os browsers Webkit-based, os principais desenvolvedores versões do Windows (a partir do XP). vem aprimorando os recursos com extrema velocidade, oferecendo cada vez mais recursos para softwares Web-Standard (como o CliqCCEE) e, consequentemente, em O resultado do teste evidencia que poucos problemas são encontrados utilizando os nave- performance. Além disso, força as melhoras significativas no Trident (motor do Internet gadores WebKit-based nas versões mais estáveis em dispositivos móveis. Explorer da Microsoft) que já é notado na versão 10, nativo na instalação do Windows 8 (release preview). O WebKit é o principal motor da atualidade. No Brasil representa aproximadamente 35% dos navegadores utilizados pelos usuários, mesmo assim ainda perde no ambiente corpo- A percepção que se tem dos atributos dos browsers Webkit é que estes oferecem a melhor rativo. É mantido e melhorado por grandes empresas da indústria de desenvolvimento de experiência de navegação para os usuários de internet em termos de performance e visual. software e hardware, dentre as principais Nokia, Google e Apple inc., o que nos faz crer que em breve poderá dividir a liderança também no mercado corporativo, como já ganhou Observações Foram encontradas algumas restrições de uso para os browsers Webkit em dispositivos Restrições de uso na funcionalidade de upload de arquivo que não funcionam em tablets e mobile no uso do CliqCCEE. Os problemas de usabilidade mais comuns foram identificados smartphones. em browsers que utilizam atributos e tags específicas para navegação com mouse. Um exemplo é o ToolTip que não é identificado devido à ausência de atributos CSS específicos A interface gráfica do CliqCCEE é 100% funcional em todos os navegadores Webkit testa- para telas “Touch”. Se o usuário não tiver familiaridade com o sistema, e o ícone não tiver dos, mas a recomendação é pelo uso do Chrome no sistema operacional Windows. um desenho de fácil identificação, não será possível saber qual a ação.o.23
  23. 23. 5 Browser layout engine O que diferencia cada browser e suas versões. Quais as vantagens e problemas para o CliqCCEE. LAYOUT ENGINE Browsers principais Browsers Alternativos Mobile Engine Developer(s) Sistema Operacional Gecko Firefox Camino e K-Meleon Firefox e Skyfire Mozilla Corporation Cross-plataform Relatório do Engine Foram testados componentes de interface considerando os aspectos não-funcionais, O resultado do teste evidência que poucos problemas são encontrados utilizando os Nave- usabilidade e acessibilidade, client-side, importantes para o uso do CliqCCEE. O sistema gadores Gecko-based, como o Firefox, nas versões mais estáveis em dispositívos móveis. também foi homologado através de testes de cenário e testes exploratórios utilizando o browser Mozilla Firefox a partir das versões 3.6 (atualmente na versão 15.0.1). O principal browser Gecko-based é o Firefox, desenvolvido pela Mozilla Corporation. Trata-se da comunidade mais ativa no mercado de browsers, sofre constantes evoluções Foram encontradas pequenas falhas nas versões 6.0.2 até a 8.0.1 relativas à versão e oferece suporte às tecnologias web mais modernas, como HTML5 e CSS3. A alternativa do Layout Engine, corrigidas e estabilizadas nas versões posteriores. Basicamente, os mais popular para tablets e smartphones Android e IOS é o Skyfire. problemas são causados quando o browser é iniciado em Modo de Segurança. Outros problemas como lentidão na navegação causados por um bug no scroll, também foram corrigidos nas versões recentes. Os browsers com Layout Engine Gecko oferecem uma ótima experiência de navegação para os usuários de internet em desktop e dispositivos móveis, além de oferecer configura- O uso dos browsers desenvolvidos com o Layout Engine Gecko garante funcionamento ções seguras com boa estabilidade. do sistema nos browsers para desktop, e os principais recursos são acessíveis em tablets com Android e IOS, destacado pela excelente performance. Observações Foram encontradas algumas restrições de uso para os browsers Gecko em dispositivos Outro problema é o fato da funcionalidade de UPLOAD de arquivo não funcionar em tablets mobile. e smartphones. Problemas de usabilidade mais comuns foram identificados em browsers que utilizam atri- A interface gráfica do CliqCCEE é 100% funcional em todos os browsers Gecko testados butos e tags específicas para navegação com mouse. O mais comum é o ToolTip que não sem a necessidade de arquivos CSS e JS para cross-browser. é identificado. Se o usuário não tiver familiaridade com o sistema, e o ícone não tiver um desenho de fácil identificação não será possível saber qual a ação em questão.24
  24. 24. 5 Browser layout engine O que diferencia cada browser e suas versões. Quais as vantagens e problemas para o CliqCCEE. LAYOUT ENGINE Browsers principais Browsers Alternativos Mobile Engine Developer(s) Sistema Operacional MSN Explorer, AOL Explorer Trident Internet Explorer (descontinuado) e Real- Player Internet Explorer Mobile Microsoft Microsoft Windows Relatório do Engine Foram testados todos os componentes de interface do CliqCCEE, considerando os aspec- O IE7 possui a interface funcional, com alguns bugs e foi descartada em dezembro tos não-funcionais, usabilidade e acessibilidade, client-side, em Layout Engine Trident, de 2011 quando foram encontrados problemas no uso da tag <canvas> aplicadas nos motor nativo das versões 7, 8, 9 e 10 do Internet Explorer. O motor deste browser sofrerá módulos que utilizam a Topologia (Medição Física e Medição Contábil). O plugin jQuery inúmeros ajustes antes do lançamento oficial da versão 10, mas já traz bons resultados. chamado Ecotree realiza manipulações no browser que não são suportadas na versão 7. O CliqCCEE será lançado com a configuração padrão de front-end e back-end para o Outros fatores foram relevantes para a decisão como segurança, performance e até o motor do Internet Explorer 8. Isto significa que mesmo utilizando as versões 9 e 10 do IE, baixo percentual de uso desta versão por usuários que acessam o ambiente da CCEE. O o sistema estará carregando o motor de layout da versão 8 padrão. Tendo em vista esta IE7 deixou de ser suportado pela Microsoft recentemente. particularidade, foram realizados testes com objetivo de avaliar qual seria o impacto de uso das versões mais recentes do IE e que tipo de ajustes seriam necessários. Observações Foram encontradas pequenas variações visuais no sistema devido à característica do Não foi testado o plugin IETab que roda o motor do IE no Chrome por questões de confia- motor do IE8 não ser um browser 100% Web Standard. Mas não fere aspectos funcionais bilidade no desenvolvimento e resultados diferentes. do CliqCCEE. Não foram testadas as versões alternativas devido ao share insignificante que represen- Document Mode tam. Caso o usuário opte por alguns destes browsers em vez do IE, o próprio front-end da aplicação está configurado para realizar o switch para o IE8 Standard, mas não há A simulação é gerada através do próprio browser habilitando o módulo de desenvolvedo- garantia de integral funcionamento, uma vez que o suporte destes browsers é mínimo. res (F12) e configurando o Document Mode (Modo de Documento) para a renderização standard de cada versão específica. Outro software utilizado é o IETester na versão de Windows XP. A prova limpa é realizada utilizando a versão nativa IE8 no Windows XP.25
  25. 25. 5 Browser layout engine O que diferencia cada browser e suas versões. Quais as vantagens e problemas para o CliqCCEE. LAYOUT ENGINE Browsers principais Browsers Alternativos Mobile Engine Developer(s) Sistema Operacional Presto Opera Browser Não há. Opera-mini e Opera Mobile Opera Software Cross-Plataform DESCRIÇÃO DO ENGINE Foram testados todos os componentes de interface, considerando os aspectos não-funcio- O que motivou o teste é o fato do motor do Opera não fazer parte da premissa de homolo- nais, usabilidade e acessibilidade, client-side, utilizados no CliqCCEE gação do CliqCCEE, mas corresponde *2.2% de share em âmbito mundial, em desktops, mas é altamente difundido em multiplas plataformas (desktops, tablets e até games), Com O resultado do teste evidência que poucos problemas são encontrados utilizando o exceção das versões Opera-mini ou Mobile com motores limitados, os navegadores com Browser Opera Presto-based nas versões mais estáveis em desktop. motor Presto são os que possuem maior compatibilidade cross-plataform. Já nas versões mobile foram encontrados inúmeros problemas, dentre estes se O Presto-based foi sucessivamente migrando seu ECMAScript e tem estabilizado um dos destaca a péssima performance, limitações na compilação do Java Script. motores mais rápidos e seguros entre os maiores concorrentes. OBSERVAÇÕES Pequenos problemas de acessibilidade do browser nos componentes de formulário - nave- A interface gráfica do CliqCCEE no Opera para Desktop é 100% funcional. No navegador gação por teclado - não interferem a funcionalidade mas mudam os atalhos do teclado. O mobile a interface possui restrições citadas neste relatório, fazendo com que o uso não seja que motiva as mudanças é o fato do fornecedor do Engine dar maior foco nas especifica- recomendado. ções de plataformas “Touch” onde o atalho de teclado é abolido. Foi identificado que é uma característica do browser quando foram subtraídas as funções js e CSS do browser, testando no HTML puro. Não é recomendado o uso do Opera mobile ou Opera-mini para manipulação e opera- ção do CliqCCEE pois a maioria dos componentes do sistema é construído a partir de funções de JavaScript e o suporte destes browsers é bastante limitado. O Opera na sua versão mobile limita sua especificação para os scripts e, em determinado ponto da renderização, inevitavelmente trava a tela do usuário.26
  26. 26. 5 Browser layout engine O que diferencia cada browser e suas versões. Quais as vantagens e problemas para o CliqCCEE. CONSUMO Faz parte da rotina do usuário a utilização dos recursos de abas, extensões, addons, rss, dentre DE MEMÓRIA outras features oferecidas. A exigência dos nave- gadores em relação aos recursos da máquina foi Consumo de memória na mensurada a partir do consumo de memória RAM primeira execução (KB) 20.644 70.264 16.676 38.297 64.660 durante a sua primeira execução, com a página inicial em branco e após o carregamento de uma Consumo com tela incial padrão do Pack (KB) 48.304 92.004 70.120 55.500 124.588 das telas do Pack de Design do CliqCCEE. Todos os recursos não nativos do navegador foram desa- bilitados para obtenção dos resultados. Tela incial padrão do Pack - biblioteca_p_consulta/index.htm Homologados para o CliqCCEE Avaliado somente a versão Internet Explorer 827
  27. 27. 5 Browser layout engine O que diferencia cada browser e suas versões. Quais as vantagens e problemas para o CliqCCEE. Navegar em aplicações web exige cuidados espe- cíficos com a segurança. Estamos constantemente SEGURANÇA PRINCIPAIS CARACTERÍSTICAS DE SEGURANÇA suscetíveis aos ataques de hackers e malwares. Para Conta com um dispositivo para criptografar os dados pessoais salvos nele. evitar problemas é importante que os navegadores possuam mecanismos que auxiliem na proteção das informações. Mas a segurança pode ser falha caso não haja a preocupação mínima do usuário. Oferece um gerenciador de permissões. É possível definir se o navegador deve memorizar senhas, compartilhar localização, armazenar cookies, abrir popups e preservar conteúdo offline. Analisamos as funções de navegação privada, ge- renciamento de senhas salvas e bloqueio de popups, além de outras funções de defesa que um ou outro Possui o filtro Smartscreen, que tem o objetivo de avisar o usuário quando um link for redirecioná-lo navegador oferece. para um endereço de confiança duvidosa. Por sua vez, a Proteção Contra Rastreamento permite que você defina quais informações pessoais podem ser coletadas por sites de terceiros. Todos os navegadores disponibilizaram um modo de Leia mais em: http://windows.microsoft.com/pt-BR/windows-vista/Security-and-privacy-features-in- -Internet-Explorer-8 navegação privada, no qual é possível navegar por aplicações sem que o browser deixe registrado seu Painel “Privacidade“ desse programa mostra que tipo de dados os sites estão armazenando, dando a histórico e ações. Mas as configurações de segurança opção para que você os remova. É possível personalizar as configurações dos cookies e decidir se os só tem efetividade quando são reconhecidas e aplica- sites têm permissão para solicitar informações sobre a sua localização. das pelos usuários. A partir da versão 10.6 foi incorporado um recurso de proteção contra a ação de malwares desenvolvi- Todos os navegadores operam em compatibilidade do pela AVG. O aplicativo ainda disponibiliza um mecanismo de criptografia para as senhas salvas. com certificados e protocolos de segurança conven- cionais da internet (SSL, TSL, etc.). Homologados para o CliqCCEE Para mais informações recomendamos a documentação da NSS Labs: https://www.nsslabs.com/reports/categories/endpoint-security/browser-security28
  28. 28. 5 Browser layout engine O que diferencia cada browser e suas versões. Quais as vantagens e problemas para o CliqCCEE. Definir qual navegador é mais CARACTERÍSTICAS adequado para as necessi- dades deve sempre levar em QUE SE DESTACAM consideração a produtividade EM CADA BROWSER e a disponibilidade de recursos Característica positiva Velocidade de Estabilidade, Integração com Navegação muito Bom desempe- do navegador navegação e adequação aos Windows o torna rápida e ótima nho para nave- que a workstation oferece. carregamento de padrões web gera prático para o integração entre gação em telas telas, pouco con- pouca quebra uso. Permite dispositivos pouco comple- O quadro ao lado resume sumo de memória de layout, maior gerenciamento Apple garante xas. Recursos durante o uso, usabilidade e de seguraça de configurações de integração quais são as principais carac- interface limpa e facilidade de forma simples personalizadas entre diferentes terísticas mais marcantes para suporte contínuo configuração sem para o usuário. para desktop e sistemas opera- cada opção. da comunidade de conhecimentos mobile. cionais desenvolvedores. avançados. Excesso de Alto consumo de Lentidão, Versão para Motor de Renderi- Ponto negativo atualizações o memória para pro- travamento, Windows ainda zação precisa de torna vulnerável cessar documen- problemas de não é estável como aprimoramentos, a erros, painel tos HTML exigindo compatibilidade no Mac OS X e a falhas de JavaScript, de configurações mais da máquina falta de suporte instalação não é interface pouco intui- avançadas pouco na primeira iniciali- do desenvolvedor muito prática. As tiva com pequenos amigável, erros de zação do browser. para correções correções enviadas bugs visuais e falhas certificado. de bugs, erros de pelo desenvolvedor de acessibilidade. script e padrões geralmente são web falhos. insuficientes. Homologados para o CliqCCEE Avaliado somente a versão Internet Explorer 829
  29. 29. ENTRE A APLICAÇÃO E O USUÁRIO Figura 2 O RENDERTree DOM DOM Tree Render T ree Paint! Style struct EO Criado pelo W3C, O DOM (Modelo de Objetos de Documentos) é uma multi-plataforma que representa Render Tree Ainda antes da apresentação da tela para o usuário há um processo chamado Render Tree - Árvore de como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador. É o macro- Renderização, que funciona de forma parecida com o DOM. O Render Tree se encarrega de processar -processo do navegador encarregado de analisar o código HTML, recuperar e executar scripts síncro- os objetos script e folhas de estilo (CSS) - aquilo de fato transforma os elementos HTML da tela em layout nos. Por este motivo é interpretado como a principal inteligência do Front-end que fica entre o client e (cores, formas, imagens). a aplicação. Pode ser melhor compreendido se comparado com uma árvore de processamento junto aos nós da aplicação que correspondem ao conteúdo carregado pelas marcações do HTML - conforme A Render Tree é a parte mais importante do processo de renderização. Bem parecida com a árvore DOM, demonstrado na Figura 1. O DOM é a base para uma outra árvore que é o que realmente um browser cada objeto corresponde a nós de documentos, elementos ou textos. A diferença é que q Render Tree monta na tela, a Árvore de Renderização - Render Tree. possui tambem objetos que não possuem nós na árvore DOM, como scripts e folhas de estilos. O processo de criação da Render Tree passa pelos seguintes passos: 1. Attachment: Conforme o resumo da Figura 2, após finalizar a análise do DOM e a criação de seus nós, Figura 1 os navegadores chamam um método attach para começar a renderização. O attach víncula primeiramente as folhas de estilo na árvore DOM e começa a estilização do layout da página. O attach é top down, criando sempre inicialmente os nós parent e depois seus descendentes (nós filhos). Por isso muitas vezes vemos primeiro à página sem layout e depois a mesma aparece estilizada 2. RenderStyle.h que vai guardar objetos de referência com cada uma das propriedades CSS do docu- mento. O nó criado no DOM é verificado no documento de CSS e, caso existam propriedades que incidam naquele elemento, é o momento de aplicar. Esta propriedade fica salva dentro da Render Tree até que ela seja destruída ou que este valor seja alterado por algum script em tempo de execução. 3. CSS Box Model: Após o método RenderStyle ser criado, ele é acessado via RenderObject. O Box DOM processamento model é usado para posicionar um elemento dentro da página. Todo browser tem uma lista de elementos HTML suportados. Quando o seu markup possui tags presentes na lista, a árvore DOM é montada e o processo de 1. Attachment começa logo na sequência e os estilos são aplicados, dando continuidade a criação da Render Tree. Uma vez indexadas, as marcações HTML, XHTML, se transformam em elementos de uma árvore mani- O grande problema é que cada navegador tem a sua própria lista, que trata situações similares de ma- pulável via API – que é o que fazemos quando usamos programas ou scripts para alterar funcionalidades neiras diferentes. Sabemos que o navegador que mais apresenta problemas para as situações acima é o de uma página: conteúdo, estrutura ou folha de estilo. Os browsers que atendem ao esquema “Web Internet Explorer, mas todos os navegadores apresentam particularidades quando um elemento não está Standard” são capazes de processar aplicações como o CliqCCEE pois trazem na implementação a em sua lista de elementos permitidos, e precisa de um trabalho para fazer tudo acontecer na Render Tree capacidade de interpretação que segue as especificações internacionais da W3C. como deve ser feito. Estas particularidades desencadeiam o trabalho de cross-browser no desenvolvimen-30 to da aplicação.
  30. 30. Problemas de cross-browser ocorrem porque no momento do desenvolvimento poucos se preo- cupam em entender a interpretação dos browsers e suas dezenas de versões, as combinações PERFORMANCE CLIENT-SIDE com diferentes sistemas operacionais e o quanto isso influencia na aplicação. NA VISÃO DA Esta análise não é atemporal, e o resultado dos testes mostram que não haverá tão cedo uma resposta definitiva sobre qual navegador é o mais rápido, exatamente porque performance é ARQUITETURA E apenas um dos parâmetros que afetam a experiência do usuário com nossos sistemas. Com as novas possibilidades de gadgets, hardware e softwares disponíveis, não cabe mais a USER EXPERIENCE (UX) quem entrega a solução, limitar ou obrigar o usuário a utilizar browser “A” ou “B”. Nosso papel é mostrar quais são os requisitos mínimos que oferecem suporte e recomendar a melhor configu- ração para obter desempenho e produtividade, sem deixar de lado questões como segurança e limitações do ambiente utilizado pelo usuário. Tudo isso sem esquecer que neste processo há variáveis não gerenciáveis, como por exemplo a grande frequência em que ocorrem as atualizações dos browsers. Constantemente os dispo- sitivos sofrem alterações de hardware e as preferências do usuário flutuam com as tendências e mudanças que ocorrem a todo instante. Não podemos deixar de lado o fato das grandes empresas evitarem o aprofundamento sobre o assunto e manterem o conhecido navegador da Microsoft como única opção por motivos diversos, mas o principal é a ausência de conhecimento e acompanhamento das tendências da tecnologia web somadas com as preferências do usuário. Fato é que a guerra dos browsers se tornou um “calo no pé“ de quem não se preocupa com Front-end. Por fim, não existem formas de impedir que um usuário escolha por browsers alternativos, ou pouco conhecido, mas são desenvolvidos utilizando o mesmo Engine (motor) dos navegadores homologados pelo Projeto Novo SCL para o CliqCCEE. Neste caso, o melhor caminho é co- nhecer as preferências e limitações do usuário, saber quais aspectos envolvem uma recomen- dação e trabalhar para oferecer suporte às suas necessidades. As tabelas de compatibilidade, o acompanhamento das comunidades e o conhecimento das atu- alizações ajudam a mitigar problemas e a escrever códigos compatíveis para qualquer browser. Este é o principal motivo pelo qual os testes deste documento foram focados nos Motores do browsers, estudo de interpretadores de JavaScript, teste de estresse da camada visual e user- -agent dos navegadores.31
  31. 31. PRINCIPAIS CONCLUSÕES • Os browsers homologados possuem compatibilidade para os padrões Web Standard Projetct. • Entre os browsers homologados o Google Chrome é a alternativa que oferecerá melhor performan- ce e experiência em qualquer sistema operacional. • O Mozilla Firefox da versão 3.6 à 15.0.1 é uma opção estável para usuários que navegam em desktops mais atualizados e com boa disponibilidade de recursos como memória e processador. A sugestão é mantê-lo sempre atualizado. Todas as versões são disponibilizadas pela comunidade de desenvolvedores (Mozilla) no site oficial. • o Internet Explorer 8 é um navegador de implementação ultrapassada que oferece a pior perfor- mance entre os homologados para o CliqCCEE, mas é a alternativa mais atualizada da Microsoft para usuários que ainda utilizam o sistema operacional WIndows XP. A utilização das versões mais recen- tes, como o IE9, pouco irá contribuir em termos de performance visto que a aplicação esta configurada para carregar qualquer versão no Modo de Documento Internet Explorer 8, mas oferece melhorias em termos de segurança. • No quesito performance, restrição funcionais, segurança e usabilidade o Internet Explorer 7 é o pior navegador para uso do CliqcCEE. A versão não está homologada para uso. • O Opera apresenta interface gráfica funcional mas carece de melhorias na implementação dos moto- rers ficando atrás apenas do Internet Explorer. O Opera não está homologado para uso do CliqCCEE. • Os navegadores que possuem o Browser Engine idêntico ao Google Chrome (Webkit), como Safari da Apple, Android Webkit Browser, dentre outros, são boas alternativas para o uso do sistema, mas é preciso levar em consideração que ainda não se tratam de navegadores homologados e que nos dispositivos mobile sofrem com restrições de uso para algumas funcionalidades, como por exemplo a importação de arquivos.32
  32. 32. REQUISITOS DE USO DO SISTEMA Os requisitos mínimos são configurações básicas estipuladas para a utilização do CliqCCEE. Os requisitos recomendados são configurações que otimizam o uso do sistema, garantindo melhor performance e estabilidade. Critérios que estabelecem as tabelas de requisitos levam em consideração: 1. As configurações que permitem a instalação de navegadores com motores cross-plataform nos quais foram homologados pelo Projeto Novo SCL para o CliqCCEE; 2. Versão do sistema operacional compatível com navegadores homologados que possibilitam a instalação; 3. Configurações universais para navegação web em sistemas baseados em Web Standard; 4. Resultado de performance apresentados pelas configuração; Para homologação do sistema foram utilizados os sistemas operacionais Windows XP e Windows 7. Estes requisitos serão revistos a cada 12 meses.33
  33. 33. REQUISITOS DE USO DO SISTEMA Para PC com Windows Componentes: Requisitos mínimos: Requisitos recomendados: PC com processador 1.4 GHz Intel Processador 1.83GHz Intel Core Duo Processador Pentium 4 ou superior ou superior RAM 512MB 2GB ou mais Windows XP Professional Service Pack 2+ Sistema operacional Windows XP Service Pack 2+ Windows Vista Windows 7 2MB (banda larga) Internet 512 Kbps DSL/cabo, T1 ou mais rápida Placa de vídeo 16 bits (high color) ou superior 24 bits (true color) ou superior Resolução da tela 1024x768 pixels 1280x1024 pixels ou superior Internet Explorer 8 * Google Chrome 17.x + Browsers Google Chrome 5.x * Mozzila Firefox 14.x + Mozilla Firefox 3.6 Internet Explorer 8 + * É sempre recomendada a instalação da última versão estável. • JavaScript e Cookies habilitados Complemento • Modo de Compatibilidade do Internet Explorer deve estar desativado ou configurado para o modo standard da versão 8 • Não é necessário Flash Player Para melhor experiência do usuário, recomendamos o uso dos navegadores mais modernos, como Google Chrome 17.x, Firefox 3.6 ou superior.34
  34. 34. REQUISITOS DE USO DO SISTEMA Para PC com Linux Componentes: Requisitos mínimos: Requisitos recomendados: Processador Intel Pentium 3/Athlon 64 ou posterior Processador Intel Core Duo ou superior RAM 512MB 2GB ou mais Ubuntu 10.04+ Sistema operacional Linux 2.2.14 ou superior Debian 6+ OpenSuSE 11.3+ Fedora Linux 14 2MB (banda larga) Internet 512 Kbps DSL/cabo, T1 ou mais rápida Placa de vídeo 16 bits (high color) ou superior 24 bits (true color) ou superior Resolução da tela 1024x768 pixels 1280x1024 pixels ou superior Browsers Mozilla Firefox 3.6 Google Chrome 17.x + Mozzila Firefox 15 + • JavaScript e Cookies habilitados Complemento • NetworkManager 0.7 ou posterior • DBus 1.0 ou posterior • HAL 0.5.8 ou posterior • GNOME 2.16 ou posterior Para melhor experiência do usuário, recomendamos o uso dos navegadores mais modernos, como Google Chrome 17.x, Firefox 3.6 ou superior.35
  35. 35. REQUISITOS DE USO DO SISTEMA Para MAC Componentes: Requisitos mínimos: Requisitos recomendados: Computador Macintosh com Processador processador Intel x86 Processador Intel Core 2 Duo - 2.6 GHz RAM 1GB 2GB ou mais Mac OS X 10.6 (Snow Leopard) Sistema operacional Mac OS X 10.5 (Leopard) Mac OS X 10.7 (Lion) Mac OS X 10.8 (Lion Montain) 2MB (banda larga) Internet 512 Kbps DSL/cabo, T1 ou mais rápida Placa de vídeo 128MB de memória de vídeo 256MB ou mais de memória de vídeo Resolução da tela 1024x768 pixels 1280x1024 pixels ou superior Mozilla Firefox 3.6 ou superior Google Chrome 17.x + Browsers Mozzila Firefox 14.x + Safari 4 + • JavaScript e Cookies habilitados Complemento • Não é necessário Flash Player • Não recomendado processadores PowerPC devido as restrições e ausência de suporte dos browsers Para melhor experiência do usuário, recomendamos o uso dos navegadores mais modernos, como Google Chrome 17.x, Firefox 3.6 ou superior.36

×