Webassembly在浏览器中的运用
前言:
WebAssembly（简称wasm）是一个虚拟指令集体系架构（virtual ISA），整体架构包括核心的ISA定义、二进制编码、程序语义的定义与执行，以及面向不同的嵌入环境（如Web）的应用编程接口（WebAssembly API）。其初始目标是为C/C++等语言编写的程序经过编译，在确保安全和接近原生应用的运行速度更好地在Web平台上运行。
前提条件: 安装MinGW (C/C++编译器) , Emscripten 编译器工具链 , Visual Studio Code
1. 编写代码 web.c
#include "emscripten/emscripten.h"
EMSCRIPTEN_KEEPALIVE
int fibonacci(int n)
{
if (n < 2)
{
return 1;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}
2. 编辑.vscode/c_cpp_properties.json
{
"configurations": [
{
"name": "Win32",
"includePath": [
"${workspaceFolder}/**",
"D:/emsdk/upstream/emscripten/**" // 增加这一行
],
"defines": ["_DEBUG", "UNICODE", "_UNICODE"],
"compilerPath": "D:\\MinGW\\bin\\gcc.exe",
"cStandard": "c17",
"cppStandard": "gnu++14",
"intelliSenseMode": "windows-gcc-x64"
}
],
"version": 4
}
3. 命令行执行命令
emcc web.c -O3 -s WASM=1 -o web.html4. 引入并使用模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 引入生成的web.js 会自动引入web.wasm -->
<script src="./web.js"></script>
<script>
/* web.wasm 模块 */
Module.onRuntimeInitialized = () => {
const time1 = Date.now()
console.log(Module['_fibonacci'](42), 'WebAssembly')
console.log(`WebAssembly 耗时 ${Date.now() - time1} ms`)
}
/* 原生JS */
function fibonacci(n) {
if (n < 2) {
return 1
}
return fibonacci(n - 1) + fibonacci(n - 2)
}
const time2 = Date.now()
console.log(fibonacci(42), 'JavaScript')
console.log(`JavaScript 耗时 ${Date.now() - time2} ms`)
</script>
</body>
</html>
输出:
433494437 'JavaScript'
JavaScript 耗时 2501 ms
433494437 'WebAssembly'
WebAssembly 耗时 1190 ms至此WebAssembly初体验结束
