Python
Rust WebAssembly开发实战：构建高性能前端应用
Rust WebAssembly开发实战：构建高性能前端应用 !在这里插入图片描述 一、引言 💡WebAssembly（Wasm）是一种二进制指令格式，旨在提供一种可移植的、高效的编译目标，允许开发者使用多种语言（如C、C++、Rust）编写代码，并在Web浏览器中以接近原生速度运行。它填补了JavaScript在性能密集型任务上的空白，使得在Web端开发高性能应用成为可能。 Rust语言以其内…
Rust WebAssembly开发实战：构建高性能前端应用 !在这里插入图片描述 一、引言 💡WebAssembly（Wasm）是一种二进制指令格式，旨在提供一种可移植的、高效的编译目标，允许开发者使用多种语言（如C、C++、Rust）编写代码，并在Web浏览器中以接近原生速度运行。它填补了JavaScript在性能密集型任务上的空白，使得在Web端开发高性能应用成为可能。 Rust语言以其内…
💡WebAssembly（Wasm）是一种二进制指令格式，旨在提供一种可移植的、高效的编译目标，允许开发者使用多种语言（如C、C++、Rust）编写代码，并在Web浏览器中以接近原生速度运行。它填补了JavaScript在性能密集型任务上的空白，使得在Web端开发高性能应用成为可能。
Rust语言以其内存安全、零成本抽象、高性能和良好的工具链支持，成为开发WebAssembly的首选语言之一。Rust编译器可以直接将Rust代码编译成WebAssembly，并且Rust的标准库提供了对WebAssembly的良好支持。此外，Rust生态系统中还有许多专门为WebAssembly开发的库和工具，使得开发过程更加简单。
本章将深入探讨Rust WebAssembly开发的核心原理，介绍WebAssembly的概念、优势和应用场景，讲解如何使用Rust编译器将Rust代码编译成WebAssembly，以及如何在Web浏览器中调用WebAssembly模块。同时，本章还将通过实战项目演示如何构建一个高性能的前端应用，帮助读者理解Rust WebAssembly开发的实际应用。
WebAssembly是一种二进制指令格式，旨在提供一种可移植的、高效的编译目标，允许开发者使用多种语言编写代码，并在Web浏览器中以接近原生速度运行。它是Web平台的第四种语言，与HTML、CSS和JavaScript并列。
WebAssembly的设计目标是：
WebAssembly适用于以下场景：
WebAssembly和JavaScript是互补的关系，而不是替代关系。WebAssembly负责处理性能密集型任务，JavaScript负责处理DOM操作和业务逻辑。
WebAssembly的优势：
JavaScript的优势：
wasm-pack是Rust官方推荐的WebAssembly开发工具，它可以帮助开发者编译Rust代码成WebAssembly模块，并生成JavaScript绑定文件，方便在Web浏览器中调用。
安装wasm-pack：
# 使用cargo安装cargoinstall wasm-pack # 验证安装 wasm-pack --version
cargo-generate是一个Cargo子命令，用于从模板生成项目。wasm-pack官方提供了一个WebAssembly项目模板，可以使用cargo-generate快速生成项目结构。
安装cargo-generate：
# 使用cargo安装cargoinstall cargo-generate # 验证安装cargo generate --version
使用cargo-generate从官方模板生成项目：
cargo generate --git https://github.com/rustwasm/wasm-pack-template --name hello-wasm
项目结构：
hello-wasm/ ├── Cargo.toml ├── src/ │ ├── lib.rs │ └── utils.rs └── README.md
Cargo.toml：
[package] name = "hello-wasm" version = "0.1.0" edition = "2021" [dependencies] wasm-bindgen = "0.2" [lib] crate-type = ["cdylib", "rlib"]
src/lib.rs：
usewasm_bindgen::prelude::*;#[wasm_bindgen]extern"C"{#[wasm_bindgen(js_namespace = console)]fnlog(s:&str);}#[wasm_bindgen]pubfngreet(name:&str){log(&format!("Hello, {}!", name));}
src/utils.rs：
pubfnset_panic_hook(){#[cfg(feature = "console_error_panic_hook")]console_error_panic_hook::set_once();}
使用wasm-pack编译项目：
wasm-pack build --target web
编译过程会生成一个pkg目录，包含以下文件：
创建一个index.html文件，测试WebAssembly模块：
<!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>
使用HTTP服务器启动项目：
# 使用Python启动服务器 python3 -m http.server 8080# 使用Node.js启动服务器 npx serve .
在浏览器中访问http://localhost:8080，打开控制台，可以看到输出：'Hello, WebAssembly!'。
Rust和JavaScript的数据类型不同，需要进行转换才能相互传递。wasm-bindgen库提供了数据类型转换的支持。
基本数据类型（如i32、u32、f32、f64、bool）可以直接传递：
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}
在JavaScript中调用：
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();
Rust的字符串类型是String，JavaScript的字符串类型是String，需要使用wasm_bindgen::JsValue进行转换：
usewasm_bindgen::prelude::*;#[wasm_bindgen]pubfnto_upper_case(s:&str)->String{ s.to_uppercase()}#[wasm_bindgen]pubfnreverse(s:&str)->String{ s.chars().rev().collect()}
在JavaScript中调用：
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();
Rust的数组类型是Vec，JavaScript的数组类型是Array，需要使用wasm_bindgen::JsValue进行转换：
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()}
在JavaScript中调用：
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();
Rust的结构体需要使用wasm_bindgen属性标记，才能在JavaScript中使用：
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;}}
在JavaScript中调用：
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();
Rust可以通过wasm-bindgen库调用JavaScript的函数和对象。
使用extern "C"块声明JavaScript函数：
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}
在JavaScript中调用：
import init,{ random_int }from'./pkg/hello_wasm.js';asyncfunctionrun(){awaitinit(); console.log(random_int(1,10));// 随机整数 between 1 and 10}run();
使用wasm_bindgen::JsValue类型访问JavaScript对象：
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);}
在JavaScript中调用：
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();
Rust的异步操作可以通过wasm-bindgen-futures库与JavaScript的Promise配合使用。
在Cargo.toml中添加依赖：
[dependencies] wasm-bindgen = "0.2" wasm-bindgen-futures = "0.4" web-sys = { version = "0.3", features = ["Window", "Document", "Element", "console"] }
使用wasm_bindgen属性标记异步函数：
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())}
在JavaScript中调用：
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();
开发一个WebAssembly图片处理工具，支持以下功能：
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 .
Rust编译器提供了多种优化级别，可以提高WebAssembly代码的性能。
在Cargo.toml中添加优化配置：
[profile.release] lto = true codegen-units = 1 opt-level = 'z' # 最小化代码大小 # opt-level = 's' # 平衡代码大小和性能 # opt-level = 3 # 最大化性能
WebAssembly的内存模型是线性内存，数据布局对性能有很大影响。
使用#[repr©]属性对齐结构体：
#[repr(C)]pubstructPoint{pub x:f64,pub y:f64,}
使用更小的数据类型，减少内存占用：
#[repr(C)]pubstructPoint{pub x:i16,pub y:i16,}
WebAssembly的内存是由JavaScript管理的，需要手动分配和释放内存。
使用栈分配代替堆分配，减少内存分配次数：
#[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()// 减少不必要的变量分配}
WebAssembly支持SIMD（单指令多数据）指令，可以提高数据并行计算的性能。
在Cargo.toml中添加SIMD支持：
[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"
使用SIMD指令优化模糊算法：
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 }
使用webpack、rollup或vite等打包工具打包WebAssembly应用。
安装vite：
npm init -ynpminstall-D vite
创建vite.config.js：
import{ defineConfig }from'vite';exportdefaultdefineConfig({build:{outDir:'dist',assetsDir:'assets',rollupOptions:{input:{main:'./static/index.html',},},},server:{port:3000,open:true,},});
在package.json中添加脚本：
{"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开发是现代Web开发的重要技术，可以帮助开发者构建高性能的前端应用。Rust语言的内存安全、零成本抽象、高性能和良好的工具链支持，使得它成为开发WebAssembly的首选语言之一。
本章介绍了WebAssembly的概念、优势和应用场景，讲解了如何搭建Rust WebAssembly开发环境，如何编译Rust代码成WebAssembly，以及如何在Web浏览器中调用WebAssembly模块。同时，本章还通过实战项目演示了如何构建一个高性能的图片处理工具，帮助读者理解Rust WebAssembly开发的实际应用。
通过本章的学习，读者可以深入理解Rust WebAssembly开发的工作原理和实现方法，并在实际项目中应用这些技术。同时，本章也介绍了如何优化Rust WebAssembly代码的性能，帮助读者构建高性能的前端应用。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online