Uno de los poderes especiales de la Web es su componibilidad. Las páginas web incluyen una variedad de recursos diferentes, posiblemente de varios orígenes.
Blink funciona como motor de renderización para navegadores basados en Chromium, incluidos Chrome, Android WebView, Microsoft Edge, Opera y Brave.
Un motor de renderización es el componente de un navegador web que transforma el código HTML, CSS y JavaScript, junto con imágenes y otros recursos, en páginas web con las que puedes interactuar y ver.
¿Cómo renderiza Blink una página web?
Blink comienza el proceso de renderización recopilando todos los recursos necesarios, como HTML, CSS, JavaScript, videos e imágenes. Para recuperar estos recursos, Blink administra las interacciones con la pila de red, en Chromium y el sistema operativo subyacente.
En cuanto se cargan CSS y HTML, Blink puede transformar ese código, en forma de texto, en una representación con la que puede trabajar. Esto se denomina análisis. JavaScript también debe analizarse y, luego, ejecutarse.
Una vez que se haya hecho todo esto, Blink puede comenzar a diseñar y mostrar las páginas web con las que puedes interactuar y ver. Esto es renderización.
En el siguiente diagrama, se muestran las etapas de la canalización de tareas de renderización, incluidos los componentes, los procesos y los recursos involucrados en cada una. Blink tiene mucho trabajo por hacer.
Renderiza gráficos
Blink usa el motor de gráficos Skia de código abierto para interactuar con el hardware gráfico subyacente de una computadora o un dispositivo móvil.
Skia proporciona APIs comunes que funcionan en una variedad de plataformas de hardware y software. Sirve como motor de gráficos para Google Chrome y muchos otros productos.
En lugar de intentar admitir diferentes sistemas operativos y dispositivos, y a la vez mantenerse al día con los cambios de plataforma, Skia usa bibliotecas de gráficos, como OpenGL, Vulkan y DirectX. La biblioteca que usa Skia depende de la plataforma en la que se ejecuta, como Android en dispositivos móviles o Windows en computadoras de escritorio.
Analiza y ejecuta JavaScript
Para analizar y ejecutar código JavaScript y WebAssembly, Blink usa V8, un motor de código abierto desarrollado por los proyectos de Chromium.
V8 permite que un desarrollador use código JavaScript o WebAssembly para acceder a las funciones del navegador subyacente. Por ejemplo, para manipular el modelo de objetos de documento, que es la representación interna de un documento que Blink compila a partir del código HTML.
V8 procesa JavaScript de acuerdo con el estándar de JavaScript, conocido como ECMAScript.
Renderización según los estándares
V8 procesa JavaScript de acuerdo con el estándar de JavaScript, conocido como ECMAScript. Los motores de renderización, como Blink, están diseñados para implementar de manera interoperable los estándares web. Los estándares web permiten que los desarrolladores y los usuarios finales tengan la seguridad de que las páginas web funcionan bien, sin importar el navegador que usen.
Blink sigue las especificaciones de las funciones del navegador y del lenguaje definidas en los estándares web, incluidos HTML, CSS y DOM.
HTML y el DOM
El Estándar HTML define cómo los ingenieros de navegadores deben implementar los elementos HTML. La especificación de cada elemento HTML incluye una sección que define la interfaz de DOM para el elemento. Aquí se detalla cómo el navegador debe implementar JavaScript para permitir la interacción con el elemento de una manera estandarizada en todos los dispositivos y plataformas.
La especificación de la interfaz está escrita en WebIDL: lenguaje de definición de la interfaz web. El siguiente WebIDL forma parte de la definición del estándar HTML de 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
};
WebIDL es una forma estandarizada de describir interfaces funcionales, como las que conforman la mayoría de los estándares web.
Para implementar una función, los ingenieros colocan ese código WebIDL en un archivo, y Blink lo transforma automáticamente para proporcionar una interfaz a los desarrolladores para esa función. Una vez que se define la interfaz con WebIDL, los ingenieros pueden compilar las implementaciones que responden a las llamadas de interfaz.
html_image_element.idl en la fuente de Chromium.Bibliotecas de terceros
Blink usa varias bibliotecas de terceros. Por ejemplo, WebGL se usa para renderizar gráficos 2D y 3D interactivos.
Las bibliotecas como WebGL están muy optimizadas y se prueban con cuidado. Le otorgan a Blink acceso a funciones y funcionalidades importantes, sin necesidad de reinventar la rueda. Se define el IDL de WebGL, y los ingenieros de Blink conectan esa interfaz web con código y bibliotecas en el backend que se usan para renderizar muchos elementos diferentes .
Si quieres ver WebGL en acción, consulta la app de renderización de fractales Fractious, que usa WebGL.
Renderización multiplataforma
Es posible que te preguntes si Chrome usa Blink en todas partes, en todos los sistemas operativos y dispositivos.
En iOS y iPadOS, Chrome usa WebKit como su motor de renderización. En realidad, WebKit era un derivado de otro proyecto, KDE, que se remonta a 1998. De hecho, Safari y Chromium se basaban inicialmente en WebKit. Actualmente, Safari y todos los navegadores del ecosistema de Apple usan WebKit, según los requisitos de la App Store de Apple.
Con el tiempo, los proyectos de Chromium desarrollaron una arquitectura de software multiproceso diferente, ya que mantener dos arquitecturas separadas en una base de código se estaba convirtiendo en un problema.
Además, Chromium quería usar funciones que no se compilaban en WebKit. Por lo tanto, a partir de la versión 28, los ingenieros de Chromium decidieron comenzar a trabajar en su propio motor de renderización. Crearon una bifurcación de su código de WebKit y lo llamaron Blink. Se rumorea que Blink recibió su nombre de la etiqueta (no tan) querida <blink> que estaba disponible en el navegador Netscape Navigator para hacer que el texto parpadeara.
En resumen, Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave y otros navegadores y frameworks basados en Chromium usan Blink. Safari y algunos otros navegadores usan WebKit, junto con todos los navegadores en iOS y iPadOS, incluido Chrome. Firefox usa un motor de renderización llamado Gecko.
Próximos pasos
Consulta ¿Qué son los intents de Blink?.