WebAssembly相关技术介绍

2023年 12月 10日 43.1k 0

Labs 导读

WebAssembly(简称Wasm)是一种可在Web浏览器中运行的低级字节码格式,它在浏览器中执行速度快、占用资源少,并且可以与JavaScript无缝集成,为开发者提供了一种新的选择,可以将现有的代码和工具迁移到Web平台,提供更好的性能和更广泛的应用场景。、

Part 01、  背景 

WebAssembly(简称Wasm)是一种可在Web浏览器中运行的低级字节码格式。它的发展伴随着Web平台上的一系列关键事件,2011年asm.js作为使用JavaScript的子集来提高性能技术,它通过限制JavaScript的特性和引入类型注解,使得现有的C/C++代码可以在浏览器中运行得更快。2013年Emscripten工具链将C/C++代码编译为JavaScript或WebAssembly,它利用LLVM编译器,将原生代码转换为JavaScript或WebAssembly模块。2015年通过asm.js和Emscripten结合,将C/C++代码编译为asm.js格式,再在浏览器中运行,实现了更高效的Web应用。2017年WebAssembly标准的发布标志着一个重要的里程碑。

WebAssembly定义了一种二进制格式,可以直接在浏览器中执行,而无需通过解释器或即时编译器。目前它提供了一种有效且安全的方式,将高性能的编程语言(如C++、Rust、Go等)编译为Web平台可识别、可移植、高性能的字节码的格式,并且可以在不同浏览器,不同的设备和操作系统上运行。WebAssembly在浏览器中执行速度快、占用资源少,并且可以与JavaScript无缝集成,为开发者提供了一种新的选择,可以将现有的代码和工具迁移到Web平台,提供更好的性能和更广泛的应用场景。

图1 WebAssembly在浏览器与后端程序中的使用

Part 02、 工具栈 

2.1 编译器和工具链

  • Emscripten:一个常用的C/C++到WebAssembly的编译器,它使用LLVM将C/C++代码编译成JavaScript或WebAssembly。
  • Rust:Rust编程语言提供了内置的WebAssembly支持,通过rustc编译器可以将Rust代码直接编译成WebAssembly模块。

2.2 运行时环境

  • WebAssembly JavaScript API:提供了与JavaScript进行交互的API,允许在JavaScript中加载和执行WebAssembly模块。
  • WebAssembly System Interface (WASI):一个与操作系统无关的WebAssembly执行环境,提供了标准的系统调用接口,使得WebAssembly可以直接与底层操作系统进行交互。

2.3 调试和性能优化工具

  • WebAssembly Binary Toolkit (wabt):一个用于处理和分析WebAssembly二进制文件的工具集,包括编译、反编译、验证等功能。
  • Chrome DevTools:Chrome浏览器提供了WebAssembly的调试支持,可以在DevTools中进行断点调试、性能分析等操作。

Part 03、  研发示例  

当将C/C++代码带入Web平台并在浏览器中执行时,可以按照以下步骤进行操作:

(1)安装 Emscripten:Emscripten 是一个常用的将 C/C++ 代码编译为 WebAssembly 的工具链。首先,前往 Emscripten 官网(https://emscripten.org/)按照指南安装 Emscripten。

(2)编写 C/C++ 代码:创建一个 C/C++ 源文件(例如 example.c),并添加以下示例代码:

图2 C/C++源语言程序

(3)编译为 WebAssembly 模块:在终端中执行以下命令,使用 Emscripten 将 C/C++ 代码编译为 WebAssembly 模块:

图3 将源语言编译为wasm模块

(4)创建 HTML 文件:创建一个 HTML 文件(例如 index.html),并添加以下内容:

图4 在HTML中嵌入wasm模块并使用

(5)在浏览器中运行:使用任意静态文件服务器(如
VS Code Live Server 插件或 Python 的 http.server 模块)启动本地服务器,并在浏览器中打开
index.html 文件。打开浏览器开发者工具:在浏览器的开发者工具中查看控制台输出,应该会显示 Result: 5。

Part 04、 工程应用  

➪ Web应用加速:通过将计算密集型任务委托给WebAssembly模块,可以在Web应用程序中提供更快的性能和更好的用户体验。例如,图像和视频处理、音频编解码、数据压缩等任务可以使用WebAssembly模块来提高性能。

➪ 游戏开发:WebAssembly为游戏开发者提供了一个高性能的平台,使得复杂的3D游戏可以在浏览器中运行。游戏引擎如Unity和Unreal Engine已经开始支持WebAssembly,使得开发者可以将游戏直接发布到Web平台。

➪ 跨平台应用程序:WebAssembly可以在不同的操作系统和设备上运行,为跨平台应用程序提供了一种可移植的解决方案。通过将现有的C/C++代码编译为WebAssembly模块,开发者可以快速将应用程序移植到Web平台,实现跨平台的部署。

➪ 科学计算和数据处理:对于需要进行大量计算和数据处理的科学和工程应用,WebAssembly提供了高性能和并行计算的能力。从数值模拟到数据分析,WebAssembly可以加速各种科学计算任务。

➪ 虚拟现实和增强现实:WebAssembly为虚拟现实(VR)和增强现实(AR)应用提供了一种可行的解决方案。通过在浏览器中运行WebAssembly模块,用户可以直接在Web平台上体验虚拟现实和增强现实内容,无需额外的软件安装。

Part 05、  未来发展  

WebAssembly技术正处于快速发展阶段,并且有着广阔的未来发展前景。以下是一些WebAssembly技术未来可能的发展方向:

➤ 性能优化:继续改进WebAssembly的执行性能,包括加载速度、运行时性能和内存占用等方面。这将进一步推动WebAssembly的广泛应用。

➤ 扩展功能:将来的WebAssembly版本可能会引入新的功能和特性,如多线程支持、垃圾回收等,以满足更多复杂应用的需求。

➤ 生态系统发展:WebAssembly的生态系统将继续发展壮大,包括工具链、框架、库等,以提供更多的开发和优化选择。

➤ 更多领域的应用:随着WebAssembly技术的不断成熟,它将在更多领域得到应用,如人工智能、物联网、区块链等。

➤ 标准化和跨平台支持:WebAssembly的标准化将会进一步完善,并得到更多平台和设备的广泛支持,包括移动设备、嵌入式系统等。

总体而言,WebAssembly技术有着广泛的应用前景,并将在Web开发和跨平台应用领域发挥重要作用。随着技术的发展和生态系统的成熟,我们可以预期更多创新和工程应用的涌现。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论