wasm 访问html元素,[wasm] Hello WebAssembly
1. 背景
WebAssembly是一种运行在现代网络浏览器中的新型代码并且提供新的性能特性和效果。
它设计的目的不是为了手写代码而是为诸如C、C++和Rust等低级源语言提供一个高效的编译目标。
WebAssembly是一门低级的类汇编语言。
它有一种紧凑的二进制格式,使其能够以接近原生性能的速度运行并且为诸如C++和Rust等拥有低级的内存模型语言提供了一个编译目标以便它们能够在网络上运行。
2. 准备工作
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
(2)安装cmake
$ brew install cmake
(3)编译Emscripten
$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit # 大概需要1个小时
$ ./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit
$ source ./emsdk_env.sh
注:
(1)--global标识会让PATH变量在全局被设置,所以接下来所打开的终端或者命令行窗口都会被设置。
如果仅仅想让Emscripten在当前窗口生效,就删掉这个标识。
(2)每当想要使用Emscripten时,尝试从远程更新最新的Emscripten代码是个很好的习惯(运行 git pull)。
如果有更新,重新执行 install 和 activate 命令。
这样就可以确保您使用的Emscripten一直保持最新。
3. 例子
当使用Emscripten来编译的时候有很多种不同的选择,我们介绍其中主要的2种:
(1)编译到 wasm 并且生成一个用来运行我们代码的HTML,将所有 wasm 在web环境下运行所需要的 “胶水” JavaScript代码都添加进去。
(2)编译到 wasm 然后仅仅生成 JavaScript。
3.1 生成HTML
新建hello.c文件,
#include
int main(int argc, char ** argv) {
printf("Hello World\n");
}
使用Emscripten编译,
$ emcc hello.c -s WASM=1 -o hello.html
其中,
(1)-s WASM=1 指定了我们想要的wasm输出形式。
如果我们不指定这个选项,Emscripten默认将只会生成asm.js。
(2)-o hello.html 指定这个选项将会生成HTML页面来运行我们的代码,
并且会生成wasm模块以及编译和实例化wasm模块所需要的“胶水”js代码,这样我们就可以直接在web环境中使用了。
编译生成的目录结构为,
.
├── hello.c
├── hello.html
├── hello.js
└── hello.wasm
注:
在浏览器中不能直接打开hello.html,而是要在本地启动一个静态资源服务器,
$ http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://30.37.60.47:8080
Hit CTRL-C to stop the server
然后,通过以下url访问,http://127.0.0.1:8080/hello.html。
其中,http-server是一个由node启动的http服务器。
3.2 生成JavaScript
通过用.js取代.htm(l)作为文件后缀名,你就可以得到只有JavaScript的输出文件,而不再是完整的HTML文件。
$ emcc hello.c -s WASM=1 -o hello.js
目录结构如下,
.
├── hello.c
├── hello.js
└── hello.wasm
尽管如此,不推荐这样做。
因为Emscripten需要大量的JavaScript“胶水”代码从而能够处理内存分配、内存泄漏以及大量的其他问题。
这些问题都已经在提供的模板中得到了处理,使用模板要比自己编写模板要容易得多。
4. 自定义HTML模板
我们可以使用--shell-file xxx.html 编译参数来指定自定义的HTML模板,
例如,可以在./emsdk文件夹中搜索一个叫做shell_minimal.html的文件,然后复制出来,
位置在这里,./emsdk/emscripten/incoming/src/shell_minimal.html。
进行如下编译,
$ emcc hello.c -s WASM=1 -o hello.html --shell-file shell_minimal.html
参考
wasm 访问html元素,[wasm] Hello WebAssembly相关推荐
- WebAssembly(WASM) 和云原生 | wasm和区块链
文章目录 一.什么是Wasm.WASI 二.WebAssembly(WASM) 和云原生 WebAssembly 能不能取代 Docker 三.Wasm container 与 Kubernetes ...
- WASM 原生时代已经到来 | 解读 WebAssembly 的 2022
Ending定律:一切可编译为 WebAssembly 的,终将被编译为 WebAssembly(Any application that can be compiled to WebAssembly ...
- python元组元素的提取比_Python 元组数据类型(tuple)详解 [访问元组元素][修改元组元素][删除元组][学习 Python 必备基础知识][看此一篇就够了]...
您的"关注"和"点赞",是信任,是认可,是支持,是动力...... 如意见相佐,可留言. 本人必将竭尽全力试图做到准确和全面,终其一生进行修改补充更新. 1 元 ...
- Struts2 访问web元素
访问web元素的四种方法(耦合,依赖注入).(耦合,非依赖注入).(非耦合,依赖注入).(非耦合,非依赖注入) 耦合:可以得到HttpServletResponse,HttpServletReques ...
- 086_访问html元素
1. 访问html元素有一下几种方法: 1.1. 通过id查找html元素. 1.2. 通过标签名查找html元素. 1.3. 通过类名查找html元素. 1.4. 通过CSS选择器查找html元素. ...
- php访问数组用引号_php双引号中访问数组元素报错如何解决
最近在做微信公众号开发,在一个发送图文接口中,需要把数组元素拼接在XML字符串中,本文主要和大家分享一篇基于php双引号中访问数组元素报错的解决方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小 ...
- OpenCV中6种访问Mat元素的方法
Mat中不管是以at访问还是ptr访问,都是行优先 ,先Y轴后X轴(即先行后列) 1.使用at访问 /* *OpenCV2中Mat的at操作访问矩阵元素 * */#include <highgu ...
- 访问数组元素进行获取
数组的访问 索引: 每一个存储到数组的元素,都会自动的拥有一个编号,从0开始,这个自动编号称为数组索引(index),可以通过数组的索引访问到数组中的元素. 格式: 数组名[索引] 数组的长度属性: ...
- 本地方法(JNI)——访问数组元素+错误处理
[0]README 1) 本文文字描述 均转自 core java volume 2 , 旨在理解 本地方法(JNI)--访问数组元素+错误处理 的基础知识 : 2)for source code, ...
最新文章
- tensorflow的axis理解
- gis 空间分析 鸟类栖息地选取_动物栖息地选择评估的常用统计方法
- 2019牛客网暑假多校训练第四场 K —number
- Servlet3.0新特性全解
- 重磅!百度研究院发布2021年十大科技趋势预测
- 【C基础】指针/指针运算/二级指针/函数指针
- ckeditor3 配置
- 如何在PHP里面连接数据库?
- 腾讯四季度数实经济收入首超游戏达479.58亿元
- 定义druid工具类
- Expression Blend 2 September Preview is now available!(中文版)
- 【博客话题】技术之路上的人和事
- JavaScript之WebSocket 技术
- linux异步io底层原理,异步IO简析
- 郑州大学linux安装锐捷客户端
- 多服务台排队系统仿真基于c语言,带优先级的多服务台排队系统Monte Carlo模拟
- bzoj千题计划268:bzoj3131: [Sdoi2013]淘金
- 最小生成树算法超详细教程
- 大一学生作品《前端框架开发技术》 期末网页制作 HTML+CSS+JavaScript 个人主页网页设计实例
- Nacos 1.1.0发布,支持灰度配置和地址服务器模式