在5分钟内了解WebAssembly

WebAssembly于2019年12月5日加入HTML、CSS和Javascript成为Web标准。这对很多事情都很有用，就性能而言，这在浏览器中是前所未见的。如果你有5分钟的时间，我需要解释一下正在进行的这场小小的革命。

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(缩写为wasm)是使用非Javascript代码并在浏览器中运行它的一种方式。此代码可以是C、C++、Rust和许多其他代码。它将在您CPU上以接近本机速度在您的浏览器中编译和运行。此代码采用二进制文件的形式，您可以直接从Javascript中将其作为模块使用。

WebAssembly不是用来取代Javascript的。相反，这两种技术是协同工作的。通过使用Javascript API，您可以将WebAssembly模块加载到页面中。这意味着您可以利用Javascript的灵活性通过WebAssembly利用编译代码的性能。

WebAssembly这个名称有点误导。WebAssembly确实适用于Web，但并不局限于此！开发WebAssembly的团队费了很大劲才使其成为通用的，以便可以在任何地方使用。我们开始看到这样的例子。

此外，还有一种误解一直在出现。WebAssembly不是一种编程语言。WebAssembly是一种中间格式，即字节码，它充当其他语言的编译目标。好的，现在还不清楚，我们来画几张画吧。

你看到了吗？又一件艺术品。如果我告诉你我用的是Photoshop，你相信我吗？不管怎么说！

第一步：是您和您的开发人员技能。您可以用C、C++生成源代码(您可以使用其他语言)。此代码用于修复问题或使浏览器中的Javascript无法执行过于密集的进程。

步骤2：您将使用Emscripten进行翻译。Emscripten是一个工具链，使用LLVM构建，可以将源代码编译成WebAssembly。您可以在几个快速步骤中安装和编译您想要的任何内容，我们稍后将对其进行介绍。在此步骤结束时，您将拥有一个WASM文件。

步骤3：您将在您的网页上使用WASM文件。如果您来自未来，您可以像加载任何ES6模块一样加载此文件。现在，用法稍微复杂一些，但没什么特别的。

首先，我们需要一小段C++代码来编译。有些人会在浏览器中向你提供整个暗黑破坏神1游戏作为例子，我会用一个加两位数的函数来保持它的简单性。我们不会用这个来证明C++的速度，这只是个例子。

然后转到您选择的Linux发行版。我们将从下载和安装Emscripten开始。

#安装依赖项(可以，您可以使用更新版本的Python)sudo apt-get install python2.7git#gettin Emscripten通过GIT克隆。git克隆https://github.com/emscripten-core/emsdk.git#下载、安装并激活sdkcd emsdk./emsdk安装最新版本。/emsdk激活latestlsource。/emsdk_env.sh#确保安装工作demcc-version#将c++文件编译为Web程序集模板

这就是海克曼的作风。有一种更简单的方法。

你可以去这个网站，把你的C++代码放在左边。然后，您将在Wat部件中获得导出函数的名称。使用我之前显示的添加函数代码：“_Z3addi”作为函数名，我们将在后面使用它。您只需单击“下载”，您就会拿回您的WASM文件。放松点！

现在，我们可以让WebAssembly直接在浏览器中工作，而没有周围所有烦人的噪音。

<；html>；<；head>；<；title>；WASM test<；/title>；<；link rel="；style heet"；href="；/style heets/style.css&34；/>；<；/head>；<；body>；<；script>；const getRt；https://012q1.sse.codesandbox.io/wasm/add.wasm"；)).Then(obj=>；obj.instance.exports._Z3addi).Then(Add=>；{document.getElementById("；addTarget"；).textContent=Add(getRandomNumber()，getRandomNumber())；})；；<；/script>；<；h1>；reésultat du C++<；/h1>；<；p id="；addTarget"；&。<；/p>；<；/body>；<；/html>；

就是这个。此html网页允许您使用C++编译成WebAssembly！我跳过所有HTML和明显的内容，使用InstantiateStreaming函数直接转到第11行。正如Mozilla文档所说，此函数允许您通过简单的FETCH编译和实例化我们的WebAssembly模块。

然后，我通过前面检索到的函数名使用Add函数，并用它替换一段DOM。瞧啊！C++通过浏览器中的Javascript实现。这有多疯狂？听着，我甚至给你做了一个带工作演示的代码箱。我就把它嵌在这里，玩吧！

你要告诉我光是这样做就很复杂，你是对的。他们正在努力将实例化javascript位替换为将来的简单导入。所以耐心点，它马上就来了。

我们已经谈了五分钟了，所以我就到此为止了。如果您想更多地了解WebAssembly，并且您面前还有时间：我推荐这篇优秀的文章更深入地研究这个主题。在接下来的故事中，我期待着Web对其他语言的开放将带来什么。有很大的潜力，我迫不及待地想让网络变得更快！