Maison > interface Web > js tutoriel > Introduction à WebAssembly

Introduction à WebAssembly

Linda Hamilton
Libérer: 2025-01-20 12:29:13
original
593 Les gens l'ont consulté

WebAssembly (WASM) – Une plongée en profondeur : partie 1

Cet article lance une série explorant WebAssembly. Trouvez des liens vers d’autres parties de la série ci-dessous.

WebAssembly, ou WASM, est un langage de bas niveau de type assembleur conçu pour exécuter des applications créées à l'aide de divers langages de programmation dans un navigateur Web. Sa nature multiplateforme et sa conception de bas niveau offrent une vitesse quasi native, libérant des fonctionnalités Web auparavant impossibles avec JavaScript seul. Si vous aspirez à des applications Web plus rapides, capables de gérer des tâches gourmandes en calcul, WASM est la solution. Cette introduction couvrira les fonctionnalités de base de WASM, ses origines et comment commencer à l'utiliser.

Qu'est-ce que WebAssembly ?

WebAssembly est une cible de compilation de bas niveau spécialement conçue pour les navigateurs Web. Ce n'est pas un langage d'exécution directe ; au lieu de cela, il définit une structure de type assemblage dans laquelle d'autres langages compilent dans. Cet aspect « cible de compilation » est clé.

Considérez cet exemple de code C :

<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>
Copier après la connexion
Copier après la connexion

Un compilateur C traduit cela en instructions d'assemblage (ou code machine) :

<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>
Copier après la connexion
Copier après la connexion

Ceci, à son tour, produit une représentation binaire :

<code>00000000000000000000000000000011</code>
Copier après la connexion
Copier après la connexion

(Remarque : la sortie binaire exacte varie en fonction de l'architecture du processeur. Il s'agit d'une illustration simplifiée.)

Introduction to WebAssembly

Le code C se transforme en assembleur, puis en binaire – directement exécutable par l'ordinateur. WebAssembly modifie ce processus. Au lieu d'un assemblage standard, le compilateur peut produire :

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>
Copier après la connexion
Copier après la connexion

(Il s'agit d'une syntaxe hypothétique à des fins d'illustration uniquement, et non de la syntaxe WASM réelle.)

Introduction to WebAssembly

Si tous les navigateurs comprenaient cette syntaxe, cela révolutionnerait le développement web. Les compilateurs pour des langages comme C , Rust et Go pourraient générer cette sortie, permettant l'exécution par navigateur de programmes écrits dans n'importe quel langage, quel que soit le système d'exploitation ou le navigateur.

La spécification WebAssembly définie par le W3C garantit une gestion cohérente de WASM par le navigateur. Les principaux navigateurs prennent déjà en charge WebAssembly de manière native.

Représentations WebAssembly

WebAssembly a deux formats principaux :

  • WAT (WebAssembly Text) : Un format textuel pour le débogage et la compréhension du code.
  • WASM (WebAssembly Module) : Un format binaire pour l'exécution du navigateur.

Ces formats sont interchangeables ; WAT peut être converti en WASM et vice-versa. La compilation vers l'un ou l'autre est possible.

Syntaxe WebAssembly de base (WAT)

Reprenons notre exemple utilisant WAT :

  1. Déclarez trois variables entières de 32 bits :
<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>
Copier après la connexion
Copier après la connexion
  1. Attribuer des valeurs :
<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>
Copier après la connexion
Copier après la connexion
  1. Ajouter et stocker le résultat :
<code>00000000000000000000000000000011</code>
Copier après la connexion
Copier après la connexion

WebAssembly utilise une machine à pile. get_local pousse les valeurs sur la pile, i32.add ajoute les deux premiers éléments de la pile et set_local stocke le résultat. L'équivalent binaire WASM est :

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>
Copier après la connexion
Copier après la connexion

Bien que cela puisse paraître complexe, n'oubliez pas que WASM est une cible de compilation et non un langage de programmation principal. Vous écrirez généralement du code dans des langages de niveau supérieur et le compilerez vers WASM.

WebAssembly remplacera-t-il JavaScript ?

Non. WASM est conçu pour compléter JavaScript, pas pour le remplacer. JavaScript excelle dans la manipulation du DOM et les interactions Web de base, tandis que WASM gère les tâches gourmandes en calcul avec des performances quasi natives. Cette synergie permet une répartition efficace des tâches.

Cas d'utilisation de WebAssembly

Les performances de WASM le rendent idéal pour :

  1. Traitement d'images et de vidéos
  2. Jeux (y compris 3D)
  3. Applications musicales
  4. Cryptographie
  5. Outils de visualisation
  6. Simulateurs et émulateurs

Des exemples d'applications WASM existantes incluent Figma, Amazon Prime Video et Google Earth.

WebAssembly au-delà du navigateur

Bien qu'initialement axées sur le navigateur, les capacités de WASM s'étendent au-delà du Web grâce à WASI (WebAssembly System Interface). WASI fournit des API standard, permettant la création d'applications multiplateformes à partir d'un seul binaire, éliminant ainsi le besoin de builds spécifiques à la plateforme.

Avant WebAssembly

Plusieurs projets précédents ont tenté d'exécuter d'autres langages dans les navigateurs, mais ont souvent été confrontés à des limitations dues au manque de standardisation, à des vulnérabilités de sécurité ou à des problèmes de performances (ActiveX, Applets Java, Flash, NaCl, asm.js, Dart). WebAssembly comble ces lacunes grâce à la standardisation, la portabilité, la sécurité, les performances et l'extensibilité.

Conclusion

Cette introduction fournit un aperçu de haut niveau de WebAssembly. Les articles suivants approfondiront des sujets spécifiques et exploreront des projets WebAssembly pratiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal