et al, 2011). O recurso push do HTTP/2 não requer complexidade adicional, nem gera carga em comparação com as técnicas equivalentes, pois utiliza a mesma conexão TCP existente. Não é necessário que sejam enviadas solicitações periódicas ao servidor para consulta sobre novos dados, pois estes são enviados assim que disponíveis de forma assíncrona em relação aos demais streams.
2.3
Complexidade de Páginas Web
Esta seção descreve a complexidade envolvida no transporte e apresentação de páginas Web.
2.3.1
HTML
O HyperText Markup Language (HTML) é uma linguagem de marcação utilizada para criar páginas Web. Em conjunto com CSS e JavaScript, o HTML é utilizado pela maioria dos Web-sites para criar páginas visualmente ricas, interfaces de aplicativos Web e aplicativos de dispositivos móveis. Inicialmente proposto por Tim Berners-Lee no final da década de 80, posteriormente padronizado pela IETF até que, a partir de 1996 as definições de padrões do HTML são mantidas pela World Wide Web Consortium (W3C).
Navegadores Web utilizam arquivos HTML como base para renderizar páginas que podem conter texto, hyperlinks, imagens, objetos de mídia, como áudio e vídeo inclusive outras paginas Web com uso de frames HTML.
A sintaxe do HTML é definida através de marcadores, ou tags, entre os caracteres “<” e “>”, como por exemplo “<html>”. Estes marcadores, em sua maioria, são em pares como “<body>” e “</body>”, sendo utilizados para iniciar e finalizar um bloco, respectivamente.
Alguns marcadores não são apresentados em pares e são utilizados para descrever elementos sem conteúdo, como o marcador “<img>”. Em ambos os casos, é possível adicionar informações de atributos dentro dos marcadores de inicio de bloco ou diretamente no marcador caso seja único.
Após obter um documento HTML, o navegador Web analisa o conteúdo e atributos dos marcadores para criar elementos HTML. Os elementos <html>, <head> e <body> são denominados como contêineres estruturais para um documento HTML e contém informações específicas:
HTML: Todos os elementos de um documento HTML devem estar contidos dentro
do elemento <html>, denominado elemento raiz, sendo o único a ter o atributo de nome “documentElement” na árvore Document Object Model (DOM).
HEAD: Contém elementos com informações de metadados do documento e infor-
2.3. COMPLEXIDADE DE PÁGINAS WEB 30 são renderizadas na página Web, porém podem ser utilizados para indicar outros objetos que são necessários para o processamento dos demais elementos visuais. Os seguintes elementos podem existir neste contêiner:
<base>: Especifica qual o prefixo de URL deve ser utilizado nas próximas
URLs relativas. Apenas uma definição base deve existir no documento.
<meta> É utilizado para informar meta informações adicionais ao docu-
mento que não possuem outro local a serem informadas, como autor, data de publicação e data de validade. Palavras-chave são comumente descritas através dos atributos deste tipo de elemento. Não há um padrão obrigatório para definir os possíveis atributos e seus valores.
<script>: Pode conter blocos de scripts ou referência a outro objeto que
contenha scripts através do atributo src. Quanto utilizado o atributo src o elemento <script> pode conter adicionalmente os atributos mutuamente exclusivos “async” e “defer” indicando quando o script deve ser executado, sendo definido “async”, o script deve ser executado de forma assíncrona a outros processos do navegador; quando “defer” o script deve ser executado apenas após a conclusão da analise do documento. Na ausência destes atributos o script deve ser executado assim que disponível, antes que o navegador prossiga na análise do documento.
<style>: O conteúdo deste elemento é utilizado para definir estilos do
documento através de CSS.
<link>: Define links entre o documento e recursos externos. Não possui
conteúdo e utiliza atributos específicos para informar localização e carac- terísticas do recurso externo. Comumente utilizado para definir objetos do tipo CSS e de ícone na página. O atributo rel deste elemento define o tipo de relacionamento que o documento tem com o recurso externo.
<title>: Define o título do documento HTML em seu conteúdo.
BODY: Contém elementos do conteúdo visível do documento que podem utilizar
atributos para definições inline de estilos entre outras definições arbitrárias. Elemen- tos do tipo <script> podem ser utilizados dentro do elemento <body>. Os demais elementos possíveis não são considerados relevantes no restante deste trabalho. A especificação do HTML não possui qualquer tipo de restrição em relação a sequencia dos blocos, exceto dos elementos estruturais.
2.3. COMPLEXIDADE DE PÁGINAS WEB 31
2.3.2
Do HTML a Página Web
Após obter o documento HTML inicial, o navegador inicia a construção da página Web. Os marcadores do documento são utilizados para definir elementos em um DOM. Durante este processo, pode ser necessário avaliar modificações causadas por outros objetos ou solicitar objetos externos. Além disso, o DOM também é utilizado para renderizar todas as informações da página Web.
Wang et al (2013) demonstra como os navegadores efetuam a construção e renderização de páginas Web e quais dependências existem entre os processos relacionados nesta atividade. Algumas destas dependências são impostas por padrões Web, a exemplo da execução Javascript: quando definidos diretamente entre tags <script> devem ser executados assim que identificados. Outras dependências são causadas ao se identificar objetos externos que devem ser obtidos e analisados durante a construção do DOM. Como exemplo, scripts que foram definidos sem o atributo “async” ou “defer” devem ser analisados assim que disponíveis.
2.3.3
HAR
O HTTP Archive format (HAR) é um formato de arquivo utilizado para armazenar registros de interações e eventos durante o carregamento de uma página por um navegador Web. O formato é baseado em JavaScript Object Notation (JSON), e contém informações de autoria, detalhes sobre o navegador Web utilizado, informações de cabeçalho e temporização das transações HTTP e opcionalmente o conteúdo dos objetos transferidos. A Figura 2.12 apresenta um trecho de arquivo har e sua representação visual em cascata.
Figura 2.12: Representação visual do HAR e seus eventos.
Fonte: Google Chrome
Os valores apresentados indicam precisamente o início e fim das transações de rede dos objetos da página. Detalhes da rede como tempo de negociação da conexão, negociação do TLS, atraso até o primeiro byte do objeto e tempo de Download podem ser obtidos diretamente através da inspeção do controlador de rede. Eventos relativos ao carregamento do DOM necessitam de informações coletadas pelos demais processos de um navegador. O entendimento sobre tal
2.4. TRABALHOS RELACIONADOS 32