1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
---
title: WebAssembly
slug: WebAssembly
tags:
- Landing
- WebAssembly
- wasm
translation_of: WebAssembly
---
<div>{{WebAssemblySidebar}}{{SeeCompatTable}}</div>
<p class="summary" dir="ltr" id="docs-internal-guid-22bb55aa-d69e-e8ef-cbc6-aafea272f684">WebAssembly est un nouveau type de code qui peut être exécuté dans un navigateur web moderne. C'est un langage bas niveau, semblable à l'assembleur permettant d'atteindre des performances proches des applications natives (par exemple écrites en C/C++) tout en fonctionnant sur le Web. WebAssembly est conçu pour fonctionner en lien avec JavaScript.</p>
<h2 dir="ltr" id="En_résumé">En résumé</h2>
<p dir="ltr">WebAssembly représente une avancée fondamentale de la plateforme web. Il permet d'exécuter du code (éventuellement écrit depuis différents langages) sur le Web avec des performances similaires aux applications natives.</p>
<p dir="ltr">WebAssembly est conçu pour être utilisé de pair avec JavaScript. Grâce à l'API JavaScript WebAssembly, on peut charger des modules WebAssembly au sein d'une application JavaScript et partager des fonctionnalités entre les deux. Cela permet de tirer parti des performances de WebAssembly et de la flexibilité de JavaScript, même si on ne sait pas écrire du code WebAssembly.</p>
<p dir="ltr">WebAssembly est conçu comme un standard web par le <a href="https://www.w3.org/community/webassembly/">groupe communautaire du W3C pour WebAssembly</a> auquel participe les différents éditeurs de navigateur.</p>
<div class="row topicpage-table">
<div class="section">
<h2 dir="ltr" id="Guides">Guides</h2>
<dl>
<dt><a href="/fr/docs/WebAssembly/Concepts">Les concepts de WebAssembly</a></dt>
<dd>Découvrez les concepts clés de WebAssembly : ce que c'est, son utilité, l'intégration dans le Web et comment l'utiliser.</dd>
<dt><a href="/fr/docs/WebAssembly/C_to_wasm">Compiler du code C/C++ en WebAssembly</a></dt>
<dd>Du code écrit en C/C++ peut être compilé en WebAssembly grâce à des outils tels que <a href="/fr/docs/Mozilla/Projects/Emscripten">Emscripten</a>. Nous voyons ici comment cela fonctionne.</dd>
<dt><a href="/fr/docs/WebAssembly/Loading_and_running">Charger et exécuter du code WebAssembly</a></dt>
<dd>Dans cet article, on aborde comment récupérer, compiler et instancier en associant l'API <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly">WebAssembly JavaScript</a> avec les API <a href="/fr/docs/Web/API/Fetch_API">Fetch</a> ou <a href="/fr/docs/Web/API/XMLHttpRequest">XHR</a>.</dd>
<dt><a href="/fr/docs/WebAssembly/Caching_modules">Mettre en cache des modules WebAssembly compilés</a></dt>
<dd>La mise en cache de grands modules WebAssembly côté client permet d'améliorer les performances au démarrage. Dans cet article, on voit comment utiliser <a href="/fr/docs/Web/API/IndexedDB_API">IndexedDB</a> pour cela.</dd>
<dt><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript de WebAssembly</a></dt>
<dd>Une fois le module WebAssembly chargé, on souhaitera l'utiliser… Dans cet article, on verra comment utiliser WebAssembly grâce à l'API JavaScript associée.</dd>
<dt><a href="/fr/docs/WebAssembly/Exported_functions">Les fonctions WebAssembly exportées</a></dt>
<dd>Les fonctions WebAssembly exportées sont les représentations JavaScript des fonctions WebAssembly qui permettent d'utiliser du code WebAssembly depuis un script JavaScript. Cet article décrit leur fonctionnement.</dd>
<dt><a href="/fr/docs/WebAssembly/Understanding_the_text_format">Comprendre le format texte WebAssembly</a></dt>
<dd>Cet article explique la composition du format texte de WebAssembly. Il s'agit d'une représentation bas-niveau du module .wasm tel que montré dans les outils de développement du navigateur.</dd>
<dt><a href="/fr/docs/WebAssembly/Text_format_to_wasm">Convertir un fichier texte WebAssembly en wasm</a></dt>
<dd>Cet article détaille comment convertir un module WebAssembly rédigé dans un format texte en un fichier binaire .wasm.</dd>
</dl>
</div>
<div class="section">
<h2 dir="ltr" id="Référence_de_l'API_JavaScript">Référence de l'API JavaScript</h2>
<dl>
<dt>{{jsxref("Objets_globaux/WebAssembly", "WebAssembly")}}</dt>
<dd>Cet objet représente l'espace de nom encapsulant les fonctionnalités relatives à WebAssembly.</dd>
<dt>{{jsxref("Objets_globaux/WebAssembly/Module", "WebAssembly.Module")}}</dt>
<dd>Un objet <code>WebAssembly.Module</code> contient du code WebAssembly, sans état, qui a déjà été compilé par le navigateur et qui peut être <a href="/fr/docs/Web/API/Worker/postMessage">partagé dans les <em>web workers</em></a>, <a href="/fr/docs/WebAssembly/Caching_modules">mis en cache dans IndexedDB</a> et instancié à plusieurs reprises.</dd>
<dt>{{jsxref("Objets_globaux/WebAssembly/Instance", "WebAssembly.Instance")}}</dt>
<dd>Un objet <code>WebAssembly.Instance</code> est une instance exécutable (disposant d'un état) d'un <code>Module</code>. Les objets <code>Instance</code> contiennent toutes les <a href="/fr/docs/WebAssembly/Exported_functions">fonctions WebAssembly exportées</a> qui permettent d'utiliser du code WebAssembly via du code JavaScript.</dd>
<dt>{{jsxref("Objets_globaux/WebAssembly/instantiate", "WebAssembly.instantiate()")}}</dt>
<dd>La fonction <code>WebAssembly.instantiate()</code> représente l'API principale pour compiler et instancier le code WebAssembly. Cette méthode renvoie un <code>Module</code> ainsi que sa première <code>Instance</code>.</dd>
<dt>{{jsxref("Objets_globaux/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt>
<dd>Un objet <code>WebAssembly.</code><code>Memory</code> est un tableau {{jsxref("Objets_globaux/ArrayBuffer", "ArrayBuffer")}} redimensionnable qui contient les octets de mémoire brute auxquels on peut accéder via une <code>Instance</code>.</dd>
<dt>{{jsxref("Objets_globaux/WebAssembly/Table", "WebAssembly.Table()")}}</dt>
<dd>Un objet <code>WebAssembly.</code><code>Table</code> est un tableau typé contenant des valeurs opaques et qui peut être redimensionné. On peut accéder aux valeurs via un objet <code>Instance</code>.</dd>
<dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
<dd>Crée un nouvel objet WebAssembly <code>CompileError</code>.</dd>
<dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
<dd>Crée un nouvel objet WebAssembly <code>LinkError</code>.</dd>
<dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
<dd>Crée un nouvel objet WebAssembly <code>RuntimeError</code>.</dd>
</dl>
</div>
</div>
<h2 dir="ltr" id="Exemples">Exemples</h2>
<ul dir="ltr">
<li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li>
<li>Notre dépôt GitHub <a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> qui contient plusieurs exemples.</li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('WebAssembly JS')}}</td>
<td>{{Spec2('WebAssembly JS')}}</td>
<td>Brouillon de définition initiale pour l'API JavaScript.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Support simple</td>
<td>57</td>
<td>16</td>
<td>{{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>11</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome pour Android</th>
<th>Webview Android</th>
<th>Edge Mobile</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Support simple</td>
<td>57</td>
<td>57</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] WebAssembly est activé sur Firefox 52 et les versions ultérieures mais est désactivée pour <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 52 Extended Support Release</a> (ESR.)</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul dir="ltr">
<li><a href="http://webassembly.org/">webassembly.org</a></li>
<li><a href="https://hacks.mozilla.org/category/webassembly/">Les articles WebAssembly sur Mozilla Hacks</a> ou sur <a href="https://tech.mozfr.org/tag/WebAssembly">tech.mozfr.org en français</a></li>
<li><a href="https://www.w3.org/community/webassembly/">Le groupe communautaire W3C sur WebAssembly</a></li>
<li><a href="/fr/docs/Web/HTTP/Headers/Large-Allocation">L'en-tête HTTP <code>Large-Allocation</code></a></li>
</ul>
|
