大家好,初探我是初探前端西瓜哥。
我们来入门一下 wasm。初探
wasm 是 WebAssembly 的缩写。
wasm 并不是初探传统意义上汇编语言(Assembly),而是初探一种中间编译的字节码,可以在浏览器上运行非 JavaScript 语言,初探只要它能被编译成 wasm。初探
wasm 的初探优点:
缺点:
首先我们需要用到 Emscripten。Emscripten 是一个编译器工具链,使用 LLVM 去编译出 wasm。
先安装 Emscripten SDK。
我选择官网推荐的方式进行安装。西瓜哥我用的系统是 MacOS.
# 拉取仓库git clone https://github.com/emscripten-core/emsdk.git# 进入目录cd emsdk# 下载最新 SDK 工具./emsdk install latest# 版本设置为最新./emsdk activate latest# 将相关命令行工具加入到 PATH 环境变量中(临时)source ./emsdk_env.sh
下载那里我一开始失败了几次,后来用了程序员都懂的那个东西才下载成功。
看看是不是成功安装了。
emcc -v
如果正确输出版本相关信息,就是安装成功了。
需要注意的是,每次打开新的终端,都要执行一下 source ./emsdk_env.sh 去临时更新 PATH 变量。
如果不想每次都要执行这玩意,可以在 .zshrc(或 .bashrc)中加上:
# 需使用 emsdk_env.sh 文件的绝对路径source /path/to/emsdk_env.sh &> /dev/null
接下来我们要选择一门高级语言。
语言不能有 GC(自动垃圾回收机制)特性,比如 Java、Python。
(不过可以通过一些非官方的工具转成 wasm,就是问题比较多)
写 wasm,最流行的是 Rust 和 C/C++。
C/C++ 的轮子比较丰富,比如 Skia(Canvas 底层调用的库)就是 C++ 写的。可惜的是 C/C++ 没有包管理工具。
而当下最炙手可热的当属 Rust,我不得不说它真的很酷,有包管理工具,工具链也很完善。就是学习曲线过于陡峭,太难上手。
本文选择使用 C/C++ 语言。
先创建一个 hello.c 文件:
#include <stdio.h>int main() { printf("Hello, world!\n"); return 0;}
运行下面命令编译成 wasm。
emcc hello.c
然后看到多了两个文件:a.out.js 和 a.out.wasm。
其中 js 文件是胶水代码,用来加载和执行 wasm 的,wasm 不能直接作为入口文件使用。
我们用 nodejs 运行一下 a.out.js,可以看到成功输出了 "Hello, world!"。
当然我们也可以创建一个 html 文件,引入这个 a.out.js 文件,也可以看到控制台能够正确输出输出。
看下资源请求,可以看到 html 引入了 a.out.js,然后 a.out.js 再引入 a.out.wasm。
为了方便大家调试,emscripten 还很贴心地提供了额外生成 index.html 的方式,并会引用上编译出来的 js 文件。
我们需要不上 -o <文件名>.html 指定输出的 html。
emcc hello.cpp -o hello.html
会生成 hello.html、hello.js 和 hello.wasm 三个文件。
打开 hello.html,我们可以看到一个界面,中间是一个 Canvas,显示 wasm 的渲染结果。下面则是控制台的输出。
出于安全考虑,wasm 最终是要在浏览器的沙箱内运行的,是无法读取本地文件的。
但我们还是可以使用 C++ 的读取文件的方法的,只是它会被转换为从虚拟文件系统里读取。
hello_world_file.cpp 文件:
#include <stdio.h>int main() { FILE *file = fopen("./hello_world_file.txt", "rb"); if (!file) { printf("cannot open file\n"); return 1; } while (!feof(file)) { char c = fgetc(file); if (c != EOF) { putchar(c); } } fclose (file); printf("\n"); return 0;}
需要读取的文本文件 hello_world_file.txt 为:
==This data has been read from a file.The file is readable as if it were at the same location in the filesystem, including directories, as in the local filesystem where you compiled the source.前端西瓜哥==
使用 --preload-file 选项,指定要预加载的资源文件。
emcc hello_world_file.cpp -o hello.html --preload-file hello_world_file.txt
结果:
和编译 C 一样,为了提高开发时的编译效率,默认编译(默认为 -O1)出来的 wasm 是没有进行优化的。
下面命令会用优化等级 2 进行编译。
emcc -O2 hello.c
还有其他的优化等级,对应编译时间会变长,编译出来的文件尺寸会变大。
本文简单入门了一下 wasm。
wasm 是 JS 的补充,解决了 JS 的一些短板,不过总的来说大多数场景是用不上的,但它还在不断发展,我还是挺看好的。未来可期。
责任编辑:姜华 来源: 前端西瓜哥 Wasm汇编语言(责任编辑:知识)
中国银行(03988.HK)拟赎回全部2.8亿股第二期境内优先股 每股面值人民币100元
电子商务在非洲悄然兴起 为亿万人的生活消费方式提供了另一种可能
中国金融投资管理(00605.HK)公布消息:将考虑向罗锐及关雪玲提起法律诉讼