L'une des particularités du Web est sa composabilité. Les pages Web incluent diverses ressources, potentiellement provenant de plusieurs origines.
Blink sert de moteur de rendu pour Chromium, y compris Chrome, Android WebView, Microsoft Edge, Opera et Brave.
Un moteur de rendu est le composant d'un navigateur Web qui transforme le code HTML, CSS et JavaScript, ainsi que les images et autres ressources, en pages Web que vous pouvez afficher et avec lesquelles vous pouvez interagir.
Comment Blink effectue-t-il le rendu d'une page Web ?
Blink commence le processus de rendu en collectant toutes les ressources nécessaires, telles que le code HTML, CSS et JavaScript, les vidéos et les images. Pour récupérer ces ressources, Blink gère les interactions avec la pile réseau, dans Chromium et le système d'exploitation sous-jacent.
Dès que le code CSS et HTML est chargé, Blink peut le transformer, sous forme de texte, en une représentation avec laquelle il peut fonctionner. C'est ce qu'on appelle l'analyse. JavaScript doit également être analysé, puis exécuté.
Une fois que tout cela est fait, Blink commence le rendu. Le rendu consiste à disposer et à afficher les pages Web que vous consultez et avec lesquelles vous interagissez.
Le schéma suivant illustre les étapes du pipeline des tâches de rendu, y compris les composants, les processus et les ressources impliqués dans chacune d'elles. Blink a beaucoup de travail à faire !
Effectuer le rendu des graphiques
Blink utilise le moteur graphique Open Source Skia pour interagir avec le matériel graphique sous-jacent d'un ordinateur ou d'un appareil mobile.
Skia fournit des API communes qui fonctionnent sur diverses plates-formes matérielles et logicielles. Il sert de moteur graphique pour Google Chrome et de nombreux autres produits.
Au lieu d'essayer de prendre en charge différents systèmes d'exploitation et appareils, tout en suivant les modifications de la plate-forme, Skia utilise des bibliothèques graphiques, y compris OpenGL, Vulkan et DirectX. La bibliothèque utilisée par Skia dépend de la plate-forme sur laquelle elle s'exécute, par exemple Android sur mobile ou Windows sur ordinateur.
.Analyser et exécuter JavaScript
Pour analyser et exécuter du code JavaScript et WebAssembly, Blink utilise V8, un moteur Open Source développé par les projets Chromium.
V8 permet à un développeur d'utiliser du code JavaScript ou WebAssembly pour accéder aux fonctionnalités du navigateur sous-jacent. Par exemple, pour manipuler le Document Object Model, qui est la représentation interne d'un document que Blink crée à partir du code HTML.
V8 traite JavaScript conformément à la norme JavaScript, appelée ECMAScript.
Effectuer le rendu selon les normes
V8 traite JavaScript conformément à la norme JavaScript, appelée ECMAScript. Les moteurs de rendu tels que Blink sont conçus pour implémenter de manière interopérable les normes Web. Les normes Web permettent aux développeurs et aux utilisateurs finaux d'être sûrs que les pages Web fonctionnent correctement, quel que soit le navigateur qu'ils utilisent.
Blink suit les spécifications des fonctionnalités du navigateur et du langage définies dans les normes Web, y compris HTML, CSS et DOM.
HTML et DOM
La norme HTML définit comment les ingénieurs de navigateur doivent implémenter les éléments HTML. La spécification de chaque élément HTML inclut une section qui définit l' interface DOM de l'élément. Elle explique comment JavaScript doit être implémenté par le navigateur pour permettre l'interaction avec l'élément de manière standardisée sur les appareils et les plates-formes.
La spécification de l'interface est écrite en
WebIDL : Web
Interface Definition Language. Le code WebIDL suivant fait partie de la définition de HTMLImageElement de la norme HTML.
[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 est une méthode standardisée pour décrire les interfaces fonctionnelles, comme celles qui composent la plupart des normes Web.
Pour implémenter une fonctionnalité, les ingénieurs placent ce code WebIDL dans un fichier, qui est automatiquement transformé par Blink pour fournir une interface aux développeurs pour cette fonctionnalité. Une fois l'interface définie avec WebIDL, les ingénieurs peuvent créer les implémentations qui répondent aux appels d'interface.
html_image_element.idl dans la source Chromium.Bibliothèques tierces
Blink utilise plusieurs bibliothèques tierces. Par exemple, WebGL est utilisé pour effectuer le rendu de graphiques 2D et 3D interactifs.
Les bibliothèques telles que WebGL sont hautement optimisées et soigneusement testées. Elles donnent à Blink accès à des fonctionnalités importantes, sans avoir à réinventer la roue. L'IDL WebGL est défini, et les ingénieurs Blink connectent cette interface Web au code et aux bibliothèques du backend qui sont utilisés pour effectuer le rendu de nombreux éléments différents .
Si vous souhaitez voir WebGL en action, consultez l'application de rendu fractal Fractious, qui utilise WebGL.
Rendu multiplate-forme
Vous vous demandez peut-être si Chrome utilise Blink partout, sur tous les systèmes d'exploitation et appareils.
Sur iOS et iPadOS, Chrome utilise WebKit comme moteur de rendu. WebKit était en fait une branche d'un autre projet, KDE, qui remonte à 1998. En fait, Safari et Chromium étaient tous deux initialement basés sur WebKit. Aujourd'hui, Safari et tous les navigateurs de l'écosystème Apple utilisent WebKit, conformément aux exigences de l'App Store d'Apple .
Au fil du temps, les projets Chromium ont développé une architecture logicielle multiprocessus différente, car la maintenance de deux architectures distinctes dans une seule base de code devenait problématique.
De plus, Chromium souhaitait utiliser des fonctionnalités qui n'étaient pas intégrées à WebKit. Ainsi, à partir de la version 28, les ingénieurs Chromium ont décidé de commencer à travailler sur leur propre moteur de rendu. Ils ont créé une branche de leur code à partir de WebKit et l'ont appelée Blink. La rumeur dit que Blink a été nommé d'après la balise (pas si) appréciée
<blink> qui était disponible dans le navigateur Netscape Navigator pour faire clignoter le texte.
En résumé, Chrome, Microsoft Edge, Opera, Vivaldi, Arc, Brave et d'autres navigateurs et frameworks basés sur Chromium utilisent Blink. Safari et certains autres navigateurs utilisent WebKit, ainsi que tous les navigateurs sur iOS et iPadOS, y compris Chrome. Firefox utilise un moteur de rendu appelé Gecko.