Um dos poderes especiais da Web é a capacidade de composição. As páginas da Web incluem uma variedade de recursos diferentes, possivelmente de várias origens.
O Blink serve como mecanismo de renderização para navegadores baseados no Chromium, incluindo o Chrome, o Android WebView, o Microsoft Edge, o Opera e o Brave.
Um motor de renderização é o componente de um navegador da Web que transforma códigos HTML, CSS e JavaScript, além de imagens e outros recursos, em páginas da Web que podem ser visualizadas e com as quais é possível interagir.
Como o Blink renderiza uma página da Web?
O Blink inicia o processo de renderização reunindo todos os recursos necessários, como HTML, CSS, JavaScript, vídeos e imagens. Para recuperar esses recursos, o Blink gerencia interações com a pilha de rede no Chromium e no sistema operacional subjacente.
Assim que o CSS e o HTML são carregados, o Blink pode transformar esse código, na forma de texto, em uma representação com a qual ele pode trabalhar. Isso é chamado de parsing. O JavaScript também precisa ser analisado e executado.
Depois que tudo isso for feito, o Blink poderá começar a trabalhar na disposição e exibição de páginas da Web que você pode visualizar e interagir. Isso é renderização.
O diagrama a seguir mostra as etapas no pipeline de tarefas de renderização, incluindo os componentes, processos e recursos envolvidos em cada uma. O Blink tem muito trabalho a fazer!
Renderizar gráficos
O Blink usa o mecanismo gráfico Skia de código aberto para interagir com o hardware gráfico subjacente de um computador ou dispositivo móvel.
O Skia oferece APIs comuns que funcionam em várias plataformas de hardware e software. Ele serve como mecanismo gráfico para o Google Chrome e muitos outros produtos.
Em vez de tentar oferecer suporte a diferentes sistemas operacionais e dispositivos, acompanhando as mudanças da plataforma, o Skia usa bibliotecas gráficas, incluindo OpenGL, Vulkan e DirectX. A biblioteca que o Skia usa depende da plataforma em que ele está sendo executado, como Android em dispositivos móveis ou Windows em computadores.
Analisar e executar JavaScript
Para analisar e executar códigos JavaScript e WebAssembly, o Blink usa o V8, um mecanismo de código aberto desenvolvido pelos projetos do Chromium.
O V8 permite que um desenvolvedor use código JavaScript ou WebAssembly para acessar os recursos do navegador. Por exemplo, para manipular o modelo de objetos do documento, que é a representação interna de um documento que o Blink cria a partir do código HTML.
O V8 processa o JavaScript de acordo com o padrão JavaScript, conhecido como ECMAScript.
Renderização para padrões
O V8 processa o JavaScript de acordo com o padrão JavaScript, conhecido como ECMAScript. Motores de renderização como o Blink foram projetados para implementar padrões da Web de forma interoperável. Os padrões da Web permitem que desenvolvedores e usuários finais tenham confiança de que as páginas da Web funcionam bem, não importa qual navegador eles estejam usando.
O Blink segue as especificações para recursos de navegador e linguagem definidos nos padrões da Web, incluindo HTML, CSS e DOM.
HTML e o DOM
O padrão HTML define como os engenheiros de navegadores devem implementar elementos HTML. A especificação de cada elemento HTML inclui uma seção que define a interface DOM para o elemento. Ele detalha como o JavaScript precisa ser implementado pelo navegador para permitir a interação com o elemento de uma maneira padronizada em todos os dispositivos e plataformas.
A especificação da interface é escrita em
WebIDL (Linguagem de definição de interface da Web, em inglês): O WebIDL a seguir faz parte da definição do padrão HTML
do HTMLImageElement.
[Exposed=Window,
LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned
long height)]
interface HTMLImageElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString alt;
[CEReactions] attribute USVString src;
[CEReactions] attribute USVString srcset;
[CEReactions] attribute DOMString sizes;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString useMap;
[CEReactions] attribute boolean isMap;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
readonly attribute unsigned long naturalWidth;
readonly attribute unsigned long naturalHeight;
readonly attribute boolean complete;
readonly attribute USVString currentSrc;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute DOMString decoding;
[CEReactions] attribute DOMString loading;
[CEReactions] attribute DOMString fetchPriority;
Promise<undefined> decode();
// also has obsolete members
};
O WebIDL é uma maneira padronizada de descrever interfaces funcionais, como aquelas que compõem a maioria dos padrões da Web.
Para implementar um recurso, os engenheiros colocam esse código do WebIDL em um arquivo, e ele é transformado automaticamente pelo Blink para fornecer uma interface aos desenvolvedores para esse recurso. Depois que a interface é definida com o WebIDL, os engenheiros podem criar as implementações que respondem às chamadas de interface.
html_image_element.idl na fonte do Chromium.Bibliotecas de terceiros
O Blink usa várias bibliotecas de terceiros. Por exemplo, o WebGL é usado para renderizar gráficos 2D e 3D interativos.
Bibliotecas como o WebGL são altamente otimizadas e testadas com cuidado. Eles dão ao Blink acesso a recursos e funcionalidades importantes, sem precisar reinventar a roda. O IDL do WebGL é definido, e os engenheiros do Blink conectam essa interface da Web com código e bibliotecas no back-end que são usados para renderizar muitos elementos diferentes .
Para conferir o WebGL em ação, confira o app de renderização de frações Fractious, que usa o WebGL.
Renderização multiplataforma
Você pode estar se perguntando se o Chrome usa o Blink em todos os sistemas operacionais e dispositivos.
No iOS e no iPadOS, o Chrome usa o WebKit como mecanismo de renderização. O WebKit era uma bifurcação de outro projeto, KDE, que remonta a 1998. Na verdade, o Safari e o Chromium foram inicialmente baseados no WebKit. Atualmente, o Safari e todos os navegadores no ecossistema da Apple usam o WebKit, de acordo com os requisitos da App Store da Apple.
Com o tempo, os projetos do Chromium desenvolveram uma arquitetura de software multiprocesso diferente, já que manter duas arquiteturas separadas em uma base de código estava se tornando problemático.
Além disso, o Chromium queria usar recursos que não estavam sendo criados no
WebKit. Assim, a partir da versão 28, os engenheiros do Chromium decidiram começar a trabalhar
no próprio mecanismo de renderização. Eles bifurcaram o código do WebKit e o
chamaram de Blink. Há rumores de que o nome "Blink" foi inspirado na tag <blink>,
que estava disponível no navegador Netscape Navigator para fazer o texto piscar.
Resumindo: o Chrome, o Microsoft Edge, o Opera, o Vivaldi, o Arc, o Brave e outros navegadores e frameworks baseados no Chromium usam o Blink. O Safari e alguns outros navegadores usam o WebKit, assim como todos os navegadores no iOS e iPadOS, incluindo o Chrome. O Firefox usa um mecanismo de renderização chamado Gecko.
Próximas etapas
Confira O que são intents do Blink?.