0


WebAssembly 为什么能提升性能,怎么使用它 ?

文章目录

简介:

  • WebAssembly(简称Wasm)是一种新的编码方式,WebAssembly 是一种技术,该技术能让除 JavaScript 以外的代码运行在浏览器上。
  • 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以为C/C++、C#和Rust等语言提供编译目标,使它们能够在Web上运行。

起源:

WebAssembly的前身是

asm.js(文本格式)

,它是一个JavaScript的严格子集,通过强制静态类型来提高性能。但是asm.js仍然需要经过JavaScript引擎的解析和字节码编译步骤,这限制了它的性能。
因此,WebAssembly应运而生,

它直接编译成Web浏览器可以理解的机器码

,跳过了这些步骤,

从而提高了性能

前端性能提升历史

JIT(Just-In-Time)编译器(即时编译)

在程序运行时将中间代码动态编译成机器码的编译器,工作原理可以概括为以下几个步骤:

在JavaScript 引擎新增了一个组件,称为监视器(Monitor),将代码编译成更快的执行函数,并对执行过的代码标记(warm)

  1. 解析:JIT编译器首先解析程序的中间代码,构建出抽象语法树(AST)和符号表。
  2. 优化:对程序进行优化,如常量折叠、循环展开、内联函数等,以提高执行效率。
  3. 编译:将优化后的程序转换成机器代码,并生成代码缓存区,通常包含多个版本的代码以应对不同的运行情况。
  4. 执行:在程序运行时,JIT编译器动态地将缓存区中的代码加载到内存中,并选择合适的代码版本执行。

为什么需要WebAssembly:

JavaScript作为Web开发的主要语言,虽然功能强大,

但在性能上存在局限,特别是在执行复杂计算和处理大量数据时。WebAssembly旨在解决这些问题

,提供一种新的代码执行方式,以接近原生应用的性能运行在Web平台上。

  • WebAssembly主要解决了前端性能瓶颈问题,它允许将性能密集型的应用程序带到Web上,比如3D游戏、图像和视频编辑、科学计算等。

WebAssembly能做什么:

  1. 提高性能: WebAssembly代码在浏览器中的执行速度接近原生应用。
  2. 跨平台运行 可以在不同的浏览器和设备上一致地运行。
  3. 安全沙箱环境 代码在安全的沙箱环境中执行,遵循同源策略和权限策略。
  4. 二进制格式: WebAssembly 使用二进制格式,这意味着它在网络传输中更加紧凑
  5. 与JavaScript协同工作: 可以与JavaScript代码一起使用,通过JavaScript调用WebAssembly模块中的功能。

经常说WASM的性能高,为什么高??

  1. WebAssembly是一种低级字节码,比JavaScript[解释性语言,需要转义]更接近计算机硬件
  2. WebAssembly代码比JavaScript代码更加精简(二进制),因此加载WebAssembly文件通常更快,尤其是在网络速度较慢的情况下
  3. WebAssembly不需要像JavaScript那样解析为抽象语法树(AST),而是直接解码,这使得它在解析阶段比JavaScript更快
  4. WebAssembly在编译和优化时节省了时间,因为它比JavaScript更接近机器码,而且WebAssembly代码在编译前已经过优化
  5. JavaScript在运行时可能需要重新优化代码,这会导致性能损失。而WebAssembly的数据类型是明确的,因此不需要运行时优化
  6. 代码复用

使用方法:

Emscripten 使用:

**

Emscripten

是一个用于编译 C 和 C++ 代码到 WebAssembly 和 asm.js 的工具链**。它允许开发者将桌面应用程序移植到 Web 平台.

安装 Emscripten:

  1. 克隆 Emscripten SDK 到本地机器。git clone https://github.com/emscripten-core/emsdk.git
  2. 安装最新版本的 Emscripten。cd emsdk && emsdk install latest
  3. 激活 Emscripten 环境。 emsdk activate latest在这里插入图片描述
  4. 设置查看变量 emcc -c

在这里插入图片描述

  1. 创建hello.c 代码
#include<stdio.h>intmain(){/*  Write C code in this online editor and run it. */printf("Hello, WebAssembly! \n");return0;}
  1. 编译 C/C++ 代码:

使用

emcc

命令来编译代码。生成一个 WebAssembly 二进制文件和相应的 HTML 文件:

emcc hello.c -s WASM=1 -o hello.html  # WASM=1 表示启用 WebAssembly 编译,如果不设置或设置为 0,则默认生成 asm.js 代码。

这将生成

hello.wasm

hello.js

hello.html

文件。

hello.js

是“胶水”代码,用于在浏览器中加载和运行

hello.wasm

在这里插入图片描述

在这里插入图片描述

  1. 运行示例:

在支持 WebAssembly 的浏览器中打开生成的

hello.html

文件,你将看到 “Hello, WebAssembly!” 的输出。

serve .# 打开 http://localhost:3000/hello.html

在这里插入图片描述

js 中加载

.wasm
fetch('module.wasm').then(response=>
  response.arrayBuffer()).then(bytes=>
  WebAssembly.instantiate(bytes)// 编译并实例化 WebAssembly 模块。它接受 BufferSource 以及一个可选的导入对象,并返回一个包含模块和实例的 Promise。).then(results=>{// 这是 instance 对象的一个属性,它是一个包含了模块所有导出函数和变量的对象。// exported_func 是导出的一个实例函数
  results.instance.exports.exported_func();});

参考链接:

  • emscripten DOC
  • WebAssembly API DOC
标签: wasm webassembly 前端

本文转载自: https://blog.csdn.net/cdns_1/article/details/142461918
版权归原作者 子羽bro 所有, 如有侵权,请联系我们删除。

“WebAssembly 为什么能提升性能,怎么使用它 ?”的评论:

还没有评论