基于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.xdnf.cn/news/6083.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Linux SSH免密登入以及配置脚本

Linux SSH免密登入以及配置脚本

一、ssh原理简单介绍 客户端生成一对公钥和私钥&#xff0c;并将自己的公钥发送到服务器上 其中公钥用来加密&#xff0c;私钥用来解密。 二、ssh免密登入实现步骤详解 我这就以服务器controller和客户端compute来做为例子 2.1、首先在controller上输入ssh-keygen -t rsa …
阅读更多...
Flutter 获取照片权限的时候是否要获取存储权限？

Flutter 获取照片权限的时候是否要获取存储权限？

获取存储权限 Permission.storage.request(); 获取照片权限通常意味着访问相册&#xff0c;而访问相册可能还需要外部存储权限&#xff0c;因为照片通常存储在设备的外部存储中。所以&#xff0c;当你请求照片权限时&#xff0c;你也需要检查并请求外部存储权限。 是不是所有…
阅读更多...
一个基于Rust适用于 Web、桌面、移动设备等的全栈应用程序框架

一个基于Rust适用于 Web、桌面、移动设备等的全栈应用程序框架

大家好&#xff0c;今天给大家分享一个用 Rust 语言编写的、受 React 启发的前端框架Dioxus&#xff0c;旨在为构建跨平台的用户界面提供高效、高性能的解决方案。 项目介绍 Dioxus项目的诞生源于开发者们对于更高效、更灵活的跨平台UI解决方案的渴望。 随着技术的发展&#…
阅读更多...
IntelliJ Idea设置自定义快捷键

IntelliJ Idea设置自定义快捷键

我IDEA的快捷键是自己修改成了和Eclipse相似&#xff0c;然后想要跳转到某个方法的上层抽象方法没有对应的快捷键&#xff0c;IDEA默认的是Ctrl U &#xff08;Windows/Linux 系统&#xff09; 或 Command U &#xff08;Mac 系统&#xff09;&#xff0c;但是我的不起作用&a…
阅读更多...
前深度学习时代-经典的推荐算法

前深度学习时代-经典的推荐算法

参考自《深度学习推荐系统》—— 王喆&#xff0c;用于学习记录。 1.协同过滤 “协同过滤”就是协同大家的反馈、评价和意见一起对海量的信息进行过滤&#xff0c;从中筛选出目标用户可能感兴趣的信息的推荐过程。 基于用户相似度进行推荐的协同过滤算法 UserCF 用户相似度…
阅读更多...
达梦数据守护集群_动态增加实时备库

达梦数据守护集群_动态增加实时备库

目录 1、概述 2、实验环境 2.1环境信息 2.2配置信息 2.3 查看初始化参数 3、动态增加实时备库 3.1数据准备 3.2配置新备库 3.3动态增加MAL配置 3.4 关闭守护进程及监视器 3.5修改归档&#xff08;方法1&#xff1a;动态添加归档配置&#xff09; 3.6 修改归档&…
阅读更多...
6.qsqlquerymodel源码分析

6.qsqlquerymodel源码分析

目录 继承关系入口浅析qsqlquery刷新数据 扩展列或者移除列以及取别名读取数据与增减行读取数据 下一章节&#xff1a;如何使用qsqlquerymodel 与 qtableview实现自定义表格 继承关系 qsqlquerymodel 继承与qabstracttablemodel 入口 负责填充数据 void QSqlQueryModel::s…
阅读更多...
【JavaEE】认识线程

【JavaEE】认识线程

一、引入线程 在任务管理器界面可以看到很多进程&#xff0c;可以利用CPU多核心这一点来更有效的执行这些进程&#xff0c;即在处理过程中将CPU的多个时间片分配给每个进程&#xff0c;这样的 "多进程编程"就可以起到并发编程的效果&#xff0c;因为进程可以被调度到…
阅读更多...
qt QStatusBar详解

qt QStatusBar详解

1、概述 QStatusBar是Qt框架提供的一个小部件&#xff0c;用于在应用程序窗口底部显示状态信息。它可以显示一些固定的文本和图标&#xff0c;并且可以通过API动态更新显示内容。QStatusBar通常是一个水平的窗口部件&#xff0c;能够显示多行文本内容&#xff0c;非常适合用于…
阅读更多...
【Ubuntu】ubuntu 22.04 设置 Xorg 弃用 Wayland

【Ubuntu】ubuntu 22.04 设置 Xorg 弃用 Wayland

# 编辑gdm3配置文件 sudo vim /etc/gdm3/custom.conf # 重启gdm3 sudo systemctl restart gdm3方式一&#xff1a;如果进行上述操作后&#xff0c;有对比度严重错误问题&#xff0c;请执行下列命令 # 安装驱动 sudo ubuntu-drivers autoinstall 方式二&#xff1a;推荐尝试方式…
阅读更多...
日语学习的难易程度

日语学习的难易程度

日语学习的难易程度是一个相对主观的问题&#xff0c;它受到多种因素的影响&#xff0c;包括个人的语言学习能力、学习方法、学习时间、学习资源的可获得性以及个人对日语文化的兴趣和投入程度等。以下是对日语学习难易程度的一些分析&#xff1a; 优点与易学之处 文字系统&am…
阅读更多...
WPF 打包

WPF 打包

打包为单个exe文件直接运行 - - -版本.NET8 新建WPF项目 右键 - 发布 选择发布文件夹 选择发布文件夹 选择发布文件夹 配置 配置,保存 发布 WPF 打包为exe安装程序 示例 实现思路 引导项目中嵌入其它项目可运行目录的zip引导项目中解压zip文件到指定文件夹是…
阅读更多...
RTC精度及校准

RTC精度及校准

RTC精度偏差&#xff1a; RTC的基准时间和精度与石英晶体的频率相关&#xff0c;晶体的谐振频率取决于温度&#xff0c;因此RTC性能与温度相关&#xff0c;晶体的频率偏差是晶体正常频率的温度反转函数。 一、硬件方面&#xff1a; 1.使用高精度振荡器的RTC模块&#xff1b; …
阅读更多...
C++ Qt6 QtQuick/QML入门进阶与项目实战视频教程

C++ Qt6 QtQuick/QML入门进阶与项目实战视频教程

课程介绍 C Qt这些年在PC客户端、嵌入式、汽车座舱仪表等领域应用很广泛&#xff0c;例如剪映专业版、微信4.0、亿图脑图、Steam、美图秀秀、腾讯会议、钉钉(部分模块)等都是使用C QWidget/QML开发。特别是QML这种声明式UI开发更加快捷&#xff0c;QML的界面开发效率相对于QWid…
阅读更多...
Linux：防火墙和selinux对服务的影响

Linux：防火墙和selinux对服务的影响

1-1selinux 1-1 SELinux是对程序、文件等权限设置依据的一个内核模块。由于启动网络服务的也是程序&#xff0c;因此刚好也 是能够控制网络服务能否访问系统资源的一道关卡。 1-2 SELinux是通过MAC的方式来控制管理进程&#xff0c;它控制的主体是进程&#xff0c;而目标则是…
阅读更多...
逻辑回归处理非线性关系与支持向量机的性能对比

逻辑回归处理非线性关系与支持向量机的性能对比

逻辑回归是一种常用的线性分类方法&#xff0c;通常用于处理线性关系的二分类任务。但是&#xff0c;对于非线性问题&#xff0c;传统的逻辑回归模型可能表现不佳&#xff0c;因为它假设数据可以被一个线性决策边界分割开来。为了使逻辑回归能够处理非线性关系&#xff0c;我们…
阅读更多...
2021数二第9题 线代 一个方程组的解是另一个方程组的解

2021数二第9题 线代 一个方程组的解是另一个方程组的解

题目展示的是一个方程组的列向量 可由另一个列向量表示所以是矩阵的转置
阅读更多...
C#与C++交互开发系列（二十）：跨进程通信之共享内存（Shared Memory）

C#与C++交互开发系列（二十）：跨进程通信之共享内存（Shared Memory）

1、前言 共享内存&#xff08;Shared Memory&#xff09;是一种高效的跨进程通信方式&#xff0c;尤其适用于同一台计算机上的进程之间的高速数据传输。与套接字相比&#xff0c;共享内存允许多个进程直接访问同一块内存区域&#xff0c;减少了数据传输的中间步骤&#xff0c;…
阅读更多...
防火墙|WAF|漏洞|网络安全

防火墙|WAF|漏洞|网络安全

防火墙|WAF|漏洞|网络安全 防火墙 根据内容分析数据包&#xff1a; 1、源IP和目的IP地址 2、有效负载中的内容。 3、数据包协议&#xff08;例如&#xff0c;连接是否使用 TCP/IP 协议&#xff09;。 4、应用协议&#xff08;HTTP、Telnet、FTP、DNS、SSH 等&#xff09;。 5…
阅读更多...
web——warmup——攻防世界

web——warmup——攻防世界

这道题还是没有做出来。。&#xff0c;来总结一下 1.ctrlU显示源码 2.看见body里有source.php 打开这个source.php 看见了源码 highlight_file(FILE); 这行代码用于高亮显示当前文件的源码&#xff0c;适合调试和学习&#xff0c;但在生产环境中通常不需要。 class emmm 定义…
阅读更多...
最新文章

Copyright @ 2022~2023