wasm初探

介绍

https://github.com/torch2424/wasm-by-example/blob/master/examples/introduction/introduction.all.en-us.md

我们先简单介绍一下 WebAssembly 的主要概念：WebAssembly 是一种用于在 Web 上运行字节码的编译目标语言。相对于 Javascript，WebAssembly 提供了可预测的性能。它本身并不比 Javascript快，但在正确的用例中它可以比 JavaScript 快。例如计算密集型任务，例如嵌套循环或处理大量数据。因此，WebAssembly 是对 JavaScript 的补充，而不是替代.

WebAssembly 非常便携。WebAssembly 运行于：所有主要的 Web 浏览器、V8 运行时和独立的 Wasm 运行时.

WebAssembly 具有线性内存，换句话说，是一个可扩展的大数组。

在 Javascript 的上下文中，Javascript 和 Wasm 可以同步访问。

WebAssembly 可以导出函数和常量，并且在 Javascript 的上下文中，可以通过 Javascript 和 Wasm 同步访问。WebAssembly 在其当前的 MVP 中仅处理整数和浮点数。但是，存在工具和库可以方便地传递高级数据类型。有了这个，让我们来看看我们的Hello World以了解一些实际的概念。

Compiling a New C/C++ Module to WebAssembly - WebAssembly | MDN

C to wasm

Mac上安装Emscripten

How do you set up a local testing server? - Learn web development | MDN

自动生成http服务并调用当前目录下前端文件

lumingming@lumingmingdeMacBook-Pro c % ls

hello.chello.htmlhello.jshello.wasm

lumingming@lumingmingdeMacBook-Pro c % python3 -n hello.c

Unknown option: -n usage: /Library/Developer/CommandLineTools/usr/bin/python3 [option] ... [-c cmd | -m mod | file | -] [arg] ... Try `python -h' for more information. lumingming@lumingmingdeMacBook-Pro c % python3 -m http.server

Serving HTTP on :: port 8000 (http://[::]:8000/) ... ::ffff:

127.0.0.1 - - [02/Nov/2022 11:14:36] "GET / HTTP/1.1" 200 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:14:36] code 404, message File not found ::ffff:

127.0.0.1 - - [02/Nov/2022 11:14:36] "GET /favicon.ico HTTP/1.1" 404 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:14:42] "GET /hello.html HTTP/1.1" 200 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:14:42] "GET /hello.js HTTP/1.1" 200 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:14:42] "GET /hello.wasm HTTP/1.1" 200 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:16:33] "GET /hello.html HTTP/1.1" 304 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:16:33] "GET /hello.js HTTP/1.1" 304 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:16:33] "GET /hello.wasm HTTP/1.1" 304 - ::ffff:

127.0.0.1 - - [02/Nov/2022 11:16:35] "GET /hello.html HTTP/1.1" 304 - ::ffff:

127.0.0.1 - - [02/Nov/2022 14:38:02] "GET /hello.html HTTP/1.1" 304 - ::ffff:

127.0.0.1 - - [02/Nov/2022 14:38:02] "GET /hello.js HTTP/1.1" 304 - ::ffff:

127.0.0.1 - - [02/Nov/2022 14:38:02] "GET /hello.wasm HTTP/1.1" 304 -go to wasm

生成结果

mac环境下，环境变量配置 tinygo命令生效

export PATH=/Users/lumingming/tinygo/bin:$PATH

lumingming@lumingmingdeMacBook-Pro demo % ls assemblyscriptgorust 

 lumingming@lumingmingdeMacBook-Pro go % tinygo build -o main.wasm -target wasm ./main.go

lumingming@lumingmingdeMacBook-Pro wasm-by-example % cp $(tinygo env TINYGOROOT)/targets/wasm_exec.js .

lumingming@lumingmingdeMacBook-Pro go %

lumingming@lumingmingdeMacBook-Pro go % ls README.mdindex.htmlindex.html.1index.jsmain.gomain.wasmwasm_exec.js

lumingming@lumingmingdeMacBook-Pro go % python3 -m http.server Serving

HTTP on :: port 8000 (http://[::]:8000/) ... ::ffff:127.0.0.1 - - [02/Nov/2022 16:09:09] "GET /index.html HTTP/1.1" 304 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:09:09] "GET /demo-util/instantiateWasm.js HTTP/1.1" 200 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:09:09] "GET /main.wasm HTTP/1.1" 200 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:09:15] "GET /index.html HTTP/1.1" 304 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:09:25] "GET /index.html HTTP/1.1" 304 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:14:40] "GET /index.html HTTP/1.1" 200 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:14:40] "GET /wasm_exec.js HTTP/1.1" 200 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:14:40] "GET /index.js HTTP/1.1" 200 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:14:40] "GET /demo-util/instantiateWasm.js HTTP/1.1" 200 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:14:40] "GET /main.wasm HTTP/1.1" 200 - ::ffff:127.0.0.1 - - [02/Nov/2022 16:14:40] code 404, message File not found ::ffff:127.0.0.1 - - [02/Nov/2022 16:14:40] "GET /favicon.ico HTTP/1.1" 404 -

官网代码需调整

结果展示

浏览器选择火狐浏览器

调试