基于IM場(chǎng)景下的Wasm初探：提升Web應(yīng)用性能

作者：WWQ 2024-11-05 09:20:47

在大多數(shù)場(chǎng)景下我們都不需要用到WebAssembly。因?yàn)閂8等JS引擎的優(yōu)化帶來(lái)了巨大的性能提升，已經(jīng)足夠讓JavaScript應(yīng)對(duì)絕大多數(shù)的普通場(chǎng)景了，如果要做進(jìn)一步優(yōu)化密集計(jì)算任務(wù)時(shí)使用Web worker也都能解決掉。

一、何為Wasm ？

Wasm，全稱 WebAssembly，官網(wǎng)描述是一種用于基于堆棧的虛擬機(jī)的二進(jìn)制指令格式。Wasm被設(shè)計(jì)為一個(gè)可移植的目標(biāo)，用于編譯C/C++/Rust等高級(jí)語(yǔ)言，支持在Web上部署客戶端和服務(wù)器應(yīng)用程序。

Wasm 的開(kāi)發(fā)者參考文檔：https://developer.mozilla.org/en-US/docs/WebAssembly

簡(jiǎn)單的來(lái)說(shuō)就是使用C/C++/Rust等語(yǔ)言編寫(xiě)的代碼，經(jīng)過(guò)編譯后得到匯編指令，再通過(guò)JavaScript相關(guān)API將文件加載到Web容器中，一句話解釋就是運(yùn)行在Web容器中的匯編代碼。Wasm是一種可移植、體積小、加載快速的二進(jìn)制格式，可以將各種編程語(yǔ)言的代碼編譯成Wasm模塊，這些模塊可以在現(xiàn)代瀏覽器中直接運(yùn)行。尤其在涉及到GPU或CPU計(jì)算時(shí)優(yōu)勢(shì)相對(duì)比較明顯。

二、為什么需要Wasm ?

JavaScript是解釋型語(yǔ)言，相比于編譯型語(yǔ)言需要在運(yùn)行時(shí)轉(zhuǎn)換，所以解釋型語(yǔ)言的執(zhí)行速度要慢于編譯型語(yǔ)言。

編譯型語(yǔ)言和解釋型語(yǔ)言代碼執(zhí)行的大致流程如下：

圖片

如上流程圖所示，解釋型語(yǔ)言每次執(zhí)行都需要把源碼轉(zhuǎn)換一次才能執(zhí)行，而轉(zhuǎn)換過(guò)程非常耗費(fèi)時(shí)間和性能，所以在 JavaScript背景下，Web執(zhí)行一些高性能應(yīng)用是非常困難的，如視頻剪輯、3D游戲等。

Wasm具有緊湊的二進(jìn)制格式，可以接近原生的性能運(yùn)行，并為C/C++等語(yǔ)言提供一個(gè)編譯目標(biāo)，以便它們可以在Web上運(yùn)行。被設(shè)計(jì)為可以與JavaScript共存，允許兩者一起工作。在特定的業(yè)務(wù)場(chǎng)景下可以完美的彌補(bǔ)JavaScript的缺陷。

三、優(yōu)勢(shì)和限制

優(yōu)勢(shì)：

性能優(yōu)異：相比JavaScript代碼，Wasm使用節(jié)省內(nèi)存，快速加載和解釋的二進(jìn)制代碼，具備更快執(zhí)行速度，它是直接在底層虛擬機(jī)中運(yùn)行的。這使得Web應(yīng)用程序可以更高效地處理復(fù)雜的計(jì)算任務(wù)，例如圖形渲染、物理模擬等。
跨平臺(tái)兼容：Wasm可以在幾乎所有現(xiàn)代瀏覽器中運(yùn)行，兼容性可參考caniuse，無(wú)論是桌面還是移動(dòng)設(shè)備。這意味著開(kāi)發(fā)者可以使用各種編程語(yǔ)言來(lái)編寫(xiě)Web應(yīng)用程序，而不僅僅局限于JavaScript。
安全性：Wasm運(yùn)行在沙箱環(huán)境中，提供了良好的安全性。使用了一系列安全措施，如內(nèi)存隔離和沙箱限制，以防止惡意代碼對(duì)系統(tǒng)的攻擊。
模塊化：Wasm模塊可以作為獨(dú)立的組件進(jìn)行開(kāi)發(fā)和部署，開(kāi)發(fā)者可以更好地管理和維護(hù)代碼庫(kù)。模塊化的設(shè)計(jì)也為將來(lái)的性能優(yōu)化和增量更新提供了便利。

局限性：

生態(tài)系統(tǒng)不夠完善：盡管Wasm已經(jīng)成為Web開(kāi)發(fā)中的關(guān)鍵技術(shù)之一，但生態(tài)系統(tǒng)仍然不夠完善。Wasm的工具、框架和庫(kù)的數(shù)量遠(yuǎn)不如JavaScript。
開(kāi)發(fā)門檻較高：Wasm的開(kāi)發(fā)門檻相對(duì)較高。Wasm需要使用一種新的語(yǔ)言來(lái)編寫(xiě)，如C或C++等。這使得學(xué)習(xí)和使用Wasm的成本相對(duì)較高。尤其是在內(nèi)存管理等方面會(huì)增加開(kāi)發(fā)的復(fù)雜性。
與JavaScript集成問(wèn)題：Wasm與JavaScript之間的集成問(wèn)題是一個(gè)挑戰(zhàn)。開(kāi)發(fā)人員需要解決如何在Web應(yīng)用程序中同時(shí)使用Wasm和JavaScript的問(wèn)題。
兼容性問(wèn)題：雖然現(xiàn)代瀏覽器已經(jīng)開(kāi)始支持Wasm，但是在一些老舊的瀏覽器中可能存在兼容性問(wèn)題，需要開(kāi)發(fā)者進(jìn)行額外的處理來(lái)確保代碼的兼容性。

四、Wasm工作原理

通過(guò)上述的編譯型語(yǔ)言和解釋型語(yǔ)言代碼執(zhí)行的大致流程我們可以知道Wasm是不需要被解釋的，是由開(kāi)發(fā)者提前編譯為WebAssembly二進(jìn)制格式，如下圖所示。由于變量類型都是預(yù)知的，因此瀏覽器加載WebAssembly文件時(shí)，JavaScript引擎無(wú)須監(jiān)測(cè)代碼。它可以簡(jiǎn)單地將這段代碼的二進(jìn)制格式編譯為機(jī)器碼。

圖片

從這個(gè)流程中我們也可以看出，如果將每種編程語(yǔ)言都直接編譯為機(jī)器碼的各個(gè)版本，這樣效率是不是更高呢？想法是好的，但實(shí)現(xiàn)過(guò)程確實(shí)復(fù)雜不堪的。由于瀏覽器是可以在若干不同的處理器 (比如手機(jī)和平板等設(shè)備) 上運(yùn)行，因此為每個(gè)可能的處理器發(fā)布一個(gè)WebAssembly代碼的編譯后版本會(huì)很難做到。

我們可以通過(guò)替代方法即取得IR代碼。IR即為中間代碼(Intermediate Representation)，它是編譯器中很重要的一種數(shù)據(jù)結(jié)構(gòu)。編譯器在做完前端工作以后，首先就生成IR，并在此基礎(chǔ)上執(zhí)行各種優(yōu)化算法，最后再生成目標(biāo)代碼。可以簡(jiǎn)化為如下流程：

圖片

編譯器將IR代碼轉(zhuǎn)換為一種專用字節(jié)碼并放入后綴為.wasm的文件中。此時(shí)Wasm文件中的字節(jié)碼還不是機(jī)器碼，它只是支持WebAssembly的瀏覽器能夠理解的一組虛擬指令。當(dāng)加載到支持WebAssembly的瀏覽器中時(shí)，瀏覽器會(huì)驗(yàn)證這個(gè)文件的合法性，然后這些字節(jié)碼會(huì)繼續(xù)編譯為瀏覽器所運(yùn)行的設(shè)備上的機(jī)器碼。

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

五、應(yīng)用場(chǎng)景

在Web開(kāi)發(fā)中，可以使用Wasm來(lái)提高應(yīng)用程序的性能。以下是一些使用Wasm的常見(jiàn)場(chǎng)景：

高性能計(jì)算：如果應(yīng)用程序需要進(jìn)行大量的數(shù)值計(jì)算、圖像處理或者復(fù)雜的算法運(yùn)算，可以將這部分代碼編譯成Wasm模塊，以提高計(jì)算性能。
游戲開(kāi)發(fā)：Wasm可以用于創(chuàng)建高性能的HTML5游戲，通過(guò)將游戲邏輯編譯成Wasm模塊，可以實(shí)現(xiàn)更流暢的游戲體驗(yàn)。
跨平臺(tái)應(yīng)用：使用Wasm可以實(shí)現(xiàn)跨平臺(tái)的應(yīng)用程序，無(wú)論是桌面還是移動(dòng)設(shè)備，用戶都可以通過(guò)瀏覽器來(lái)訪問(wèn)和使用。
移植現(xiàn)有代碼：如果已經(jīng)有用其他編程語(yǔ)言編寫(xiě)的代碼，可以通過(guò)將其編譯成Wasm模塊，將其集成到現(xiàn)有的Web應(yīng)用程序中，而無(wú)需重寫(xiě)整個(gè)應(yīng)用程序。

六、產(chǎn)品案例

設(shè)計(jì)工具Figma-Wasm文件大小為27.7M

圖片

Google Earth-Wasm文件總計(jì)大小為192.M
支持各大瀏覽器的3D地圖，而且運(yùn)行流暢

B站-視頻處理和播放也有使用Wasm，Wasm文件大小為344kb

圖片

跨平臺(tái)的OpenGL圖形引擎Magnum-Wasm文件大小為844kb

圖片

七、實(shí)踐案例

這里我們通過(guò)使用Rust + Wasm實(shí)現(xiàn)Wasm與JavaScript之間的數(shù)據(jù)調(diào)用，理解Rust和Wasm的交互過(guò)程。

使用Rust就需要做一些前置的環(huán)境配置，詳情的步驟可參考Rust官網(wǎng)：

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

安裝wasm-pack，wasm-pack是一個(gè)構(gòu)建、測(cè)試和發(fā)布Wasm的Rust CLI工具，我們將使用wasm-pack相關(guān)的命令來(lái)構(gòu)建Wasm二進(jìn)制內(nèi)容。這有助于將代碼編譯為WebAssembly，并生成在瀏覽器中使用的正確包。

Rust項(xiàng)目初始化

執(zhí)行cargo new rust_wasm初始化Rust項(xiàng)目，自動(dòng)生成配置文件Cargo.toml，項(xiàng)目結(jié)構(gòu)如下：

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

配置包文件

我們可以在Cargo.toml文件中加上下列代碼并保存，保存之后Cargo會(huì)自動(dòng)下載依賴。

crate-type = ["cdylib"]，表示編譯時(shí)候使用C標(biāo)準(zhǔn)的動(dòng)態(tài)庫(kù)。
#[wasm_bindgen]是一個(gè)屬性宏，來(lái)自于wasm_bindgen這個(gè)crate，是一個(gè)簡(jiǎn)化Rust WASM與JS之間交互的庫(kù)。

[lib]
crate-type = ["cdylib"]


[dependencies]
wasm-bindgen = { version = "0.2.89", features = [] }

編寫(xiě)代碼

編寫(xiě)代碼之前我們先明確Rust中crate包的概念，Rust中包管理系統(tǒng)將crate包分為二進(jìn)制包（Binary）和庫(kù)包（Library）兩種，二者可以在同一個(gè)項(xiàng)目中同時(shí)存在。

二進(jìn)制包：

main.rs是二進(jìn)制項(xiàng)目的入口
二進(jìn)制項(xiàng)目可直接執(zhí)行
一個(gè)項(xiàng)目中二進(jìn)制包可以有多個(gè)，所以在Cargo.toml中通過(guò)雙方括號(hào)標(biāo)識(shí) [[bin]]

庫(kù)包：

lib.rs是庫(kù)包的入口
庫(kù)項(xiàng)目不可直接執(zhí)行，通常用來(lái)作為一個(gè)模塊被其他項(xiàng)目引用
一個(gè)項(xiàng)目中庫(kù)包僅有1個(gè)，在Cargo.toml中通過(guò)單方括號(hào)標(biāo)識(shí) [lib]

因?yàn)槲覀冞@里希望將 Wasm 轉(zhuǎn)為一個(gè)可以在JS項(xiàng)目中使用的模塊，所以需要使用庫(kù)包 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
}

執(zhí)行編譯

這里我們要使用到wasm-pack，將上述的Rust代碼編譯為能夠被JS導(dǎo)入的模塊，根據(jù)wasm-pack提供的target方式可以指定構(gòu)建的產(chǎn)物，如截圖所示：

圖片

編譯過(guò)程效果：

編譯完成后，我們會(huì)發(fā)現(xiàn)根目錄下多了一個(gè)pkg/ 文件夾，里面就是我們的Wasm產(chǎn)物所在的npm包了。目錄結(jié)構(gòu)如下：

/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文件內(nèi)容：

/* 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打包不僅輸出一個(gè)ESM規(guī)范的模塊，而且還支持自動(dòng)生成d.ts文件，對(duì)模塊的使用者非常友好。如下：

圖片

在前端項(xiàng)目中引入使用

'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代碼計(jì)算結(jié)果：{addResult}
        </div>
        <div style={{ marginTop: '20px' }}>
          二分法方式{calculateTime}
        </div>
      </div>
    </main>
  );
}

圖片

性能比較

在IM場(chǎng)景下，聊天消息中核心的處理流程在于數(shù)據(jù)的排序、去重，大量的數(shù)據(jù)查找會(huì)非常耗時(shí)，在這里我們通過(guò)二分法的方式對(duì)Rust和JavaScript兩種實(shí)現(xiàn)方式的耗時(shí)進(jìn)行一個(gè)簡(jiǎn)單的對(duì)比，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,
        }
    }
}


// 獲取原始數(shù)據(jù)
fn get_origin_data(num: i32) -> Vec<Data> {
    let mut data: Vec<Data> = vec![]; // 存儲(chǔ)數(shù)據(jù)的向量
    ....                              // 創(chuàng)建 num 個(gè)數(shù)據(jù)
    data
}
// 初始化結(jié)構(gòu)體數(shù)據(jù)
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!("插入{}條數(shù)據(jù)執(zhí)行耗時(shí)：{}微秒", num, duration);
    result
}

數(shù)據(jù)對(duì)比分析:

圖片

可以看到，在數(shù)據(jù)量不大的場(chǎng)景下，Wasm的耗時(shí)是比純JavaScript長(zhǎng)的，這是因?yàn)闉g覽器需要在VM容器中對(duì) Wasm模塊進(jìn)行實(shí)例化，這一部分會(huì)消耗相當(dāng)?shù)臅r(shí)間，導(dǎo)致性能不如純JavaScript的執(zhí)行。但隨著運(yùn)算規(guī)模變大，Wasm的優(yōu)化越來(lái)越明顯。這是因?yàn)閃ebAssembly是一種低級(jí)別的二進(jìn)制格式，經(jīng)過(guò)高度優(yōu)化，并且能夠更好地利用系統(tǒng)資源。相比之下，JavaScript是一種解釋性語(yǔ)言，性能可能會(huì)受到解釋器的限制。