CliqCCEE Cross-browser test & performance

ÍNDICE
INTRODUÇÃO 03

ARQUITETURA DO BROWSER 04

CONFIGURAÇÕES UTILIZADAS NOS TESTES 05

PREFERÊNCIAS DOS USUÁRIOS 06

TESTES DE PERFORMANCE 07

ACID3 08

JAVASCRIPT PERFORMANCE TEST 10

CSS STRESS TEST 13

BENCHMARK PERFORMANCE 15

BROWSER LAYOUT ENGINE 23

ENTRE A APLICAÇÃO E O USUÁRIO: O DOM E O RENDERTREE 30

PERFORMANCE CLIENT-SIDE NA VISÃO DA ARQUITETURA E USER EXPERIENCE (UX) 31

PRINCIPAIS CONCLUSÕES 32

REQUISITOS DE USO DO SISTEMA 33

PARA PC COM WINDOWS 34

PARA PC COM LINUX 35

PARA MAC 36

GLOSSÁRIO 37

LINKS ÚTEIS 39

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

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

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

PREFERÊNCIAS DOS USUÁRIOS

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

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 resultado

8

1 ACID3

Resultados:

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


Resultados:

11


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

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

3 CSS Stress Test

Resultados:

14


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


RUM – Real User Monitoring
Resumo do processo de temporização
de carregamento da página.

16


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 resultado
17


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


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


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


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


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

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


LAYOUT

Gecko Firefox Camino e K-Meleon Firefox e Skyfire Mozilla Corporation Cross-plataform


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


LAYOUT

MSN Explorer, AOL Explorer
Trident Internet Explorer (descontinuado) e Real-
Player
Internet Explorer Mobile Microsoft Microsoft Windows


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


LAYOUT

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


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 8

27


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.).

Para mais informações recomendamos a documentação da NSS Labs:
https://www.nsslabs.com/reports/categories/endpoint-security/browser-security

28


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.


Avaliado somente a versão Internet Explorer 8

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.

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

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

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


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


Para PC com Linux

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

Placa de vídeo 16 bits (high color) ou superior 24 bits (true color) ou superior


Browsers Mozilla Firefox 3.6 Google Chrome 17.x +
Mozzila Firefox 15 +

Complemento • NetworkManager 0.7 ou posterior
• DBus 1.0 ou posterior
• HAL 0.5.8 ou posterior
• GNOME 2.16 ou posterior


35


Para MAC

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

Placa de vídeo 128MB de memória de vídeo 256MB ou mais de memória de vídeo


Mozilla Firefox 3.6 ou superior Google Chrome 17.x +
Browsers
Mozzila Firefox 14.x +
Safari 4 +

Complemento • Não é necessário Flash Player
• Não recomendado processadores PowerPC devido as restrições e ausência de suporte dos
browsers


36

Glossário
Visando alcançar o maior número de interessados que queiram entender sobre o cross-browser, elaboramos um glossário com os termos utilizados neste documento.

Browser (ou Web Browser): também conhecido como Navegador, é um programa de computador que Front-End e Back-end: referem-se às etapas inicial e final do processo. Em resumo o front-end é a interface
habilita seus usuários a interagirem com documentos virtuais da Internet, também conhecidos como páginas do usuário, uma camada responsável por coletar a entrada em várias formas e processá-la para adequá-la
da web. Ex. Internet Explorer, Chrome, Firefox. a uma especificação útil ao back-end. O front-end é uma espécie de interface entre o usuário e o back-end.
Exemplo de linguagens de Front-End: JavaScript, HTML, CSS. Exemplos de linguagem de back-end: JSP,
Browser Engine: Termo atribuído ao motor de interpretação de um navegador para formatação de um ASP, PHP.
conteúdo estático através da comunicação entre a Interface do usuário (UI) e a manipulação do motor de
renderização (Rendering Engine). Também é implementado em softwares de e-mail, ou qualquer aplicação HTML: Linguagem de marcação de hipertexto utilizada para construir as páginas web.
que precisa carregar um conteúdo web. Pode ser descrito como Layout Engine, Motor de Interpretação de
Layout ou Web Browser Engine. JavaScript ou JS: é a principal linguagem de programação client-side para páginas web. A linguagem é
baseada em ECMAScript padronizada pela Ecma Internacional nas especificações ECMA-262 e e ISO/IEC
Client-side: expressão em inglês que, traduzida, é “lado cliente”. É usado em tecnologia para designar uma 16262. Possui suporte à programação funcional e apresenta recursos como fechamentos e funções de alta
aplicação (site, software, plugin, etc) que é executada no micro do usuário e não no servidor que hospeda a ordem comumente indisponíveis em linguagens populares como Java e C++.
aplicação.
JavaScript Engine: Motor de interpretação de JavaScript que faz parte do conjunto de módulos imple-
Cross-browser: capacidade de uma aplicação web em suportar múltiplos navegadores e que segue as mentados em um navegador que seguem uma especificação ECMAScript. Também descrito como Motor de
especificações do W3C. JavaScript ou interpretador de JavaScript.

CSS: linguagem de estilo, popularmente conhecido como Folha de estilo ou Cascata de estilos. É utilizado Layout Engine: É o mesmo que Browser Engine, porém é comum que desenvolvedores de browser utili-
para definir a apresentação de documentos escritos em HTML, XML ou qualquer linguagem de marcação. zem um ou outro termo.
É uma prática de programação caracterizada pela unificação dos elementos visuais da interface usuário em
um ou mais arquivos, excluindo a marcação inline de documentos, o que facilita sua manutenção.O Doctype Language-client: conhecido como client-side scripting ou Linguagem do Cliente, é a linguagem que é
informado ou a ausência dele determina o quirks mode ou o strict mode modificando o modo como o CSS é executada no computador do próprio usuário usada nas situações em que a linguagem server-side não tem
interpretado e a página desenhada. alcance. Entre as linguagens há o JavaScript, que é a única linguagem que realmente roda no navegador
do usuário. Através do JavaScript é possível manipular a página do usuário diretamente, fazendo coisas
DOM: Document Object Model - Modelo de Objetos de Documentos. Uma das especificações da W3C, dinâmicas que vão desde mudar o valor de um campo do formulário até criar uma área redimensionável que
independente de plataforma e linguagem, onde pode-se dinamicamente alterar e editar a estrutura, conteúdo pode ser arrastada pela página.
e estilo de um documento eletrônico, permitindo que o documento seja mais tarde processado e os resulta-
dos desse processamento, incorporados de volta ao próprio documento. A API DOM oferece uma maneira Navegador: a mesma coisa que Browser.
padrão de acessar os elementos de um documento, além de poder trabalhar com cada um desses elemen-
tos separadamente, e por esses motivos criar páginas altamente dinâmicas para a web e aplicações móveis. PoC: Prova de conceito ou PoC é uma sigla utilizada para denominar um modelo de demonstração, que
possa provar um conceito que pretendemos adotar ou implementar. Em termos tecnológicos é utilizado para
Doctype: é a marcação inicial do tipo de documento que o browser deverá interpretar e rigorosamente um teste resumido da implementação de uma aplicação antes da sua adoção.
deve ser a primeira linha do código. A ausência de doctype não costuma causar problemas funcionais, mas
sua reação em cadeia pode chegar a tal, visto que o browser não identificará qual o tipo de marcação a Renderização: Termo comum utilizado em Front-end ou desenvolvimento web, trata-se da finalização do
aplicação esta entregando. O CliqCCEE e o Portal da CCEE são escritos em XHTML 1.0 Transitional/EN. O processamento de uma tela que esta pronta para ser carregada no browser do usuário. Quando o processa-
XHTML é o doctype que antecede o HTML5. mento da aplicação está concluído ocorre o que se chama de “renderização”.

ECMAScript: linguagem baseada em scripts, padronizada pela Ecma International na especificação Rendering Engine: Motor responsável por exibir o conteúdo solicitado na tela, os conteúdos de linguagens
ECMA-262. A linguagem é bastante usada em tecnologias para Internet, sendo esta base para a criação do de estilo (CSS), linguagens de marcação (HTML, XML, XHTML), conteúdos de mídia (imagens, vídeos) e
JavaScript/JScript e também do ActionScript (Flash) construir a árvore de renderização.
37

Glossário
Visando alcançar o maior número de interessados que queiram entender sobre o cross-browser, elaboramos um glossário com os termos utilizados neste documento.

RUM: Real User Monitoring - Monitoramento de usuários em tempo real.

UX: Sigla que significa Experiência do Usuário, do inglês User Experience.

W3C: Trata-se de um consórcio internacional com cerca de 300 membros, incluindo grandes empresas,
órgãos governamentais e organizações independentes, que visa desenvolver padrões para a criação e a
interpretação de conteúdos para a Web. É um dever de todo o desenvolvedor Web respeitar e seguir os
padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pes-
soas, desestimulando e até mesmo impedindo o acesso a suas páginas. Para mais informações consulte:
http://www.w3.org/. As telas do CliqCCEE procuram seguir estes padrões na implementação.

Web Standards: é um conjunto de especificações, normas, diretrizes, recomendações, notas, artigos, tuto-
riais e afins de caráter técnico, produzidos pela W3C. É destinado a orientar desenvolvedores e projetistas
para o uso de práticas que possibilitem a criação de uma Web acessível a todos.

38

Links úteis
Relação de links que apoiaram no entendimento de cross-browser:

W3C
http://www.w3c.org/

WaSP
http:// www.webstandards.org/

ECMA Internacional
http://www.ecma-international.org/

Web browser DOM support
http://www.webdevout.net/browser-support-dom

Layout Engine

Webkit (Chrome & Safari)
http://www.webkit.org/

Gecko (Firefox developer)
https://developer.mozilla.org/en-US/docs/Gecko

Internet Explorer Architecture
http://msdn.microsoft.com/en-us/library/aa741312(v=vs.85).aspx

Preto (Opera developer specifications)
http://www.opera.com/docs/specs/

Lista de Layout Engine
http://en.wikipedia.org/wiki/List_of_web_browser_engines

Comparação de Layout Engine
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML)

JavaScript Engine

SpiderMonkey
https://developer.mozilla.org/en-US/docs/SpiderMonkey

V8
https://developers.google.com/v8/intro

SquirrelFish
https://www.webkit.org/blog/189/announcing-squirrelfish/

Carakan
39 http://www.opera.com/docs/browserjs/

GARQ - Gerência de Arquitetura • CEAR - Coordenação Estratégia e Arquitetura

CliqCCEE Cross-browser test & performance

Mais conteúdo relacionado

Semelhante a CliqCCEE Cross-browser test & performance (20)

Último (15)

CliqCCEE Cross-browser test & performance