L'un des pouvoirs spéciaux du Web est sa composabilité. Les pages Web incluent diverses ressources, potentiellement provenant de plusieurs origines.
Blink sert de moteur de rendu pour les navigateurs basés sur 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 d'autres ressources, en pages Web que vous pouvez afficher et avec lesquelles vous pouvez interagir.
Comment Blink génère-t-il une page Web ?
Blink commence le processus de rendu en rassemblant toutes les ressources nécessaires, telles que le code HTML, CSS, 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 CSS et le HTML sont chargés, Blink peut transformer ce code, sous forme de texte, en une représentation avec laquelle il peut travailler. C'est ce qu'on appelle l'analyse. JavaScript doit également être analysé, puis exécuté.
Une fois cette étape terminée, Blink peut commencer à mettre en page et à afficher les pages Web que vous pouvez consulter et avec lesquelles vous pouvez interagir. C'est ce qu'on appelle le rendu.
Le schéma suivant montre les étapes du pipeline de 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 !
Rendre des graphiques
Blink utilise le moteur graphique Skia Open Source 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 changements de 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, comme 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 (modèle objet de document), qui est la représentation interne d'un document que Blink crée à partir du code HTML.
V8 traite le code JavaScript conformément à la norme JavaScript, appelée ECMAScript.
Rendu conforme aux normes
V8 traite le code 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 de s'assurer 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 de la langue définies dans les normes Web, y compris HTML, CSS et DOM.
HTML et DOM
La norme HTML définit la manière dont 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 pour l'élément. Il explique comment JavaScript doit être implémenté par le navigateur pour permettre l'interaction avec l'élément de manière standardisée sur tous les appareils et plates-formes.
La spécification de l'interface est écrite en WebIDL (langage de définition d'interface Web). Le WebIDL suivant fait partie de la définition de la HTMLImageElement dans 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 un moyen standardisé de décrire les interfaces fonctionnelles, comme celles qui constituent 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 permet d'afficher des graphiques 2D et 3D interactifs.
Les bibliothèques telles que WebGL sont hautement optimisées et soigneusement testées. Ils 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 afficher 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 tous les appareils.
Sur iOS et iPadOS, Chrome utilise WebKit comme moteur de rendu. WebKit était en fait un fork 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 gestion de deux architectures distinctes dans un même codebase devenait problématique.
De plus, Chromium souhaitait utiliser des fonctionnalités qui n'étaient pas intégrées à WebKit. À partir de la version 28, les ingénieurs Chromium ont donc 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 veut que Blink ait été nommé d'après la balise <blink> (pas si appréciée) disponible dans le navigateur Netscape Navigator pour faire clignoter le texte.
Pour résumer : 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.
Étapes suivantes
Consultez Qu'est-ce qu'un intent Blink ?