介绍
WebAssembly（WASM）是一种二进制指令格式，旨在在Web浏览器中有效执行。它是对JavaScript的补充，允许开发人员用Rust，C ++和C等语言编写至关重要的性能代码，并在浏览器中运行。通过将代码编译到WASM，它已成为与平台无关的，并且可以以近乎本地的速度运行。 Rust是一种以其安全性和性能而闻名的系统编程语言，由于其与WASM的强大保证和无缝集成，因此在WebAssembly生态系统中广受欢迎。 WebAssembly通过具有令人印象深刻的性能的复杂任务（例如游戏引擎，图像处理和科学模拟）来开辟网络开发的新可能性。
这是一个简短的视频，您可能想在继续阅读之前观看。
WebAssembly的优势
提高了计算要求的作业的性能是WASM最有说服力的功能之一。例如，在对巨大数据集进行复杂的统计计算时，WebAssembly可以比常规JavaScript快得多。因此，由于WebAssembly的高度优化的设计，代码可以比JavaScript更快地执行。
WebAssembly的可移植性是另一个好处。跨平台应用程序非常易于开发，因为可以从多种语言中生成WebAssembly代码并在任何可以使用的平台上执行。
最后，安全是WebAssembly架构中的另一个考虑因素。代码无法访问敏感数据或运行有害代码，因为它提供了沙箱的执行环境。
在生锈中使用WebAssembly
Rust是一种提供内存安全性和性能的系统编程语言。它也是编写WebAssembly代码的好语言。让我们看一下如何在Rust中使用WebAssembly。
设置项目
要开始，我们需要安装一个称为WASM-PAKC的工具。我们可以使用货物安装工具
cargo install wasm-pack
安装了wasm-pack后，我们可以创建一个新的Rust项目并添加所需的功能。我们可以使用wasm-bindgen属性来注释这些函数，该函数照顾了从幕后javascript调用这些功能所需的所有内容。
设置生锈环境
- 按照官方的生锈文件安装生锈。
- 使用
cargo new --lib wasm-tools创建一个新的Rust Project。 - 使用
cd wasm-tools导航到项目目录。
在生锈中实现斐波那契功能
- 在文本编辑器中打开
src/lib.rs文件。 - 用以下fibonacci函数的RUST实现替换默认代码
#[wasm_bindgen]
pub fn fib(n: usize) -> usize {
match n {
0 => 0,
1 => 1,
_ => fib(n - 1) + fib(n - 2),
}
}
为WebAssembly构建生锈代码
- 打开终端并导航到项目目录（
wasm-tools）。 - 运行命令
wasm-pack build --target web --release将锈蚀代码构建为WebAssembly软件包。
在前端
- 创建一个
index.html文件并添加基本的样板代码。 - 附加
main.js脚本。 - 在
main.js文件中添加以下功能，以便我们可以比较两个功能的性能。
import init, { add, greet, fib, alert_wasm } from './wasm-tools/pkg/wasm_tools.js';
const app = document.getElementById('app');
const btn = document.getElementById('btn');
const btnWasmAlert = document.getElementById('btn-wasm-alert');
btn.addEventListener('click', handleTriggerFib);
btnWasmAlert.addEventListener('click', () => {
alert_wasm('Hello from Wasm');
});
function updateContent(content) {
const div = document.createElement('div');
div.innerHTML = content;
app.appendChild(div);
}
function fibJS(n) {
if (n < 2) {
return n;
}
return fibJS(n - 1) + fibJS(n - 2);
}
async function run() {
await init();
const res = add(1, 2);
updateContent(`1 + 2 = ${res}`);
const res2 = greet('Wasm Tools');
updateContent(res2);
}
function measureExecutionTime(fn) {
return function(...args) {
const start = performance.now();
const result = fn.apply(this, args);
const end = performance.now();
const executionTime = end - start;
return {result, executionTime};
};
}
function handleTriggerFib() {
// JS
const {result: res3, executionTime: time3} = measureExecutionTime(fibJS)(40);
updateContent(`fibJS(40) = ${res3} in ${time3}ms`);
// Wasm
const {result: res4, executionTime: time4} = measureExecutionTime(fib)(40);
updateContent(`fibWasm(40) = ${res4} in ${time4}ms`);
// Web Worker
const worker = new Worker('./worker.js');
const start = performance.now();
worker.addEventListener('message', (event) => {
const {data} = event;
const {res} = data;
const end = performance.now();
updateContent(`fibWorker(40) = ${res} in ${end - start}ms`);
worker.terminate();
});
worker.postMessage({n: 40});
}
run();
在浏览器中打开HTML文件
访问https://wasm-web-performance.vercel.app直播申请。
结论
总而言之，WebAssembly是优化Web应用程序的强大工具。它提供了改进的性能，可移植性和安全性，使其成为希望优化其应用程序的Web开发人员的吸引人选择。 Rust是编写WebAssembly代码的一种很好的语言，而wasm-pack使其易于编译和消耗JavaScript中的WebAssembly代码。
源代码
可以找到此项目的源代码here。