6分钟了解WebAssembly
WebAssembly 于 2019 年 12 月 5 日与 HTML、CSS 和 Javascript 一起成为 Web 标准。这将在很多方面发挥作用，而且就性能而言，它在浏览器中是前所未有的。如果您有五分钟时间，我想向您解释一下这场正在发生的变革。
曾几何时
1995年， Brendan Eich仅用了10天就创建了JavaScript 。当时，JavaScript的设计初衷并非追求速度，它主要用于表单验证，速度慢得令人发指。随着时间的推移，它的性能得到了显著提升。
2008 年，谷歌横空出世，推出了全新的浏览器：谷歌 Chrome。Chrome 内部搭载了名为 V8 的 JavaScript 引擎。V8的革命性之处在于它实现了 JavaScript 的即时 (JIT) 编译。这种从解释型代码到 JIT 编译的转变极大地提升了 JavaScript 的性能，进而提升了整个浏览器的性能。这种速度的提升催生了 NodeJS 和 Electron 等技术的诞生，并最终促成了 JavaScript 的爆炸式增长。
2015年，WebAssembly首次发布，并展示了一个在Unity引擎下运行的小游戏演示。该游戏直接在浏览器中运行！
2019年，W3C将WebAssembly确立为新的Web标准。正如当年的V8引擎一样，WebAssembly正逐渐成为新一轮的性能革命。WebAssembly已经到来，并且发展势头迅猛。
什么是 WebAssembly？
WebAssembly（简称 wasm）是一种允许你在浏览器中使用非 JavaScript 代码运行的技术。这些代码可以是 C、C++、Rust 等多种语言编写的。它会在你的浏览器中编译运行，并且速度接近原生 CPU 的性能。这段代码以二进制文件的形式存在，你可以直接在 JavaScript 中将其作为模块调用。
WebAssembly 并非旨在取代 JavaScript。恰恰相反，这两种技术旨在协同工作。通过使用JavaScript API，您可以将 WebAssembly 模块加载到页面中。这意味着您可以利用 WebAssembly 编译代码的性能优势，同时又能享受 JavaScript 的灵活性。
WebAssembly 这个名字有点误导性。WebAssembly的确是为 Web 设计的，但它的应用范围远不止于此！ WebAssembly 的开发团队投入了大量精力使其通用化，以便它可以被应用到任何地方。我们已经开始看到一些这样的例子。
此外，还有一个经常出现的误解。WebAssembly不是一种编程语言。WebAssembly是一种中间格式，一种字节码，它作为其他语言的编译目标。好吧，如果这还不够清楚，我们来画一些图。
它是如何运作的？
你看到了吗？又一件艺术品。你相信我用的是 Photoshop 吗？总之！
-
第一步：这完全取决于你和你的开发技能。你需要用 C 或 C++（也可以使用其他语言）编写源代码。这段代码的目的是修复一个问题，或者让浏览器中 JavaScript 无法胜任的复杂操作变得更高效。
-
步骤 2：您将使用Emscripten进行转换。Emscripten是一个基于LLVM 的工具链，它可以将您的源代码编译成 WebAssembly 。您只需几个简单的步骤即可安装并编译任何您想要的代码，我们稍后会详细介绍。完成此步骤后，您将得到一个 WASM 文件。
-
步骤 3：您将在网页中使用 WASM 文件。如果您来自未来，您可以像加载任何 ES6 模块一样加载此文件。目前，其用法稍微复杂一些，但并不复杂。
好，让我们开始动手吧。
请把代码给我看看。
首先，我们需要一小段 C++ 代码来编译。有些人可能会用浏览器中的完整 Diablo 1 游戏作为示例，但我这里只用一个简单的函数来计算两位数的和。我们并不是要用这个函数来证明 C++ 的速度，它只是个例子。
int add(int firstNumber, int secondNumber) {
return firstNumber + secondNumber;
}
然后打开你选择的Linux发行版。我们首先下载并安装emscripten。
# installing dependencies (yes, you can use newer version of python)
sudo apt-get install python2.7 git
# gettin emscripten via a git clone.
git clone https://github.com/emscripten-core/emsdk.git
# downloading, installing and activating the sdk
cd emsdk
./emsdk install latest
./emsdk activate latestl
source ./emsdk\_env.sh
# make sure the installation worked
emcc --version
# compiling the c++ file to a webassembly template
emcc helloWebassembly.cpp -s WASM=1 -o helloWebassembly.html
# we serve the HTML and look at the result
emrun helloWebassembly.html
那是黑客式的编写 wasm 的方法。其实还有更简单的方法。
您可以访问这个网站，将您的 C++ 代码放在左侧。然后，您会在 WAT 部分看到导出的函数名称。使用之前显示的 add 函数代码，我得到的函数名称是“_Z3addii”，我们将在后面使用它。您只需点击下载，即可获得您的 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>
就是这样。这个 HTML 网页允许你使用编译成 WebAssembly 的 C++ 代码！我省略了所有 HTML 和显而易见的部分，直接跳到第 11 行的InstantiateStreaming函数。正如Mozilla 文档所述，这个函数允许你通过简单的 fetch 操作来编译并实例化我们的 WebAssembly 模块。
然后，我使用之前获取到的函数名调用 add 函数，并用它来替换 DOM 中的一段元素。瞧！C++ 通过 JavaScript 在你的浏览器中运行了。是不是很神奇？看，我还为你创建了一个CodeSandbox示例。我把它嵌入到这里，快来体验一下吧！
你会说这很复杂，你说得对。他们正在努力，将来用简单的导入语句替换掉实例化的 JavaScript 代码。所以耐心点，它很快就会来了。
结语
我们已经聊了五分钟了，所以我就说到这里吧。如果你想了解更多关于 WebAssembly 的信息，并且时间充裕，我推荐你阅读这篇精彩的文章，深入了解这个主题。至于接下来的发展，我很期待 Web 对其他语言的开放会带来什么。它蕴藏着巨大的潜力，我迫不及待地想看到 Web 的速度更快！
文章来源：https://dev.to/jesuisundev/understand-web assembly-in-6-minutes-2105