Uno de los poderes especiales de la Web es su capacidad de composición. Las páginas web incluyen una variedad de recursos diferentes, posiblemente de varios orígenes.
Blink funciona como motor de renderización para los 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 las imágenes y otros recursos, en páginas web que puedes ver y con las que puedes interactuar.
¿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, tanto en Chromium como en 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 llama análisis. JavaScript también debe analizarse y, luego, ejecutarse.
Una vez que todo esté listo, Blink comenzará la renderización. La renderización es el trabajo de diseñar y mostrar las páginas web que ves y con las que interactúas.
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 de código abierto Skia para interactuar con el hardware de gráficos 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 mantenerse al día con los cambios de la 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 capacidades del navegador subyacente. Por ejemplo, para manipular el Modelo de objetos del 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.
Renderizar 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 forma interoperable los estándares web. Los estándares web permiten que los desarrolladores y los usuarios finales tengan la certeza de que las páginas web funcionan bien, independientemente del 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 motores de navegadores deben implementar los elementos HTML. La especificación de cada elemento HTML incluye una sección que define la interfaz del DOM para el elemento. 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 se escribe en WebIDL: Web Interface Definition Language. 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 componen 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 la interfaz.
html_image_element.idl en el código fuente de Chromium.Bibliotecas de terceros
Blink usa varias bibliotecas de terceros. Por ejemplo, WebGL se usa para renderizar gráficos interactivos en 2D y 3D.
Las bibliotecas, como WebGL, están altamente optimizadas y se prueban cuidadosamente. Brindan a Blink acceso a funciones y características 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
Tal vez te preguntes si Chrome usa Blink en todas partes, en todos los sistemas operativos y dispositivos.
En iOS y iPadOS, Chrome usa WebKit como motor de renderización. En realidad, WebKit fue una bifurcación de otro proyecto, KDE, que se remonta a 1998. De hecho, Safari y Chromium se basaron inicialmente en WebKit. Actualmente, Safari y todos los navegadores del ecosistema de Apple usan WebKit, según los requisitos de 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 sola base de código se estaba volviendo problemático.
Además, Chromium quería usar funciones que no se estaban incorporando a 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. Bifurcaron su código de WebKit y lo llamaron Blink. Se rumorea que Blink se llamó así por la etiqueta <blink> (no tan querida) 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 otros navegadores usan WebKit, al igual que todos los navegadores en iOS y iPadOS, incluido Chrome. Firefox usa un motor de renderización llamado Gecko.