Como os navegadores processam os códigos de uma página web?

Por Redação

Não é raro notarmos que um mesmo site pode ter uma aparência diferente quando visto em dispositivos diferentes. Geralmente alguns recursos não funcionam direito, ou então alguns trechos deixam de aparecer. Muitas vezes o problema não está no site, mas sim no navegador utilizado para acessá-lo.

O que acontece é que os cinco principais navegadores para desktop disponíveis no mercado usam quatro motores de renderização diferentes para exibir uma página da web – e o novo browser do Windows 10, o Microsoft Edge, irá introduzir um outro – e todos eles funcionam de maneiras diferentes. Isso significa que a sua experiência na web pode mudar de acordo com o navegador que você está usando e até mesmo de acordo com a versão do browser em questão.

Navegadores

Mas o que é um motor de renderização?

A função do motor de renderização, também conhecido como motor de layout, é renderizar, ou seja, exibir os conteúdos solicitados na tela do navegador. Esse mecanismo é necessário, pois uma página da web não é uma entidade única que pode ser baixada e exibida na tela um pixel de cada vez. Em vez disso, ela é composta por uma série de instruções escritas em vários tipos de código – HTML, CSS, JavaScript, PHP, entre outras – que dizem ao navegador o que fazer, onde fazer e como fazer.

Cada navegador utiliza um motor de renderização para levar as informações de conteúdo e layout contidas nesses códigos e, em seguida, exibi-las totalmente formatadas e compreensíveis na tela do seu computador. O grande problema é que cada navegador usa um tipo de motor diferente e as especificações de cada linguagem de programação são muito detalhadas e cada motor só pode oferecer uma única interpretação dessa especificação.

No caso do CSS (código que fornece as informações da aparência de uma página), particularmente, nenhum motor irá conseguir reproduzir exatamente os mesmos resultados de outro. Às vezes, as diferenças podem ficar por conta apenas de um pixel desalinhado aqui ou ali ou eles podem ficar com uma aparência radicalmente diferente.

CSS

Quais são os principais motores utilizados pelos navegadores?

Atualmente, existem quatro principais motores de renderização utilizados pelos navegadores mais populares do mercado. São eles:

  • WebKit: um motor de código aberto usado pelo Safari no OS X e iOS, assim como por muitos outros navegadores em dispositivos móveis, incluindo o navegador nativo do Android. O WebKit se tornou totalmente open source em 2005, permitindo grandes evoluções e desenvolvimentos com colaboração de terceiros;
  • Blink: um motor de código aberto baseado no WebKit. Ele alimenta navegadores como o Chrome, Opera, Amazon Silk e Android WebView (o navegador que abre dentro de aplicativos). Em 2013, o Google anunciou que aposentaria o tradicional motor de renderização que utilizava no Chrome, o WebKit, e adotaria um novo, o Blink. O motor foi modificado pelo próprio Google para melhorar o desempenho e reduzir a complexidade do navegador;
  • Gecko: um motor de código aberto desenvolvido pela Fundação Mozilla e usado pelo Firefox. O Gecko roda em vários sistemas operacionais tendo suporte para BSD, Linux, Mac OS X, Solaris, OS/2, AIX, OpenVMS e Windows;
  • Trident: um motor desenvolvido pela Microsoft e usado no Internet Explorer. O novo browser do Windows 10, chamado Microsoft Edge, vai utilizar uma versão mais recente e renovada chamada EdgeHTML.

Web standarts (Padrões Web)

Atualmente, o descompasso entre os diferentes motores de renderização é muito menor do que era na época em que o Internet Explorer dominava o mercado de navegadores. Suites de testes como a Acid3 mostram com que precisão um navegador renderiza uma página e a maioria dos browsers modernos apresenta uma pontuação alta. No entanto, manter a compatibilidade com os padrões web (Web Standards) é uma tarefa realmente complexa. Os padrões web têm por finalidade a padronização e a criação de uma "Web universal".

Acid3

As especificações para HTML, CSS e outros são enormes. Novos elementos são adicionados, enquanto os mais velhos, não utilizados ou obsoletos, são removidos. Todos esses detalhes podem fazer com que os motores de renderização levem um tempo para refletir tantas alterações. Alguns elementos do HTML5 e especificações CSS ainda não são suportados pelos navegadores mainstream.

O site html5test.com permite testar seu navegador, mais especificamente a versão que está sendo executada, para ver quão bem ele suporta ambos os recursos oficiais e experimentais do HTML5. Atualmente, o Chrome é classificado como o melhor dos principais navegadores do mercado, enquanto o Internet Explorer 11 ocupa o pior lugar do ranking.

Se um desenvolvedor web resolve utilizar uma determinada funcionalidade que é suportada por um navegador, mas não pelos demais, os browsers que não suportam o recurso podem resolver o problema com um valor equivalente ou então simplesmente ignorá-lo completamente (nesse caso, uma caixa transparente poderia ser processada como sólida, por exemplo).

Tudo isso torna o trabalho de renderização de páginas web muito mais complexo do que parece. É provável que um navegador atualizado frequentemente seja compatível com um número maior de padrões do que aquele que não é. Por isso, é importante sempre manter o seu navegador atualizado.

Além de tudo isso que citamos, ainda há outros fatores que devem ser levados em conta, como por exemplo:

  • Bugs no motor: um motor de renderização é um software e todo software contém bugs. Embora as empresas geralmente encontrem e eliminem bugs críticos rapidamente, é impossível garantir que uma combinação específica de código em uma página da web não vai produzir resultados inesperados quando for processada.
  • Bugs na página web: navegadores têm certo nível de tolerância à erros, mas isso varia de um motor para o outro. Uma página web com erros em seu código pode ser executada perfeitamente em um navegador, mas aparecer totalmente quebrada em outro.
  • Fontes: a maneira como as fontes de um site são exibidas não é tratada pelo navegador, mas sim pelo sistema operacional de um dispositivo. Windows e OS X renderizam fontes de formas diferentes e por isso um mesmo tipo de letra em um mesmo navegador pode parecer diferente quando visto em diferentes plataformas.
  • Recursos proprietários: alguns navegadores podem usar tecnologias proprietárias que não estão disponíveis em outros lugares. Esse exemplo pode ser ilustrado com o Microsoft ActiveX no Internet Explorer, embora a empresa não pretenda utilizá-lo no novo Microsoft Edge.
Bug

Via MakeUseOf

Fique por dentro do mundo da tecnologia!

Inscreva-se em nossa newsletter e receba diariamente as notícias por e-mail.