尝试 WebAssembly
wasm 为浏览器应用开辟了一个全新的领域。意义非凡，并不是一句两句说的清的，今天正好有点空做些实验。
1. emsdk 的安装
Emscripten 可以直接将 C/C++ 编译为 wasm，让用 C 写的代码可以在浏览器中运行，还是看不见代码那种 :)
没有过多纠结他怎么打包的，反正直接从 github 上下了最新的源码包过来就可以用了：
download emsdk-master.zip
unzip emsdk-master.zip
cd emsdk-master
( emsdk-master update )
emsdk install latest
emsdk activate latest
然后添加 emsdk 的环境变量，我这里直接追加在了 ~/.bashrc 的最后：
. (前面解压的路径)/emsdk-master/emsdk_env.sh
或者你可以把 env.sh 里面的内容直接拷贝到 .bashrc 里面去。
------
到此 emsdk 安装完成。
------
如果中间出什么问题，估计是你系统的编译工具啥的安装不完整导致的：
sudo apt update
sudo apt install python2.7 nodejs build-essential cmake git-core default-jre
2. hello_world.html
是的，emsdk 支持直接把你的 C 代码编译成一个 html 文件。主要是因为 wasm 没法直接在浏览器运行，需要 js 将其载入，再调用啥的。直接使用官方的编译为 *.html 的方法，可以降低入门门槛。
使用的 C 代码：
#include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello, world!\n");
}
编译指令：
emcc hello.c -o hello.html
因为这里没法直接点解 hello.html 来运行 wasm，所以，需要起个 web 服务器。所幸是 emsdk 还带了个服务器：
emrun --no_browser --port .
或者你也可以直接使用 python3 的 web 服务器：
python3 -m http.server
然后，在你的浏览器里面就可以看到这结果了。
2. 自己写加载器
官方的这个 html 真的是有点丑，我们也可以自己写个加载器，将 wasm 中的函数加载过来。
测试的 C 函数：
int fib(int n) {
int i;
int t;
int a = ;
int b = ;
for(i = ; i < n; i++) {
t = a + b;
a = b;
b = t;
}
return b;
}
将其编译为 wasm 模块（别问我为什么，官方说的，我也没研究为啥）：
emcc fib.c -Os -s WASM= -s SIDE_MODULE= -o fib.wasm
然后我们就可以自己写个网页来加载它了：
<html>
<body>
<script>
fetch('fib.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes, {imports: {}})
).then(results => {
window.fib = results.instance.exports.fib;
});
</script>
</body>
</html>
开启 web 服务器，然后打开浏览器试试看。
因为上面的代码只是引入 wasm 中的函数到 javascript，所以我们要执行这个函数需要打开调试 console：
尝试 WebAssembly的更多相关文章
- 翻译：WebAssembly简介：我们为什么要关心这个技术？
原文: https://tomassetti.me/introduction-to-webassembly/ WebAssembly简介:我们为什么要关心这个技术? 在对抗js的伟大战斗中有 ...
- F#周报2019年第11期
新闻 Bolero:WebAssembly中的F# 尝试WebAssembly里的F# JetBrains的fsharp-support 2019.1 ML.NET 0.11发布 Outreachy内 ...
- WebAssembly学习(二)：Windows10下WebAssembly C/C++编译环境的搭建与Hello World尝试
首先,不论是在Windows.Linux还是Mac上,Webassembly的编译都是主要依赖于Emscripten SDK这个工具的.但是,在这里必须要吐槽一下,不论是WebAssembly官网.W ...
- WebAssembly：随风潜入夜
What? WebAssembly 是一种二进制格式的类汇编代码,可以被浏览器加载和并进一步编译成可执行的机器码,从而在客户端运行.它还可以作为高级语言的编译目标,理论上任何语言都可以编译为 WebA ...
- JavaScript与WebAssembly进行比较
本文由云+社区发表 作者:QQ音乐前端团队 在识别和描述核心元素的过程中,我们分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助 ...
- 用c# 开发html5的尝试，试用bridge.net
Javascript交叉编译方案很多了,工业级品质的也不是没有,但前两年我从事html5 3d引擎开发时,做过一圈评估,没有可用的. 作为一个c#爱好者,我自然是很希望能最大限度的利用c#的生产力,之 ...
- 如何生成WebAssembly文件？
许多3D游戏都是用C/C++语言写的,如果能将C/C++语言编译成JavaScript代码,它们不就能在浏览器里运行了吗?Emscripten的底层是LLVM编译器,Emscripten可以将c/c+ ...
- webassembly
为什么需要 WebAssembly 自从 JavaScript 诞生起到现在已经变成最流行的编程语言,这背后正是 Web 的发展所推动的.Web 应用变得更多更复杂,但这也渐渐暴露出了 JavaScr ...
- WebAssembly 上手
安装 Mac 上最便捷的安装方式当然是通过 Homebrew: $ brew install emscripten 安装好之后讲道理就已经自动配置好一切,然后 emcc 命令便可用了. 下面看非 Ho ...
随机推荐
- 系统管理员必须知道的PHP安全实践
Apache web 服务器提供了这种便利 :通过 HTTP 或 HTTPS 协议,访问文件和内容.配置不当的服务器端脚本语言会带来各种各样的问题.所以,使用 PHP 时要小心.以下是 25 个 PH ...
- The 2019 Asia Nanchang First Round Online Programming Contest B. Fire-Fighting Hero
题目链接:https://nanti.jisuanke.com/t/41349 题意:有一个灭火英雄,和一个灭火团队,一个人与一个团队比较. 灭火英雄到其他灭火点的最短路最大值,与一个团队到其他灭火点 ...
- js日期增加或减少一天
想自己写一个日期的加减方法,但是涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断,有些复杂,其实只要调用Date对象的setDate()函数就可以了,具体方法如下: function a ...
- python基本数据类型的时间复杂度
1.list 内部实现是数组 2.dict 内部实现是hash函数+哈希桶.一个好的hash函数使到哈希桶中的值只有一个,若多个key hash到了同一个哈希桶中,称之为哈希冲突. 3.set 内部实 ...
- 数据库中的gt,ge,lt,le的区别
eq相等 ne.neq不相等, gt大于, lt小于 gte.ge大于等于 lte.le 小于等于 not非 mod求模 is [not] div by是否能被某数整除 i ...
- linux 指定用户 启动 程序
sudo -H -u {username} /bin/bash -c "python test.py &" "&" 后台运行指令 本人亲测可用 ...
- 安装服务器pve虚拟系统(可以通过web管理物理机集群资源与虚拟机)
做此系统前,可以先进入bios,设置一下ipmi的网络地址.可以远程管理服务器 输入服务器的ipmi里面配置的ip 默认账号与密码admin 点击launch 会自动下载认证文件 下载好java软件环 ...
- ESA2GJK1DH1K基础篇: 阿里云物联网平台: 测试云平台显示MQTT客户端发过来的消息
现在这里空空如也 咱自定义的也没有数据 现在就是传上来温度数据,让这里显示温度数据 你发布的主题 /sys/a1m7er1nJbQ/Mqtt/thing/event/property/post 发布 ...
- memcpy和strcpy的区别
strcpy和memcpy主要有以下3方面的区别. 复制的内容不同.strcpy只能复制字符串,而memcpy可以复制任意内容,例如字符数组.整型.结构体.类等. 复制的方法不同.strcpy不需要指 ...
- TensorFlow分布式训练MNIST分类器
http://c.biancheng.net/view/2004.html 本节以分布式方式训练完整的 MNIST 分类器. 该案例受到下面博客文章的启发:http://ischlag.github. ...