你知道WebAssembly吗？

其实对于我而言，之前有了解过 WebAssembly，知道他很强大，但是没有实际的使用过。偶然间在调研和使用 ffmpeg 的过程中，看到了很多浏览器端的方案，都是使用了 WebAssembly，原来已经有很多实际的应用真的在使用它，那么它是不是 web 的未来呢？这篇文章主要就是带大家走进 WebAssembly，网上有很多类似的文章，但对于大多数的前端同学来说可能有难以理解的地方，所以本次文章尽量用通俗易懂的方式带大家了解 WebAssembly。,「官方的解释」：WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式，是由主流浏览器厂商组成的 W3C 社区团体制定的一个新的规范。,「我们来通俗的解释」：WebAssembly 能够把非 JavaScript 代码运行在浏览器中，这些代码可以是C、C++、Rust等等。,WebAssembly 提供了一种在网络平台以接近本地速度的方式运行多种语言编写的代码的方式。,,WebAssembly原理,Web 平台可以看成有两个部分：,VM，用于运行 Web 应用代码，例如 JS 引擎运行 JS 代码​​,Web API，例如 DOM、CSSOM、WebGL、IndexedDB、Web Audio API​,在以前，VM 只能加载 JS 运行，JS 可能足够满足我们的需求，但如今JS会有各种各样的原生性能的领域，比如3D 游戏、VR/AR、计算机视觉、图片/视频编辑等，并且，下载和解析体积比较大的JS是很困难的。,随着 WebAssembly 的出现，上述提到的 VM 现在可以加载两种类型的代码执行：JavaScript 和 WebAssembly。,虽然同样运行在浏览器中，但是 WebAssembly 不是用来替代 Javascript 的，他们其实是相辅相成的。WebAssembly 会被编译进你的浏览器，在你的 CPU 上以接近原生的速度运行。你可以直接在 JavaScript 中将它们当作模块来用。也就是说，你可以通过 WebAssembly来充分利用编译代码的性能，同时保持 JavaScript 的灵活性。WebAssembly 其实是一种中间格式。,JS 是高层次的语言，灵活且极具表现力，动态类型、不需要编译步骤，并且有强大的生态，非常易于编写 Web 应用。,WebAssembly 是一种低层次、类汇编的语言，使用一种紧凑的二级制格式，能够以近乎原生的性能运行，并提供了低层次的内存模型，是 C++、Rust 等语言的编译目标，使得这类语言编写的代码能够在 Web 上运行。,我们先来看下 WebAssembly 在浏览器中的位置：,,WebAssembly在浏览器中的位置,根据上图，我们先来看下 JavaScript 在 Web 中所做的工作：,,每个图形大概的表示每个阶段消耗的时间，JS 在 Web 中主要经过了这些过程,我们再来看下 WebAssembly 在 Web 中所做的工作：,,因为 Wasm 的特性和它特殊的格式，在很多情况下，Wasm 比 Javascript 要更快,「WebAssembly 编写和使用过程:」,,下面我们具体看下每一步中的实际例子：,安装程序会设置所有 Emscripten 运行所需要的环境变量。,WebAssembly 对象是原生提供的包含了所有 WebAssembly 相关功能的命名空间 其中 WebAssembly.Instance 对象是一个有状态的、可执行的模块的实例。实例对象包含所有的能够从 JavaScript 调用到 WebAssembly 代码的导出的 WebAssembly 函数。MDN WebAssembly API参考,,总结一下上面的内容，其实就是两种语言之间以 wasm 为桥梁进行了一次通信：,,上面的整个步骤就是我们从环境搭建到最后使用 wasm 文件的流程，当前你所使用的语言可能不同，所使用的编译工具自然也不同。并且以上只是最简单的使用方式，如果考虑到性能、优化等问题，还有很深的内容值得探讨。,figma – 基于浏览器的多人实时协作 UI 设计工具,- https://www.figma.com/,Google Earth — 支持各大浏览器的 3D 地图，而且运行流畅,- https://earth.google.com/web/​,可以看到的是，很多现代浏览器对于 WebAssembly 的支持越来越好，未来的趋势对于 Webassembly 来说是向好的,,当前 WebAssembly 大多数被用在对原生能力有很高要求的地方，或者是将一些应用程序移植到 Web，但是 WebAssembly 并不仅仅局限在浏览器，它还被应用在使代码跨平台、跨设备工作。,WebAssembly 到底是不是 web 的未来？现在来看的话，它还在发展阶段，首先要解决的问题其实就是各浏览器的兼容性，其次就是性能问题。我认为它并不是用来取代 JS 的，但是极有可能演变为 ES6 之后 Web 的新拐点。,WASM中文网,- https://www.wasm.com.cn/,MDN WebAssembly概念,- https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts,W3C Web 中文兴趣组 · WebAssembly 线上研讨会2020年8月29日,- https://www.w3.org/2020/08/29-chinese-web-wasm.minutes.html​,记一次完整 C++ 项目编译成 WebAssembly 的实践,- https://developer.aliyun.com/article/740902