2019 年 12 月 5 日，WebAssembly正式加入 HTML、CSS 和 JavaScript 的 Web 标准大家庭。很多事情都会受益于这一全新的标准，并且它在浏览器中的性能表现是空前的。

WebAssembly的诞生背景

1995 年，布伦丹·艾希（Brendan Eich）用了不到 10 天就创建了 JavaScript。那时，JavaScript 的设计并非以速度见长。它基本上是用于表单验证的，同时速度非常缓慢。随着时间的流逝，它也在一天天变好。

在 2008 年，异军突起的谷歌推出了自己全新的浏览器 Chrome。Chrome 内部有一个名为 V8 的 JavaScript 引擎，V8 的革命性进步是对 JavaScript 的即时（JIT）编译。从解释代码到 JIT 编译的这种转变大幅提升了 JavaScript 的性能，从而让整个浏览器的速度变得飞快。如此快的速度将催生 Node.js或 Electron 等技术，并推动 JavaScript 迎来爆炸式增长。

在 2015 年，WebAssembly首次发布，并提供了一个运行在 Unity 下的游戏的小型演示。这款游戏是直接在浏览器中运行的。

在 2019 年，W3C 使 WebAssembly成为了新的 Web 标准。就像 V8 引擎一样，WebAssembly即将带来全新的性能革命。它的身影已经出现在了 Web 的赛道上，枪声一响便遥遥领先。

什么是 WebAssembly？

WebAssembly（缩写为 wasm）是一种使用非 JavaScript 代码，并使其在浏览器中运行的方法。这些代码可以是 C、C++ 或 Rust 等。它们会被编译进你的浏览器，在你的 CPU 上以接近原生的速度运行。这些代码的形式是二进制文件，你可以直接在 JavaScript 中将它们当作模块来用。

WebAssembly不能替代 Javascript，相反，这两种技术是相辅相成的。通过 JavaScript API，你可以将 WebAssembly模块加载到你的页面中。也就是说，你可以通过 WebAssembly来充分利用编译代码的性能，同时保持 JavaScript 的灵活性。

WebAssembly这个名字有点误导人，它确实适用于 Web，但它的使用场景远不止于此。此外，WebAssembly不是编程语言，它是一种中间格式，叫字节码，可以作为其他语言的编译目标。

它是如何工作的？

第一步：你使用 C、C++ 或其他语言生成源代码，这段代码应该可以解决某个问题，或者完成某段对浏览器中的 JavaScript 来说太过复杂的流程。

第二步：使用 Emscripten 将你的源代码编译为 WebAssembly，这一步完成时，你将得到一个 wasm文件。

第三步：你将在网页上使用这个 wasm文件，将来你可以像其他 ES6 模块一样加载这个文件。

下面以简单的代码示例来说明这个过程：

首先，你需要一小段 C++ 代码来编译。以下是一个添加两位数的函数：

int add(int firstNumber, int secondNumber) {return firstNumber + secondNumber;
}

接着转到你选择的 Linux 发行版。第一步是下载并安装 Emscripten：

安装依赖项（是的，你可以使用 python 的较新版本）

sudo apt-get install python2.7 git

通过一个 git 克隆获取 emscripten

git clone https://github.com/emscripten-core/emsdk.git

下载，安装并激活 sdk

cd emsdk
./emsdk install latest
./emsdk activate latestl
source ./emsdk_env.sh

确认安装的内容可以正常运行

emcc --version

将这个 c++ 文件编译到一个 webassembly 模板

emcc helloWebassembly.cpp -s WASM=1 -o helloWebassembly.html

启动 HTML 并观察结果

emrun helloWebassembly.html

如代码所示，这是极客处理 wasm 文件的办法。

接下来，将你的 C++ 代码放在左侧。然后，你将在 WAT 部分中获得导出函数的名称（_Z3addii），你只需点进 download ，就可以获取 wasm文件，非常简单。

现在，你就可以让 WebAssembly直接运行在浏览器中了，没有那么多麻烦的事情。

<html><head><title>WASM test</title><link rel="stylesheet" href="/stylesheets/style.css" /></head><body><script>const getRandomNumber = () => Math.floor(Math.random() * 10000);WebAssembly.instantiateStreaming(fetch("https://012q1.sse.codesandbox.io/wasm/add.wasm")).then(obj => obj.instance.exports._Z3addii).then(add => {document.getElementById("addTarget").textContent = add(getRandomNumber(),getRandomNumber());});</script><h1>Résultat du C++</h1><p id="addTarget"></p></body>
</html>

以上就是今天的内容，你可以点击原文链接了解完整的分享，希望能给你带来启发。
英文原文：https://www.jesuisundev.com/en/understand-webassembly-in-5-minutes/

asm.js 和 Emscripten 入门教程https://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html

WebAssembly简介相关推荐

webassembly_全球最简单的WebAssembly简介？
webassembly by Martin Olsansky (olso) 由Martin Olsansky(olso) 全球最简单的WebAssembly简介? (The world's easie ...
通过 Serverless 加速 Blazor WebAssembly
Blazor ❤ Serverless 我正在开发 Ant Design 的 Blazor 版本,预览页面部署在 Github Pages 上,但是加载速度很不理想,往往需要 1 分钟多钟才完成. 项 ...
《WebAssembly 权威指南》（7）WebAssembly 表
本文是<WebAssembly 权威指南>系列文章第 7 篇,系列文章列表: <WebAssembly 权威指南>连载公告 <WebAssembly 权威指南>(1 ...
python wasm_Go WebAssembly (Wasm) 简明教程
Go WebAssembly (Wasm) 简明教程 1 WebAssembly 简介WebAssembly是一种新的编码方式,可以在现代的网络浏览器中运行 - 它是一种低级的类汇编语言,具有紧凑的二 ...
代码实现sql编译器_TiDB-Wasm 原理与实现 | Hackathon 优秀项目介绍
作者:Ti-Cool 上周我们推送了<让数据库运行在浏览器里?TiDB + WebAssembly 告诉你答案>,向大家展示了 TiDB-Wasm 的魅力:TiDB-Wasm 项目是 Ti ...
【科普文】JavaScript前世今生 and 安全隐患
目录 ECMAScript javascript前世今生版本 ES6 特性引擎 V8 SpiderMonkey JavaScriptCore ChakraCore JScript JerryScr ...
浅谈WebAssmebly，在浏览器上进行图像处理
浅谈WebAssmebly,在浏览器上进行图像处理自从2008年各大浏览器为JavaScript执行引擎加入JIT(Just in Time, 即时编译器)以来,JavaScript在浏览器的执行性 ...
WASM（WebAssembly）简介
WASM WASM(WebAssembly)是一种低级别的字节码,可以运行在现代网页浏览器中.这种字节码被设计成与JavaScript紧密结合,使得通过JavaScript API 可以方便地调用WA ...
【LiveVideoStack线上分享】WebAssembly在Web多媒体领域的相关实践
随着 Wasm 近些年来的不断发展,已经有越来越多的人开始尝试使用 Wasm 在各个子领域进行创新性实践,其中就不乏 Wasm 在 Web 音视频领域的相关实践.通过借助 Wasm 的高效字节码解析和 ...

WebAssembly简介