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
|
---
title: WebAssembly
slug: WebAssembly
tags:
- WebAssembly
- wasm
translation_of: WebAssembly
---
<div>{{WebAssemblySidebar}}</div>
<p class="summary" dir="ltr" id="docs-internal-guid-22bb55aa-d69e-e8ef-cbc6-aafea272f684">WebAssembly 是一種新的低階程式語言，可在今日的網頁瀏覽器中被執行 —— 它是低階的類組合語言，具有嚴謹的二進位格式，能以接近原生應用程式的效能執行，並提供如 C/C++ 等語言一個構建目標，使它們能在 Web 上被執行。他也被設計為可與 JavaScript 共存，允許兩者一同工作。</p>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>簡而言之</strong></span></font></p>
<p>WebAssembly 對於網路平台而言具有極大的意義 —— 它提供了一種方式，使得那些以各種語言編寫的程式都能以接近原生的速度於 Web 環境中執行，在這條件下，先前無法以此種方式運作的用戶端軟體皆能在 Web 中被執行。</p>
<p>WebAssembly 被設計來與 JavaScript 協同工作 —— 藉由 WebAssembly 的 JavaScript API，你可以把 WebAssembly 模組載入至一個 JavaScript 應用程式，並在兩者間共享功能。這允許你在同一應用程式內彈性地發揮 WebAssembly 的高效能威力同時兼顧 JavaScript 的表達力與高靈活性，即便你可能不知道如何編寫 WebAssembly 程式碼。</p>
<p dir="ltr">而且更棒的是， 這是通過 <a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a> 開發的一項網路標準，並也得到來自各大主要瀏覽器廠商的積極參與。</p>
<div class="row topicpage-table">
<div class="section">
<h2 dir="ltr" id="指南">指南</h2>
<dl>
<dt><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly 概念</a></dt>
<dd>藉由閱讀 WebAssembly 後的高階概念開始 —— 也就是說，它為何是如此有用，是如何相容網路平台（及其他），和如何使用它。</dd>
<dt><a href="/en-US/docs/WebAssembly/C_to_wasm">將 C/C++ 模組編譯為 WebAssembly</a></dt>
<dd>當你使用 C/C++ 編寫程式後，你可以使用諸如 <a href="/en-US/docs/Mozilla/Projects/Emscripten/">Emscripten</a> 等工具將其編譯為 .wasm 文件。讓我們看看它是如何實作的。</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm">從現有的 C 模組編譯為 WebAssembly</a></dt>
<dd>WebAssembly 核心的使用案例是期望能讓開發者在 Web 環境中使用現存 C 的生態環境。</dd>
<dt><a href="/en-US/docs/WebAssembly/Loading_and_running">載入並運行 WebAssembly 程式碼</a></dt>
<dd>本文介紹如何透過把 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 或 <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> API 與 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly JavaScript</a> API 結合起來、編譯及實例化 .wasm 文件。</dd>
<dt><a href="/en-US/docs/WebAssembly/Caching_modules">快取編譯後的 WebAssembly 模組</a></dt>
<dd>就加速應用程式速度而言，在用戶端快取較大的 WebAssembly 模組是有效的。本文解釋如何使用 <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> 來實作這一點。</dd>
<dt><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">使用 WebAssembly 的 JavaScript API</a></dt>
<dd>當你載入一個 .wasm 模組後，你就用到它。在本文中將向你展示如何透過 WebAssembly 的 JavaScript API 來使用 WebAssembly。</dd>
<dt><a href="/en-US/docs/WebAssembly/Exported_functions">導出 WebAssembly 函數</a></dt>
<dd>被導出的 WebAssembly 函數是用 JavaScript 來表示 WebAssembly 函數的封裝，並允許從 JavaScript 調用 WebAssembly 原始碼。本文將描述他們。</dd>
<dt><a href="/en-US/docs/WebAssembly/Understanding_the_text_format">了解 WebAssembly 的文件格式</a></dt>
<dd>本文介紹了 .wasm 的文件格式。這是在進行偵錯時由瀏覽器開發工具中展現出 .wasm 模組的一種低階文件格式。</dd>
<dt><a href="/en-US/docs/WebAssembly/Text_format_to_wasm">把 WebAssembly 文件格式轉為 wasm</a></dt>
<dd>本文提供一個如何把以 WebAssembly 編寫的模組轉換為二進位的 .wasm 文件格式的指南。</dd>
</dl>
</div>
<div class="section">
<h2 dir="ltr" id="API_參考">API 參考</h2>
<dl>
<dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt>
<dd>This object acts as the namespace for all WebAssembly related functionality.</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt>
<dd>A <code>WebAssembly.Module</code> object contains stateless WebAssembly code that has already been compiled by the browser and can be efficiently <a href="/en-US/docs/Web/API/Worker/postMessage">shared with Workers</a>, <a href="/en-US/docs/WebAssembly/Caching_modules">cached in IndexedDB</a>, and instantiated multiple times.</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt>
<dd>A <code>WebAssembly.Instance</code> object is a stateful, executable instance of a <code>Module</code>. <code>Instance</code> objects contain all the <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a> that allow calling into WebAssembly code from JavaScript.</dd>
<dt>{{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}}</dt>
<dd>The <code>WebAssembly.instantiateStreaming()</code> function is the primary API for compiling and instantiating WebAssembly code, returning both a <code>Module</code> and its first <code>Instance</code>.</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt>
<dd>A <code>WebAssembly.</code><code>Memory</code> object is a resizable {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}} that holds the raw bytes of memory accessed by an <code>Instance</code>.</dd>
<dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt>
<dd>A <code>WebAssembly.</code><code>Table</code> object is a resizable typed array of opaque values, like function references, that are accessed by an <code>Instance</code>.</dd>
<dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
<dd>Creates a new WebAssembly <code>CompileError</code> object.</dd>
<dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
<dd>Creates a new WebAssembly <code>LinkError</code> object.</dd>
<dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
<dd>Creates a new WebAssembly <code>RuntimeError</code> object.</dd>
</dl>
</div>
</div>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>範本</strong></span></font></p>
<ul dir="ltr">
<li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li>
<li>參考我們的 <a href="https://github.com/mdn/webassembly-examples/">webassembly-範例</a> 庫來獲取更多例子。</li>
</ul>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>規範</strong></span></font></p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('WebAssembly JS')}}</td>
<td>{{Spec2('WebAssembly JS')}}</td>
<td>Initial draft definition of the JavaScript API.</td>
</tr>
</tbody>
</table>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>瀏覽器相容性</strong></span></font></p>
<div>
<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
</div>
<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>參見</strong></span></font></p>
<ul dir="ltr">
<li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
<li><a href="http://webassembly.org/">webassembly.org</a></li>
<li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li>
<li><a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a></li>
<li><a href="/en-US/docs/Web/HTTP/Headers/Large-Allocation">Large-Allocation HTTP header</a></li>
<li><a href="https://developers.google.com/web/updates/2018/03/emscripting-a-c-library">Emscripting a C Library to Wasm</a></li>
</ul>
<p> </p>
|
