WebAssembly 初探
WebAssembly 初探
1、什么是 WebAssembly
WebAssembly是一种新的编码方式,可以在现代的网络浏览器中运行 - 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以接近原生的性能运行,并为诸如C / C ++等语言提供一个编译目标,以便它们可以在Web上运行。它也被设计为可以与JavaScript共存,允许两者一起工作。
2、WebAssembly 有什么用
- 封装需要高性能的逻辑
- 代码混淆,防盗用
- 扩展 Web 能力
- 复用已有算法
- ……
Unity WebGL Player | Tanks!
3、WebAssembly 怎么用
WebAssembly 的作用是将其它语言的代码编译成类似于汇编/机器码的代码供 web 使用,所以在使用这些代码之前,需要先将 其它语言代码编译成为 web 可识别的代码。
准备工作(以C++/C为例)
Emscripten 环境安装
git clone https://github.com/juj/emsdk.git
cd emsdk# 在 Linux 或者 Mac OS X 上
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
# 如果在你的macos上获得以下错误
Error: No tool or SDK found by name 'sdk-incoming-64bit'
# 请执行
./emsdk install latest
# 按照提示配置环境变量即可
./emsdk activate latest# 在 Windows 上
emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit# 注意:Windows 版本的 Visual Studio 2017 已经被支持,但需要在 emsdk install 需要追加 --vs2017 参数。
安装完成后,将 emcc 编译命令添加到环境变量,以便于编译
# on Linux or Mac OS X
source ./emsdk_env.sh# on Windows
emsdk_env.bat
C++/C 测试代码编写
使用CLion 创建工程,在 main.cpp 中
#include <stdio.h>// main 方法,编译完成后会自动执行
int main(int argc, char ** argv) {printf("Hello World\n");
}add(int a, int b) {return a+b;
}
在以上代码中,声明了 main 方法, 以及一个 add 方法。使用如下命令进行编译
emcc main.cpp -s STANDALONE_WASM -O1 -o out/hello.html
关于 emcc 的参数说明
下面列出了我们命令中选项的细节:
s WASM=1
— 指定我们想要的wasm输出形式。如果我们不指定这个选项,Emscripten默认将只会生成asm.js。o hello.html
— 指定这个选项将会生成HTML页面来运行我们的代码,并且会生成wasm模块,以及编译和实例化wasm模块所需要的“胶水”js代码,这样我们就可以直接在web环境中使用了。
这个时候在您的源码文件夹应该有下列文件:
hello.wasm
二进制的wasm模块代码hello.js
一个包含了用来在原生C函数和JavaScript/wasm之间转换的胶水代码的JavaScript文件hello.html
一个用来加载,编译,实例化你的wasm代码并且将它输出在浏览器显示上的一个HTML文件
此时,会生成三个文件
- hello.html 布局文件
- hello.js 胶水js文件
- hello.wasm 编译完成的主要 wasm 文件
Wasm 的引用
wasm生成后,需要通过 fetch 或 XHR等方式来进行加载。如果是只架子啊 wasm 文件的话,需要如下方式
fetch('demo.wasm').then(response =>response.arrayBuffer() // wasm 的内存 buffer
).then(buffer =>WebAssembly.instantiate(buffer, importObj)
).then(({module, instance}) =>// 这里即可拿到 instance
);
但是,wasm 的加载并没有这么简单,可能需要做很多处理去配置 importObj。所以可以直接调用 胶水代码 [hello.js] 来进行 wasm 的加载。
<script src="hello.js"></script>
<script>Module.onRuntimeInitialized = function() { //此时才能获得完整Module对象console.log(Module)console.log(Module._add(1,1))}
</script>
这里,即可在 控制台看到 Hello World 的输出。 因为 main 方法编译之后是自动执行的,所以会直接输出。
add 方法的调用
在 main.cpp 中, 如果以如下方式声明, 会被 emscripten 视作无效方法,是不会在 Module 中出现,所以是不能引用的
add(int a, int b) {return a+b;
}
这里需要对 main.cpp 方法进行改写
#include <stdio.h>
#include "[emscripten 项目路径]/emscripten/emscripten.h"int main(int argc, char ** argv) {printf("Hello World\n");
}#ifdef __cplusplus
extern "C" {#endifint EMSCRIPTEN_KEEPALIVE add(int a, int b) {return a+b;
}#ifdef __cplusplus
}
#endif
再次编译
emcc main.cpp -s STANDALONE_WASM -O1 -o out/hello.html
此时,即可通过 Module.**_add**(1,1)
来进行 c++ 方法的调用
4、哪里用了 WebAssembly
8个WebAssembly 应用案例
5、WebAssembly 语言支持
- WebAssembly支持不断发展。目前,以下语言支持它:
- C / C ++ -通过EmScripten或其他基于LLVM的最小工具链提供了很好的支持(可立即投入生产)
- Rust -WebAssembly是受官方支持的目标,周围有非常活跃的社区。
- Go- 现在已将WebAssembly作为正式但实验性的目标来支持
- C# -通过Blazor具有实验支持,但是当前需要将.NET运行时嵌入到Wasm中。Blazor在最近的预览版本中被Microsoft正式采用为实验技术。
- D - D的“ betterC”子集可以通过LDC(LLVM编译器)编译为WebAssembly 。
- **TypeScript-**通过AssemblyScript,实验性强,但势头强劲。
- Java的 -通过TeaVM或Bytecoder
- HAXE - 刚刚宣布支持
- Kotlin -Kotlin / Native 0.4 通过 WebAssembly和TeaVM 获得了实验支持
- Python - Pyodide是Python到WebAssembly的移植,其中包括科学的Python堆栈的核心软件包(Numpy,Pandas,matplotlib)。
- **PHP-**实验性的,但具有有效的原型
- Perl - WebPerl是Perl二进制文件到WebAssembly的端口,允许您在Web上运行Perl脚本。
- 斯卡拉 -使用Emscripten编译
- 红宝石 -通过run.rb项目
- 斯威夫特 -使用SwiftWasm,这是目前正在开发中
参考
WebAssembly 中文网|Wasm 中文文档
WebAssembly | MDN
c++项目转成wasm全过程
编译 C/C++ 为 WebAssembly - WebAssembly | MDN
AssemblyScript
Emscripten Tutorial - Emscripten 3.1.8-git (dev) documentation
WebAssembly 初探相关推荐
- ASP.NET Core Blazor Webassembly 之 组件
关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...
- 为什么说 WASM 是 Web 的未来?
这篇文章打算讲什么? 了解 WebAssembly 的前世今生,这一致力于让 Web 更广泛使用的伟大创造是如何在整个 Web/Node.js 的生命周期起作用的,探讨为什么 WASM 是 Web 的 ...
- 基于wasm的探索与研究(一)
WebAssembly初探 本次分享的文章是基于WebAssembly的探索与研究.最近需要做一个与加密相关的项目,想将后端的加密方案直接放到前端使用,好处是加密方案代码只用维护一套,且后端方案更贴近 ...
- ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)
Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...
- ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调
Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...
- ASP.NET Core Blazor Webassembly 之 路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...
- ASP.NET Core Blazor Webassembly 之 数据绑定
上一次我们学习了Blazor组件相关的知识(Asp.net Core Blazor Webassembly - 组件).这次继续学习Blazor的数据绑定相关的知识.当代前端框架都离不开数据绑定技术. ...
- ASP.NET Core Blazor 初探之 Blazor Server
上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...
- vs mfc数据与控件绑定错了_ASP.NET Core Blazor Webassembly 之 数据绑定
上一次我们学习了Blazor组件相关的知识(Asp.net Core Blazor Webassembly - 组件).这次继续学习Blazor的数据绑定相关的知识.当代前端框架都离不开数据绑定技术. ...
最新文章
- oracle 工具:tkprof
- android窗口管理机制
- 23个经典JDK设计模式(转)
- 参加完阿里Java面试:一面+二面+三面+HR四面,后的复盘经验总结!
- Docker 镜像文件的导入和导出
- CCNA笔记:Access Lists
- 软件设计师学习3——操作系统知识
- ios笔记-单例文字代码详解
- 29muduo_net库源码分析(五)
- 微橙人人店 php,最新微橙人人店分销3.5.7整站源码,全开源任意二开,新增及修复多项功能,附升级补丁...
- 关于在windows上首次编译运行pbrt-3
- 电路分析题目详解(一)
- 给QlineEdit创建简单的clicked 信号方式
- 巨头围剿、极兔狂奔:它离拼多多还有多远?
- android 设置录像帧率,华为手机设置相机录像帧率的方法
- 华为2285v2服务器修改SN,华为RH2285 V2服务器升级bios
- 海信85U7G-PRO怎么样 有什么优缺点
- 解决安装rpm包依赖关系的烦恼 - yum工具介绍及本地源配置方法
- 2.9寸墨水屏制作互联网时钟填坑手记
- matlab n(),MATLAB N个实用技巧:MATLAB中文论坛精华总结(第2版)
热门文章
- 直播拉流设备接入阿里云
- css怎么使图片变暗些
- 信息安全工程师学习笔记《第四章》
- 【物联网设计记录】基于机智云云平台的Wi-Fi控制开发板
- sqlite3查询表中最后一条记录
- http://zc.qq.com/en/index.html,index.html
- [SpringCould篇]之服务消费方式Ribbon+RestTemplate
- 正则验证车牌号码(包括新能源车牌)
- 【侯捷】C++内存管理从平地到万丈高楼(前11节学习笔记)
- 我以为猫咪牙齿断了一点不要紧,结果…