Conheça melhor as suas ferramentas (N°1) – O motor de renderização HTML

Em nossos trabalhos, é bom entender melhor as ferramentas que usamos para melhor usá-las e tirar o máximo proveito delas. Aqui está o primeiro artigo de uma série que está por vir, centrada hoje em uma ferramenta básica, que usamos diariamente sem necessariamente pensar nisso: o motor de renderização HTML.

“Como desenvolvedor web, aprender o funcionamento interno de um navegador ajuda você a tomar melhores decisões e entender as razões por trás das boas práticas de desenvolvimento.”
–Paul Irish, Relações com Desenvolvedores do Chrome

[tipo de separador=”” tamanho=”” ícone=”estrela”]

O que é um mecanismo de renderização HTML?

Como você provavelmente já sabe, o mecanismo de renderização HTML é uma sub-rotina, um conjunto de bibliotecas de software que os navegadores usam para exibir páginas da web. É específico para cada navegador. Ou seja, a partir do código que você escreve, seu desenvolvedor, o motor de renderização HTML criará um visual que o usuário poderá ver em sua tela e com o qual poderá interagir.
Existem vários (Lista na Wikipédia).
Engine_vaz
Por causa desses mecanismos de renderização, cada navegador tem sua própria interpretação de HTML, JavaScript e CSS. Isso também é algo que regularmente nos preocupa durante as fases de integração.
O mecanismo de renderização é um pouco como a pedra angular do navegador, ou seu coração, como você preferir. A responsabilidade dele é muito importante. A exibição do conteúdo na tela conforme desejado é nosso principal objetivo.
[separator type=”” size=”” icon=”star”] Para este artigo, optei por focar em renderizadores HTML, mas ainda estou ciente de que existem outros tipos de renderizadores . Não é uma ferramenta específica apenas para o gerenciamento de documentos HTML.

Um mecanismo de renderização é um software que recriará uma imagem a partir de dados digitais. o termo é genérico e se aplica a vários tipos de programas que executam tarefas ou cálculos mais ou menos simples.
Um motor de renderização pode, por exemplo, ser responsável por construir uma imagem 3D a partir de informações sobre os objetos a serem desenhados, a textura de sua superfície e as fontes de luz a serem levadas em consideração.

Dependendo do caso, cada mecanismo de renderização HTML está mais ou menos atualizado nos padrões W3C…. Ou mais ou menos bugado. Por exemplo, a renderização de animações CSS3 não é a mesma entre o Firefox (que roda no Gecko) e o Chrome (que roda no Blink/Webkit): O resultado é muito mais fluido no Chrome, enquanto nós obtemos uma renderização um pouco irregular no firefox.
tempos-modernos-5
Por padrão, o mecanismo de renderização pode exibir documentos e imagens HTML, XML. Ele pode exibir outros tipos com um plug-in (ou extensão do navegador). Por exemplo, um documento PDF é exibido usando um plug-in visualizador de PDF que você instala em seu navegador (como o Adobe Reader), os elementos Flash serão visíveis usando o plug-in Adobe Flash Shockwave Player, etc.
Mas vamos focar no tópico principal: exibir HTML e imagens que são formatadas usando CSS.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

E como essa fera funciona?

Primeiro, o mecanismo de renderização obterá o conteúdo do documento HTML que o usuário deseja exibir (ele clicou em um link, por exemplo). Ele irá carregar em pedaços de 8kb.
O mecanismo de renderização analisará o documento HTML e construirá a árvore de conteúdo a partir dos nós encontrados no documento. Cada nó corresponde a cada elemento.
Em seguida, analisará os dados de estilo, contidos nos arquivos CSS externos, mas também aqueles que são inseridos diretamente no documento HTML, os elementos de estilo. Essas informações serão usadas para criar outra árvore.
A árvore de renderização contém retângulos com atributos visuais como cores e dimensões. Os retângulos estão na ordem correta para serem exibidos na tela.
Após a construção da árvore de renderização, o motor obterá as coordenadas exatas onde deverá fazer os elementos aparecerem na tela. Ele será 'lido' e cada nó será desenhado usando as camadas de fundo da interface do usuário.

O que você tem que ter em mente é que é um processo gradual. O renderizador exibirá qualquer conteúdo que conseguir na tela o mais rápido possível. Ele não vai esperar que todo o código HTML seja analisado antes de começar a construir a visualização final.

Você certamente já notou esse fenômeno quando sua conexão com a Internet está mais lenta que o normal e a página da web parece 'quebrada'. De fato, as páginas da web não são exibidas linha por linha, começando de cima para baixo, como imagens. A parte inferior da página pode muito bem ser exibida primeiro se a parte superior for mais pesada para carregar. Partes do conteúdo serão analisadas e exibidas, enquanto o processo continua com o restante da página continuando a carregar. Os últimos elementos a serem exibidos são as imagens mais pesadas.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

Os principais mecanismos de renderização de HTML

– Lagartixas

Originalmente “NGLayout”, Gecko é open source e gratuito, foi lançado pela Mozilla Foundation em 1998, quando a Netscape publicou o código fonte de seu navegador Netscape Navigator, tornando-o assim open source. A Netscape criou então a Fundação Mozilla, com o objetivo de continuar a desenvolver o Navigator. O Gecko é então parte integrante do Netscape Navigator.

Ele foi projetado para ler HTML, CSS, XUL e JavaScript e interpretá-los. Encontra-se em várias aplicações como Firefox, Thunderbird, Netscape Navigator, AOL Explorer ou Camino. Produtos que usam a mesma versão do Gecko têm suporte a padrões idênticos.
O objetivo do Gecko é um mecanismo portátil que respeite os padrões da web e as recomendações do W3C. Funciona nos sistemas operacionais Windows, Linux e Mac OS X2. Ele é escrito na linguagem de programação C++ e distribuído sob as licenças MPL, GPL e LGPL3. (Fonte: Wikipédia)

– Tridente

Trident é o nome do mecanismo de exibição de página da Web usado no Internet Explorer em suas versões para Windows e, por extensão, em todos os navegadores baseados no Internet Explorer. Também é frequentemente referido como “MSHTML”, correspondendo ao nome da biblioteca de links dinâmicos do mecanismo. É desenvolvido pela Microsoft em C++

Ele foi projetado como um componente de software da camada COM, permitindo que os desenvolvedores adicionem funcionalidades de mecanismo a seus aplicativos em qualquer ambiente de desenvolvimento que suporte COM, incluindo o Visual Studio. (Fonte: Wikipédia)

– Web kit

O WebKit é uma biblioteca de software gratuita que permite aos desenvolvedores integrar facilmente um mecanismo de renderização de página da Web em seu software. Está disponível sob a licença BSD e GNU LGPL. Originalmente reservado para o sistema operacional Mac OS X (a partir da versão 10.3 Panther), foi portado para Linux e Windows. Assim, o porte do WebKit para os ambientes GTK+ e Qt são chamados respectivamente de WebKitGTK+ e QtWebKit.

O WebKit é uma bifurcação do mecanismo de renderização KHTML do projeto KDE usado em particular no navegador Konqueror. Integra duas sub-bibliotecas: WebCore e JavaScriptCore correspondentes respectivamente a KHTML e KJS.
Ele passa com sucesso no teste Acid2 e a versão em desenvolvimento obtém 100% no teste Acid3 desde 27 de março de 2008.
O Webkit integrou um mecanismo JavaScript com o mesmo nome. Desde então, foi reescrito, o novo mecanismo agora é chamado de SquirrelFish, muito mais rápido que o anterior.
Em fevereiro de 2012, o sucesso da divulgação do WebKit levou "o grupo OpenWeb, defendendo a padronização das tecnologias de desenvolvimento web, a lançar um apelo aos desenvolvedores e apontar as consequências do domínio do WebKit nas práticas móveis e de desenvolvedor" . Em janeiro de 2013, a posição dominante do Webkit ainda é um problema. (Fonte: Wikipédia)
O Google recentemente deixou o Webkit para crie seu próprio mecanismo de renderização, Piscar.
O resto… Em breve 🙂
Emmanuelle Guyot – Cientista de UX