Um dos poderes especiais da Web é a capacidade de composição. As páginas da Web incluem vários recursos diferentes, possivelmente de várias origens.
O Blink serve como mecanismo de renderização para Chromium, incluindo Chrome, Android WebView, Microsoft Edge, Opera e Brave.
Um mecanismo de renderização é o componente de um navegador da Web que transforma código 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 começa 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 que ele possa trabalhar. Isso é chamado de análise. O JavaScript também precisa ser analisado e executado.
Depois que tudo isso é feito, o Blink começa a renderização. A renderização é o trabalho de layout e exibição de páginas da Web que você visualiza e com as quais interage.
O diagrama a seguir mostra os estágios no pipeline de tarefas de renderização, incluindo os componentes, processos e recursos envolvidos em cada um. O Blink tem muito trabalho a fazer!
Renderizar gráficos
O Blink usa o mecanismo de gráficos de código aberto Skia para interagir com o hardware gráfico subjacente de um computador ou dispositivo móvel.
O Skia fornece APIs comuns que funcionam em várias plataformas de hardware e software. Ele serve como mecanismo de gráficos para o Google Chrome e muitos outros produtos.
Em vez de tentar oferecer suporte a diferentes sistemas operacionais e dispositivos, enquanto se mantém atualizado com as mudanças de plataforma, o Skia usa bibliotecas de gráficos, incluindo OpenGL, Vulkan e DirectX. A biblioteca que o Skia usa depende da plataforma em que está sendo executado, como o Android em dispositivos móveis ou o Windows em computadores.
Analisar e executar JavaScript
Para analisar e executar código JavaScript e WebAssembly, o Blink usa V8, um mecanismo de código aberto desenvolvido pelos projetos do Chromium.
, abreviado como Wasm, é um formato binário para código, que pode ser executado ainda mais rápido que o JavaScript.O V8 permite que um desenvolvedor use código JavaScript ou WebAssembly para acessar os recursos do navegador subjacente. Por exemplo, para manipular o Modelo de objeto de documentos, 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.
Renderizar para padrões
O V8 processa o JavaScript de acordo com o padrão JavaScript, conhecido como ECMAScript. Mecanismos de renderização como o Blink são projetados para implementar padrões da Web de forma interoperável. Os padrões da Web permitem que desenvolvedores e usuários finais confiem que as páginas da Web funcionem bem, não importa qual navegador estejam usando.
O Blink segue as especificações de recursos de navegador e linguagem definidos em 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 do elemento. Isso detalha como o JavaScript precisa ser implementado pelo navegador para permitir a interação com o elemento de uma maneira padronizada em dispositivos e plataformas.
A especificação da interface é escrita em
WebIDL: linguagem de definição de interface da Web. 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 as que compõem a maioria dos padrões da Web.
Para implementar um recurso, os engenheiros colocam esse código 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 origem do Chromium.Bibliotecas de terceiros
O Blink usa várias bibliotecas de terceiros. Por exemplo, WebGL é usado para renderizar gráficos 2D e 3D interativos.
Bibliotecas como o WebGL são altamente otimizadas e testadas com cuidado. Elas oferecem ao Blink acesso a recursos e funcionalidades importantes, sem a necessidade de 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 .
Se você quiser ver o WebGL em ação, confira o app de renderização fractal 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 WebKit como mecanismo de renderização. O WebKit era um fork de outro projeto, KDE, que remonta a 1998. Na verdade, o Safari e o Chromium foram inicialmente baseados no WebKit. Hoje, 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 a manutenção de duas arquiteturas separadas em uma base de código estava se tornando problemática.
Além disso, o Chromium queria usar recursos que não estavam sendo incorporados ao 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 fizeram um fork do código do WebKit e o chamaram de Blink. Há rumores de que o Blink recebeu o nome da tag (não tão) amada
<blink> que estava disponível no navegador Netscape Navigator para fazer o texto
piscar.
Em resumo, 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.