Rust WebAssembly开发实战：构建高性能前端应用

Rust WebAssembly开发实战：构建高性能前端应用 | 极客日志

# 使用cargo安装cargoinstall wasm-pack # 验证安装 wasm-pack --version

# 使用cargo安装cargoinstall cargo-generate # 验证安装cargo generate --version

cargo generate --git https://github.com/rustwasm/wasm-pack-template --name hello-wasm

hello-wasm/ ├── Cargo.toml ├── src/ │ ├── lib.rs │ └── utils.rs └── README.md

[package] name = "hello-wasm" version = "0.1.0" edition = "2021" [dependencies] wasm-bindgen = "0.2" [lib] crate-type = ["cdylib", "rlib"]

usewasm_bindgen::prelude::*;#[wasm_bindgen]extern"C"{#[wasm_bindgen(js_namespace = console)]fnlog(s:&str);}#[wasm_bindgen]pubfngreet(name:&str){log(&format!("Hello, {}!", name));}

pubfnset_panic_hook(){#[cfg(feature = "console_error_panic_hook")]console_error_panic_hook::set_once();}

wasm-pack build --target web

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Hello, Wasm!</title></head><body><h1>Hello, Wasm!</h1><scripttype="module">import init,{ greet }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit();greet('WebAssembly');}run();</script></body></html>

# 使用Python启动服务器 python3 -m http.server 8080# 使用Node.js启动服务器 npx serve .

usewasm_bindgen::prelude::*;#[wasm_bindgen]pubfnadd(a:i32, b:i32)->i32{ a + b }#[wasm_bindgen]pubfnmultiply(a:f64, b:f64)->f64{ a * b }#[wasm_bindgen]pubfnis_even(n:i32)->bool{ n %2==0}

import init,{ add, multiply, is_even }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit(); console.log(add(1,2));// 3 console.log(multiply(2.5,3.2));// 8 console.log(is_even(4));// true console.log(is_even(5));// false}run();

usewasm_bindgen::prelude::*;#[wasm_bindgen]pubfnto_upper_case(s:&str)->String{ s.to_uppercase()}#[wasm_bindgen]pubfnreverse(s:&str)->String{ s.chars().rev().collect()}

import init,{ to_upper_case, reverse }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit(); console.log(to_upper_case('hello'));// "HELLO" console.log(reverse('hello'));// "olleh"}run();

usewasm_bindgen::prelude::*;#[wasm_bindgen]pubfnsum(v:Vec<i32>)->i32{ v.iter().sum()}#[wasm_bindgen]pubfnfilter_even(v:Vec<i32>)->Vec<i32>{ v.into_iter().filter(|&n| n %2==0).collect()}#[wasm_bindgen]pubfnmap_double(v:Vec<i32>)->Vec<i32>{ v.into_iter().map(|n| n *2).collect()}

import init,{ sum, filter_even, map_double }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit(); console.log(sum([1,2,3,4,5]));// 15 console.log(filter_even([1,2,3,4,5]));// [2, 4] console.log(map_double([1,2,3,4,5]));// [2, 4, 6, 8, 10]}run();

usewasm_bindgen::prelude::*;#[wasm_bindgen]pubstructPoint{pub x:f64,pub y:f64,}#[wasm_bindgen]implPoint{#[wasm_bindgen(constructor)]pubfnnew(x:f64, y:f64)->Point{Point{ x, y }}pubfndistance(&self, other:&Point)->f64{let dx =self.x - other.x;let dy =self.y - other.y;(dx * dx + dy * dy).sqrt()}pubfnmove_by(&mutself, dx:f64, dy:f64){self.x += dx;self.y += dy;}}

import init,{ Point }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit();const p1 =newPoint(1,2);const p2 =newPoint(4,6); console.log(p1.distance(p2));// 5 p1.move_by(2,3); console.log(p1.x);// 3 console.log(p1.y);// 5}run();

usewasm_bindgen::prelude::*;#[wasm_bindgen]extern"C"{#[wasm_bindgen(js_namespace = Math)]fnrandom()->f64;#[wasm_bindgen(js_namespace = Math)]fnfloor(x:f64)->f64;}#[wasm_bindgen]pubfnrandom_int(min:i32, max:i32)->i32{let range = max - min +1;let random =random();let floor =floor(random * range asf64); min + floor asi32}

import init,{ random_int }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit(); console.log(random_int(1,10));// 随机整数 between 1 and 10}run();

usewasm_bindgen::prelude::*;#[wasm_bindgen]pubfnget_document_title()->String{let document =web_sys::window().unwrap().document().unwrap(); document.title()}#[wasm_bindgen]pubfnset_document_title(title:&str){let document =web_sys::window().unwrap().document().unwrap(); document.set_title(title);}

import init,{ get_document_title, set_document_title }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit(); console.log(get_document_title());// 页面标题set_document_title('New Title'); console.log(get_document_title());// "New Title"}run();

[dependencies] wasm-bindgen = "0.2" wasm-bindgen-futures = "0.4" web-sys = { version = "0.3", features = ["Window", "Document", "Element", "console"] }

usewasm_bindgen::prelude::*;usewasm_bindgen_futures::JsFuture;useweb_sys::window;#[wasm_bindgen]pubasyncfnfetch_data(url:&str)->Result<String,JsValue>{let window =window().unwrap();let response =JsFuture::from(window.fetch_with_str(url)).await?;let text =JsFuture::from(response.dyn_into::<web_sys::Response>()?.text()?).await?;Ok(text.as_string().unwrap())}

import init,{ fetch_data }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit();try{const data =awaitfetch_data('https://api.github.com/users/rustwasm'); console.log(data);}catch(error){ console.error(error);}}run();

image-processor/ ├── Cargo.toml ├── src/ │ ├── lib.rs │ └── utils.rs ├── static/ │ ├── index.html │ └── style.css └── README.md

[package] name = "image-processor" version = "0.1.0" edition = "2021" [dependencies] wasm-bindgen = "0.2" wasm-bindgen-futures = "0.4" web-sys = { version = "0.3", features = ["Window", "Document", "Element", "console", "CanvasRenderingContext2d", "HtmlCanvasElement", "HtmlImageElement"] } image = "0.24"

usewasm_bindgen::prelude::*;useweb_sys::CanvasRenderingContext2d;#[wasm_bindgen]pubfngrayscale(data:&[u8], width:u32, height:u32)->Vec<u8>{letmut result =Vec::with_capacity(data.len());for i in(0..data.len()).step_by(4){let r = data[i];let g = data[i +1];let b = data[i +2];let a = data[i +3];let gray =(0.299* r asf32+0.587* g asf32+0.114* b asf32)asu8; result.push(gray); result.push(gray); result.push(gray); result.push(a);} result }#[wasm_bindgen]pubfninvert(data:&[u8], width:u32, height:u32)->Vec<u8>{letmut result =Vec::with_capacity(data.len());for i in(0..data.len()).step_by(4){let r =255- data[i];let g =255- data[i +1];let b =255- data[i +2];let a = data[i +3]; result.push(r); result.push(g); result.push(b); result.push(a);} result }#[wasm_bindgen]pubfnblur(data:&[u8], width:u32, height:u32)->Vec<u8>{letmut result =Vec::with_capacity(data.len());let kernel =[1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0];for y in0..height {for x in0..width {letmut r =0.0;letmut g =0.0;letmut b =0.0;letmut a =0.0;for ky in-1..=1{for kx in-1..=1{let nx =(x asi32+ kx).clamp(0, width asi32-1)asu32;let ny =(y asi32+ ky).clamp(0, height asi32-1)asu32;let index =(ny * width + nx)asusize*4;let weight = kernel[(ky +1)*3+(kx +1)]; r += data[index]asf32* weight; g += data[index +1]asf32* weight; b += data[index +2]asf32* weight; a += data[index +3]asf32* weight;}} result.push(r asu8); result.push(g asu8); result.push(b asu8); result.push(a asu8);}} result }#[wasm_bindgen]pubfnsharpen(data:&[u8], width:u32, height:u32)->Vec<u8>{letmut result =Vec::with_capacity(data.len());let kernel =[0.0,-1.0,0.0,-1.0,5.0,-1.0,0.0,-1.0,0.0];for y in0..height {for x in0..width {letmut r =0.0;letmut g =0.0;letmut b =0.0;letmut a =0.0;for ky in-1..=1{for kx in-1..=1{let nx =(x asi32+ kx).clamp(0, width asi32-1)asu32;let ny =(y asi32+ ky).clamp(0, height asi32-1)asu32;let index =(ny * width + nx)asusize*4;let weight = kernel[(ky +1)*3+(kx +1)]; r += data[index]asf32* weight; g += data[index +1]asf32* weight; b += data[index +2]asf32* weight; a += data[index +3]asf32* weight;}} result.push(r.clamp(0.0,255.0)asu8); result.push(g.clamp(0.0,255.0)asu8); result.push(b.clamp(0.0,255.0)asu8); result.push(a.clamp(0.0,255.0)asu8);}} result }#[wasm_bindgen]pubfnload_image(url:&str)->Result<Vec<u8>,JsValue>{let img =image::open(url).map_err(|e|JsValue::from_str(&e.to_string()))?;let rgba = img.to_rgba8();Ok(rgba.into_raw())}#[wasm_bindgen]pubfnsave_image(data:&[u8], width:u32, height:u32, path:&str)->Result<(),JsValue>{let img =image::RgbaImage::from_vec(width, height, data.to_vec()).ok_or(JsValue::from_str("Invalid image data"))?; img.save(path).map_err(|e|JsValue::from_str(&e.to_string()))?;Ok(())}

pubfnset_panic_hook(){#[cfg(feature = "console_error_panic_hook")]console_error_panic_hook::set_once();}

*{margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, sans-serif;}body{background-color: #f5f5f5;}.container{max-width: 1200px;margin: 0 auto;padding: 20px;}header{background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);margin-bottom: 20px;text-align: center;}header h1{margin-bottom: 10px;font-size: 24px;}main{display: grid;grid-template-columns: 1fr 300px;gap: 20px;}.content{background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.content canvas{display: block;margin-bottom: 20px;border: 1px solid #ddd;border-radius: 4px;}.controls{background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.controls h2{margin-bottom: 20px;font-size: 18px;}.controls .upload{margin-bottom: 20px;}.controls .upload input{display: none;}.controls .upload label{display: inline-block;padding: 8px 16px;background-color: #007bff;color: #fff;border-radius: 4px;cursor: pointer;}.controls .upload label:hover{background-color: #0056b3;}.controls .filters{display: flex;flex-direction: column;gap: 10px;margin-bottom: 20px;}.controls .filters button{padding: 8px 16px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;}.controls .filters button:hover{background-color: #0056b3;}.controls .save{margin-bottom: 20px;}.controls .save button{padding: 8px 16px;background-color: #28a745;color: #fff;border: none;border-radius: 4px;cursor: pointer;}.controls .save button:hover{background-color: #218838;}.controls .reset{margin-bottom: 20px;}.controls .reset button{padding: 8px 16px;background-color: #6c757d;color: #fff;border: none;border-radius: 4px;cursor: pointer;}.controls .reset button:hover{background-color: #5a6268;}

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>WebAssembly图片处理工具</title><linkrel="stylesheet"href="style.css"></head><body><divclass="container"><header><h1>WebAssembly图片处理工具</h1></header><main><divclass="content"><canvasid="canvas"></canvas></div><divclass="controls"><h2>图片操作</h2><divclass="upload"><inputtype="file"id="file-input"accept="image/*"><labelfor="file-input">上传图片</label></div><divclass="filters"><buttonid="grayscale">灰度化</button><buttonid="invert">反转</button><buttonid="blur">模糊</button><buttonid="sharpen">锐化</button></div><divclass="save"><buttonid="save">保存图片</button></div><divclass="reset"><buttonid="reset">重置</button></div></div></main></div><scripttype="module">import init,{ grayscale, invert, blur, sharpen }from'../pkg/image_processor.js';asyncfunctionrun(){awaitinit(); console.log('WebAssembly模块加载成功');const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');let originalImageData;// 上传图片const fileInput = document.getElementById('file-input'); fileInput.addEventListener('change',(e)=>{const file = e.target.files[0];if(!file)return;const reader =newFileReader(); reader.onload=(e)=>{const img =newImage(); img.onload=()=>{ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); originalImageData = ctx.getImageData(0,0, canvas.width, canvas.height);}; img.src = e.target.result;}; reader.readAsDataURL(file);});// 灰度化const grayscaleButton = document.getElementById('grayscale'); grayscaleButton.addEventListener('click',()=>{if(!originalImageData)return;const data =grayscale(originalImageData.data, canvas.width, canvas.height);const imageData =newImageData(newUint8ClampedArray(data), canvas.width, canvas.height); ctx.putImageData(imageData,0,0);});// 反转const invertButton = document.getElementById('invert'); invertButton.addEventListener('click',()=>{if(!originalImageData)return;const data =invert(originalImageData.data, canvas.width, canvas.height);const imageData =newImageData(newUint8ClampedArray(data), canvas.width, canvas.height); ctx.putImageData(imageData,0,0);});// 模糊const blurButton = document.getElementById('blur'); blurButton.addEventListener('click',()=>{if(!originalImageData)return;const data =blur(originalImageData.data, canvas.width, canvas.height);const imageData =newImageData(newUint8ClampedArray(data), canvas.width, canvas.height); ctx.putImageData(imageData,0,0);});// 锐化const sharpenButton = document.getElementById('sharpen'); sharpenButton.addEventListener('click',()=>{if(!originalImageData)return;const data =sharpen(originalImageData.data, canvas.width, canvas.height);const imageData =newImageData(newUint8ClampedArray(data), canvas.width, canvas.height); ctx.putImageData(imageData,0,0);});// 保存图片const saveButton = document.getElementById('save'); saveButton.addEventListener('click',()=>{if(!originalImageData)return;const link = document.createElement('a'); link.download ='processed-image.png'; link.href = canvas.toDataURL('image/png'); link.click();});// 重置const resetButton = document.getElementById('reset'); resetButton.addEventListener('click',()=>{if(!originalImageData)return; ctx.putImageData(originalImageData,0,0);});}run();</script></body></html>

wasm-pack build --target web

npx serve .

[profile.release] lto = true codegen-units = 1 opt-level = 'z' # 最小化代码大小 # opt-level = 's' # 平衡代码大小和性能 # opt-level = 3 # 最大化性能

#[repr(C)]pubstructPoint{pub x:f64,pub y:f64,}

#[repr(C)]pubstructPoint{pub x:i16,pub y:i16,}

#[wasm_bindgen]pubfnadd(a:i32, b:i32)->i32{let c = a + b;// 栈分配 c }

usestd::collections::VecDeque;usestd::sync::Mutex;lazy_static!{staticrefMEMORY_POOL:Mutex<VecDeque<Vec<u8>>>=Mutex::new(VecDeque::new());}#[wasm_bindgen]pubfnallocate_buffer(size:usize)->Vec<u8>{letmut pool =MEMORY_POOL.lock().unwrap();ifletSome(buffer)= pool.pop_front(){if buffer.capacity()>= size {letmut buffer = buffer; buffer.resize(size,0);return buffer;}}Vec::with_capacity(size)}#[wasm_bindgen]pubfndeallocate_buffer(buffer:Vec<u8>){letmut pool =MEMORY_POOL.lock().unwrap(); pool.push_back(buffer);}

#[wasm_bindgen]pubfnsum(v:Vec<i32>)->i32{ v.iter().sum()// 减少不必要的变量分配}

[dependencies] wasm-bindgen = "0.2" wasm-bindgen-futures = "0.4" web-sys = { version = "0.3", features = ["Window", "Document", "Element", "console", "CanvasRenderingContext2d", "HtmlCanvasElement", "HtmlImageElement"] } image = "0.24" wasm-simd = "0.1"

usewasm_simd::*;#[wasm_bindgen]pubfnblur(data:&[u8], width:u32, height:u32)->Vec<u8>{letmut result =Vec::with_capacity(data.len());let kernel =[1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0,1.0/9.0];for y in0..height {for x in0..width {letmut r =0.0;letmut g =0.0;letmut b =0.0;letmut a =0.0;for ky in-1..=1{for kx in-1..=1{let nx =(x asi32+ kx).clamp(0, width asi32-1)asu32;let ny =(y asi32+ ky).clamp(0, height asi32-1)asu32;let index =(ny * width + nx)asusize*4;let weight = kernel[(ky +1)*3+(kx +1)]; r += data[index]asf32* weight; g += data[index +1]asf32* weight; b += data[index +2]asf32* weight; a += data[index +3]asf32* weight;}} result.push(r asu8); result.push(g asu8); result.push(b asu8); result.push(a asu8);}} result }

npm init -ynpminstall-D vite

import{ defineConfig }from'vite';exportdefaultdefineConfig({build:{outDir:'dist',assetsDir:'assets',rollupOptions:{input:{main:'./static/index.html',},},},server:{port:3000,open:true,},});

{"name":"image-processor","version":"1.0.0","type":"module","scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"devDependencies":{"vite":"^5.0.0"}}

Rust WebAssembly开发实战：构建高性能前端应用

Rust WebAssembly开发实战：构建高性能前端应用

一、引言

二、WebAssembly概述

2.1 什么是WebAssembly

2.2 WebAssembly的应用场景

2.3 WebAssembly与JavaScript的关系

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

三、Rust WebAssembly开发环境搭建

3.1 安装wasm-pack

3.2 安装cargo-generate

3.3 创建第一个Rust WebAssembly项目

3.4 编译项目

3.5 测试项目

四、Rust与WebAssembly的交互

4.1 数据类型转换

4.1.1 基本数据类型

4.1.2 字符串

4.1.3 数组

4.1.4 结构体

4.2 Rust调用JavaScript

4.2.1 调用JavaScript函数

4.2.2 访问JavaScript对象

4.3 异步操作

4.3.1 安装依赖

4.3.2 异步函数

五、实战项目：WebAssembly图片处理工具

5.1 项目概述

5.2 项目结构

5.3 Cargo.toml

5.4 src/lib.rs

5.5 src/utils.rs

5.6 static/style.css

5.7 static/index.html

5.8 编译项目

5.9 测试项目

六、Rust WebAssembly性能优化

6.1 编译器优化

6.2 数据布局优化

6.2.1 对齐数据

6.2.2 紧凑数据

6.3 内存管理优化

6.3.1 避免频繁分配内存

6.3.2 使用内存池

6.4 算法优化

6.4.1 避免不必要的计算

6.4.2 使用SIMD指令

七、Rust WebAssembly部署

7.1 打包工具

7.1.1 使用vite

7.2 部署到生产环境

八、总结

8.1 技术栈

8.2 核心功能

8.3 未来改进

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具