基于IM场景下的Wasm初探:提升Web应用性能|得物技术

一、何为Wasm ?

Wasm,全称 WebAssembly,官网描述是一种用于基于堆栈的虚拟机的二进制指令格式。Wasm被设计为一个可移植的目标,用于编译C/C++/Rust等高级语言,支持在Web上部署客户端和服务器应用程序。

Wasm 的开发者参考文档:
https://developer.mozilla.org/en-US/docs/WebAssembly

简单的来说就是使用C/C++/Rust等语言编写的代码,经过编译后得到汇编指令,再通过JavaScript相关API将文件加载到Web容器中,一句话解释就是运行在Web容器中的汇编代码。Wasm是一种可移植、体积小、加载快速的二进制格式,可以将各种编程语言的代码编译成Wasm模块,这些模块可以在现代浏览器中直接运行。尤其在涉及到GPU或CPU计算时优势相对比较明显。

二、为什么需要Wasm ?

JavaScript是解释型语言,相比于编译型语言需要在运行时转换,所以解释型语言的执行速度要慢于编译型语言。

编译型语言和解释型语言代码执行的大致流程如下:

image.png

如上流程图所示,解释型语言每次执行都需要把源码转换一次才能执行,而转换过程非常耗费时间和性能,所以在 JavaScript背景下,Web执行一些高性能应用是非常困难的,如视频剪辑、3D游戏等。

Wasm具有紧凑的二进制格式,可以接近原生的性能运行,并为C/C++等语言提供一个编译目标,以便它们可以在Web上运行。被设计为可以与JavaScript共存,允许两者一起工作。在特定的业务场景下可以完美的弥补JavaScript的缺陷。

三、优势和限制

优势:

  • 性能优异:相比JavaScript代码,Wasm使用节省内存,快速加载和解释的二进制代码,具备更快执行速度,它是直接在底层虚拟机中运行的。这使得Web应用程序可以更高效地处理复杂的计算任务,例如图形渲染、物理模拟等。

  • 跨平台兼容:Wasm可以在几乎所有现代浏览器中运行,兼容性可参考caniuse,无论是桌面还是移动设备。这意味着开发者可以使用各种编程语言来编写Web应用程序,而不仅仅局限于JavaScript。

  • 安全性:Wasm运行在沙箱环境中,提供了良好的安全性。使用了一系列安全措施,如内存隔离和沙箱限制,以防止恶意代码对系统的攻击。

  • 模块化:Wasm模块可以作为独立的组件进行开发和部署,开发者可以更好地管理和维护代码库。模块化的设计也为将来的性能优化和增量更新提供了便利。

局限性:

  • 生态系统不够完善:尽管Wasm已经成为Web开发中的关键技术之一,但生态系统仍然不够完善。Wasm的工具、框架和库的数量远不如JavaScript。

  • 开发门槛较高:Wasm的开发门槛相对较高。Wasm需要使用一种新的语言来编写,如C或C++等。这使得学习和使用Wasm的成本相对较高。尤其是在内存管理等方面会增加开发的复杂性。

  • 与JavaScript集成问题:Wasm与JavaScript之间的集成问题是一个挑战。开发人员需要解决如何在Web应用程序中同时使用Wasm和JavaScript的问题。

  • 兼容性问题:虽然现代浏览器已经开始支持Wasm,但是在一些老旧的浏览器中可能存在兼容性问题,需要开发者进行额外的处理来确保代码的兼容性。

四、Wasm工作原理

通过上述的编译型语言和解释型语言代码执行的大致流程我们可以知道Wasm是不需要被解释的,是由开发者提前编译为WebAssembly二进制格式,如下图所示。由于变量类型都是预知的,因此浏览器加载WebAssembly文件时,JavaScript引擎无须监测代码。它可以简单地将这段代码的二进制格式编译为机器码。

image.png

从这个流程中我们也可以看出,如果将每种编程语言都直接编译为机器码的各个版本,这样效率是不是更高呢?想法是好的,但实现过程确实复杂不堪的。由于浏览器是可以在若干不同的处理器 (比如手机和平板等设备) 上运行,因此为每个可能的处理器发布一个WebAssembly代码的编译后版本会很难做到。

我们可以通过替代方法即取得IR代码。IR即为中间代码(Intermediate Representation),它是编译器中很重要的一种数据结构。编译器在做完前端工作以后,首先就生成IR,并在此基础上执行各种优化算法,最后再生成目标代码。可以简化为如下流程:

image.png

编译器将IR代码转换为一种专用字节码并放入后缀为.wasm的文件中。此时Wasm文件中的字节码还不是机器码,它只是支持WebAssembly的浏览器能够理解的一组虚拟指令。当加载到支持WebAssembly的浏览器中时,浏览器会验证这个文件的合法性,然后这些字节码会继续编译为浏览器所运行的设备上的机器码。

更加详情的原理和使用方式可以前往https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface查阅。

五、应用场景

在Web开发中,可以使用Wasm来提高应用程序的性能。以下是一些使用Wasm的常见场景:

  • 高性能计算:如果应用程序需要进行大量的数值计算、图像处理或者复杂的算法运算,可以将这部分代码编译成Wasm模块,以提高计算性能。

  • 游戏开发:Wasm可以用于创建高性能的HTML5游戏,通过将游戏逻辑编译成Wasm模块,可以实现更流畅的游戏体验。

  • 跨平台应用:使用Wasm可以实现跨平台的应用程序,无论是桌面还是移动设备,用户都可以通过浏览器来访问和使用。

  • 移植现有代码:如果已经有用其他编程语言编写的代码,可以通过将其编译成Wasm模块,将其集成到现有的Web应用程序中,而无需重写整个应用程序。

六、产品案例

  • 设计工具Figma-Wasm文件大小为27.7M

image.png

  • Google Earth-Wasm文件总计大小为192.M

  • 支持各大浏览器的3D地图,而且运行流畅

image.png

  • B站-视频处理和播放也有使用Wasm,Wasm文件大小为344kb

image.png

  • 跨平台的OpenGL图形引擎Magnum-Wasm文件大小为844kb
    image.png

七、实践案例

这里我们通过使用Rust + Wasm实现Wasm与JavaScript之间的数据调用,理解Rust和Wasm的交互过程。

使用Rust就需要做一些前置的环境配置,详情的步骤可参考Rust官网:

https://www.rust-lang.org/zh-CN/tools/install。

安装wasm-pack,wasm-pack是一个构建、测试和发布Wasm的Rust CLI工具,我们将使用wasm-pack相关的命令来构建Wasm二进制内容。这有助于将代码编译为WebAssembly,并生成在浏览器中使用的正确包。

Rust项目初始化

执行cargo new rust_wasm初始化Rust项目,自动生成配置文件Cargo.toml,项目结构如下:

/Users/admin/RustroverProjects/rust_wasm
├── Cargo.lock
├── Cargo.toml
├── src
|  └── lib.rs
└── target├── CACHEDIR.TAG└── debug├── build├── deps├── examples└── incremental

配置包文件

我们可以在Cargo.toml文件中加上下列代码并保存,保存之后Cargo会自动下载依赖。

  • crate-type = [“cdylib”],表示编译时候使用C标准的动态库。

  • #[wasm_bindgen]是一个属性宏,来自于wasm_bindgen这个crate,是一个简化Rust WASM与JS之间交互的库。

[lib]
crate-type = ["cdylib"][dependencies]
wasm-bindgen = { version = "0.2.89", features = [] }

编写代码

编写代码之前我们先明确Rust中crate包的概念,Rust中包管理系统将crate包分为二进制包(Binary)和库包(Library)两种,二者可以在同一个项目中同时存在。

二进制包:

  • main.rs是二进制项目的入口

  • 二进制项目可直接执行

  • 一个项目中二进制包可以有多个,所以在Cargo.toml中通过双方括号标识 [[bin]]

库包:

  • lib.rs是库包的入口

  • 库项目不可直接执行,通常用来作为一个模块被其他项目引用

  • 一个项目中库包仅有1个,在Cargo.toml中通过单方括号标识 [lib]

因为我们这里希望将 Wasm 转为一个可以在JS项目中使用的模块,所以需要使用库包 lib.rs 的命名,代码如下。

use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub extern "C" fn rust_add(left: i32, right: i32) -> i32 {println!("Hello from Rust!");left + right
}

执行编译

这里我们要使用到wasm-pack,将上述的Rust代码编译为能够被JS导入的模块,根据wasm-pack提供的target方式可以指定构建的产物,如截图所示:

image.png

编译过程效果:

编译完成后,我们会发现根目录下多了一个pkg/ 文件夹,里面就是我们的Wasm产物所在的npm包了。目录结构如下:

/Users/admin/RustroverProjects/rust_wasm/pkg
├── package.json
├── rust_wasm.d.ts
├── rust_wasm.js
├── rust_wasm_bg.wasm
└── rust_wasm_bg.wasm.d.ts

rust_wasm.d.ts文件内容:

/* tslint:disable */
/* eslint-disable */
/**
* @param {number} num
* @returns {string}
*/
export function msg_insert(num: number): string;
/**
* @param {number} left
* @param {number} right
* @returns {number}
*/
export function rust_add(left: number, right: number): number;
/**
*/
export function rust_thread(): void;export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;export interface InitOutput {readonly memory: WebAssembly.Memory;readonly msg_insert: (a: number, b: number) => void;readonly rust_add: (a: number, b: number) => number;readonly rust_thread: () => void;readonly __wbindgen_add_to_stack_pointer: (a: number) => number;readonly __wbindgen_free: (a: number, b: number, c: number) => void;
}export type SyncInitInput = BufferSource | WebAssembly.Module;
/**
* Instantiates the given `module`, which can either be bytes or
* a precompiled `WebAssembly.Module`.
*
* @param {SyncInitInput} module
*
* @returns {InitOutput}
*/
export function initSync(module: SyncInitInput): InitOutput;/**
* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
* for everything else, calls `WebAssembly.instantiate` directly.
*
* @param {InitInput | Promise<InitInput>} module_or_path
*
* @returns {Promise<InitOutput>}
*/
export default function __wbg_init (module_or_path?: InitInput | Promise<InitInput>): Promise<InitOutput>;

wasm-pack打包不仅输出一个ESM规范的模块,而且还支持自动生成d.ts文件,对模块的使用者非常友好。如下:

image.png

在前端项目中引入使用

'use client'
/** @Author: wangweiqiang* @Date: 2024-06-18 17:03:34* @LastEditors: wangweiqiang* @LastEditTime: 2024-06-18 23:09:55* @Description: app.tsx*/
import Image from "next/image";
import { useCallback, useEffect, useState } from "react";
import init, * as rustLibrary from 'rust_wasm'
export default function Home() {const [addResult, setAddResult] = useState<number | null>(null)const [calculateTime, setCalculateTime] = useState<string>('')const initRustLibrary = useCallback(() => {init().then(() => {const result = rustLibrary.rust_add(5, 6)const timeStamp = rustLibrary.msg_insert(50000)setCalculateTime(timeStamp)setAddResult(result)})}, [])useEffect(() => {initRustLibrary()}, [initRustLibrary]);return (<main className="flex min-h-screen flex-col items-center p-24">{/* .... */}<div className="mt-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left"><div>rust代码计算结果:{addResult}</div><div style={{ marginTop: '20px' }}>二分法方式{calculateTime}</div></div></main>);
}

image.png

性能比较

在IM场景下,聊天消息中核心的处理流程在于数据的排序、去重,大量的数据查找会非常耗时,在这里我们通过二分法的方式对Rust和JavaScript两种实现方式的耗时进行一个简单的对比,Rust代码如下:

use chrono::{DateTime, Utc};
use rand::Rng;#[derive()]
#[allow(dead_code)]
struct Data {content: String,from: String,head: String,msg_id: String,seq: i32,sid: String,topic: String,ts: DateTime<Utc>,
}impl Data {fn new(content: String,from: String,head: String,msg_id: &str,seq: i32,sid: String,topic: String,ts: DateTime<Utc>,) -> Self {Data {content,from,head,msg_id: msg_id.to_string(),seq,sid,topic,ts,}}
}// 获取原始数据
fn get_origin_data(num: i32) -> Vec<Data> {let mut data: Vec<Data> = vec![]; // 存储数据的向量....                              // 创建 num 个数据data
}
// 初始化结构体数据
fn init_struct_data(num: i32, text: &str) -> Data {let mut rng = rand::thread_rng();let content = format!("{}_{}", rng.gen_range(1000..=9999), text).to_string();....let ts = Utc::now();Data::new(content, from, head, &msg_id.as_str(), seq, sid, topic, ts)
}// 二分法插入
fn binary_insert(data: &mut Vec<Data>, new_data: Data) {let _insert_pos = match data.binary_search_by_key(&new_data.seq, |d| d.seq) {Ok(pos) => {data[pos] = new_data;pos}Err(pos) => {data.insert(pos, new_data);pos}};
}
#[wasm_bindgen]
pub extern "C" fn msg_insert(num: i32) -> String {let mut data: Vec<Data> = get_origin_data(1000);let test_mode = [num];let start_time = Utc::now().naive_utc().timestamp_micros();for test_num in 0..test_mode.len() {for num in 0..test_mode[test_num] {let data_list = init_struct_data(num, "test");binary_insert(&mut data, data_list);}}let duration = Utc::now().naive_utc().timestamp_micros() - start_time;let result = format!("插入{}条数据执行耗时:{}微秒", num, duration);result
}

数据对比分析:

image.png

可以看到,在数据量不大的场景下,Wasm的耗时是比纯JavaScript长的,这是因为浏览器需要在VM容器中对 Wasm模块进行实例化,这一部分会消耗相当的时间,导致性能不如纯JavaScript的执行。但随着运算规模变大,Wasm的优化越来越明显。这是因为WebAssembly是一种低级别的二进制格式,经过高度优化,并且能够更好地利用系统资源。相比之下,JavaScript是一种解释性语言,性能可能会受到解释器的限制。

八、总结

在大多数场景下我们都不需要用到WebAssembly。因为V8等JS引擎的优化带来了巨大的性能提升,已经足够让JavaScript应对绝大多数的普通场景了,如果要做进一步优化密集计算任务时使用Web worker也都能解决掉。只有在以上的少数场景下,我们才需要做这种“二次提升”。

WebAssembly虽然有天然的优势,但也有自己的局限性,在使用时我们也需要考虑多方面因素,例如生态、开发成本等等。不过我们依然可以持续关注WebAssembly的发展。

*文/ WWQ

本文属得物技术原创,更多精彩文章请看:得物技术

未经得物技术许可严禁转载,否则依法追究法律责任!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466831.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于百度飞桨paddle的paddlepaddle2.4.2等系列项目的运行

PPASR 必看&#xff01;&#xff01;&#xff01; PaddleSpeech develop --> PaddlePaddle 2.5.0/2.5.1 PaddleSpeech < 1.4.1 --> PaddlePaddle < 2.4.2 1.创建虚拟环境 conda create --name test python3.10 2.激活环境&#xff0c;安装ppasr的paddlepaddl…

2024MoonBit全球编程创新挑战赛参赛作品“飞翔的小鸟”技术开发指南

本文转载自 CSDN&#xff1a;https://blog.csdn.net/m0_61243965/article/details/143510089作者&#xff1a;言程序plus 实战开发基于moonbit和wasm4的飞翔的小鸟游戏 游戏中&#xff0c;玩家需要通过上下左右按键控制Bird&#xff0c;在不断移动的障碍pipe之间穿梭&#xf…

浅谈Agent

目录 什么是大模型 Agent &#xff1f; 大模型Agent 有哪些部分组成? 规划&#xff08;Planning&#xff09; Planning类型 不依赖反馈的计划 基于反馈的计划 拆解子目标和任务分解方法 COT TOT GOT LLMP 反思和完善 ReAct(融合推理与执行的能力) Reflexion(动态…

文本转SQL(Text-to-SQL),场景介绍与 Spring AI 实现

在众多的 AI 大模型的应用场景中&#xff0c;Text-to-SQL&#xff0c;也就是文本转 SQL&#xff0c;是其中实用性很高的一个。Text-to-SQL 充分利用了大模型的优势&#xff0c;把用户提供的自然语言描述转换成 SQL 语句&#xff0c;还可以执行生成的 SQL 语句&#xff0c;再把查…

DICOM标准:深入详解DICOM医学影像中的传输语法

引言 DICOM&#xff08;数字成像和通信医学&#xff09;标准在医学影像数据交换中扮演着至关重要的角色。其中&#xff0c;*传输语法&#xff08;Transfer Syntax&#xff09;是DICOM标准中定义数据编码和传输方式的核心部分。理解传输语法对于确保不同设备和系统之间的互操作性…

如何提高谷歌收录速度?

相信很多做外贸推广的朋友都遇到过这种情况&#xff1a;网站上线了&#xff0c;但新页面迟迟不被谷歌收录。即使你的内容很优秀&#xff0c;设计也很精美&#xff0c;如果谷歌爬虫抓不到页面&#xff0c;一切努力就白费了。这时候&#xff0c;GSI谷歌快速收录服务就成了“救命稻…

Spring面向切面编程

目录 1.AOP概述及Spring AOP实现原理 AOP概述 AOP的应用场景 AOP的作用 Spring AOP概述 Spring AOP的实现原理 Spring AOP中Advice的分类 2. 通过xml配置实现AOP 实现步骤&#xff1a; 新增模块&#xff1a; 导入相关依赖&#xff1a; 新增实体类User 新增业务类UserS…

Notepad++ 更改字体大小和颜色

前言 在长时间编程或文本编辑过程中&#xff0c;合适的字体大小和颜色可以显著提高工作效率和减少眼睛疲劳。Notepad 提供了丰富的自定义选项&#xff0c;让你可以根据个人喜好调整编辑器的外观。 步骤详解 1. 更改字体大小 打开 Notepad 启动 Notepad 编辑器。 进入设置菜…

香港航空 阿里滑块 acw_sc__v3 分析

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 有相关问题请第一时间头像私信联系我删…

Unet++改进3:添加NAMAttention注意力机制

本文内容:添加NAMAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 识别不太显著的特征是模型压缩的关键。然而,它在革命性的注意机制中尚未得到研究。在这项工作中,我们提出了一种新的基于归一化的注意力模块(NAM),它抑制了较不显著…

WPF+MVVM案例实战(二十二)- 制作一个侧边弹窗栏(CD类)

文章目录 1、案例效果1、侧边栏分类2、CD类侧边弹窗实现1、样式代码实现2、功能代码实现3 运行效果4、源代码获取1、案例效果 1、侧边栏分类 A类 :左侧弹出侧边栏B类 :右侧弹出侧边栏C类 :顶部弹出侧边栏D类 :底部弹出侧边栏2、CD类侧边弹窗实现 1、样式代码实现 在原有的…

汽车广告常见特效处理有哪些?

​汽车广告作为展示汽车性能和外观的重要媒介&#xff0c;常常需要借助特效来增强视觉效果&#xff0c;吸引观众的注意力。以下是一篇关于汽车广告中常见特效处理的文章。 在竞争激烈的汽车市场中&#xff0c;广告不仅是推广产品的工具&#xff0c;更是艺术和科技的结合。特效技…

【CUDA】线程配置

一、 线程层次结构 1.1 认识 GPU 可并行执行工作 Thread&#xff1a;所有线程执行相同的核函数&#xff0c;并行执行 Thread Block&#xff1a;执行在一个Streaming Multiprocessor (SM)&#xff0c;同一个Block中的线程可以协作 线程的集合称为块&#xff0c;块的数量很多…

爬虫-------字体反爬

目录 一、了解什么是字体加密 二. 定位字体位置 三. python处理字体 1. 工具库 2. 字体读取 3. 处理字体 案例1&#xff1a;起点 案例2&#xff1a;字符偏移&#xff1a; 5请求数据 - 发现偏移量 5.4 多套字体替换 套用模板 版本1 版本2 四.项目实战 1. 采集目…

transformer模型写诗词

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

【计算机网络】章节 知识点总结

一、计算机网络概述 1. 计算机网络向用户提供的两个最重要的功能&#xff1a;连通性、共享 2. 因特网发展的三个阶段&#xff1a; 第一阶段&#xff1a;从单个网络 ARPANET 向互联网发展的过程。1983 年 TCP/IP 协议成为 ARPANET 上的标准协议。第二阶段&#xff1a;建成三级…

【微服务】不同微服务之间用户信息的获取和传递方案

如何才能在每个微服务中都拿到用户信息&#xff1f;如何在微服务之间传递用户信息&#xff1f; 文章目录 概述利用微服务网关做登录校验网关转微服务获取用户信息openFeign传递微服务之间的用户信息 概述 要在每个微服务中获取用户信息&#xff0c;可以采用以下几种方法&#…

【p2p、分布式,区块链笔记 Torrent】WebTorrent 的lt_donthave插件

扩展实现 https://github.com/webtorrent/lt_donthave/blob/master/index.js /*! lt_donthave. MIT License. WebTorrent LLC <https://webtorrent.io/opensource> */// 导入所需模块 import arrayRemove from unordered-array-remove // 用于从数组中删除元素的函数 i…

兰空图床配置域名访问

图床已经创建完毕并且可以访问了&#xff0c;但是使用IP地址多少还是差点意思&#xff0c;而且不方便记忆&#xff0c;而NAT模式又没法直接像普通服务器一样DNS解析完就可以访问。 尝试了很多办法&#xff0c;nginx配置了半天也没配好&#xff0c;索性直接重定向&#xff0c;反…

Sophos | 网络安全

在 SophosLabs 和 SophosAI 的威胁情报、人工智能和机器学习的支持下&#xff0c;Sophos 提供广泛的高级产品和服务组合&#xff0c;以保护用户、网络和端点免受勒索软件、恶意软件、漏洞利用、网络钓鱼和各种其他网络攻击。Sophos 提供单一的集成式基于云的管理控制台 Sophos …