首页 > 其他分享 >WebAssembly简介及体验

WebAssembly简介及体验

时间:2022-08-14 23:24:01浏览次数:67  
标签:WebAssembly web 简介 js 编译 wasm 体验 hello

webassembly

官方简介
WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式.
WebAssembly 在 web 中被设计成无版本、特性可测试、向后兼容的。WebAssembly 可以被 JavaScript 调用,进入 JavaScript 上下文,也可以像 Web API 一样调用浏览器的功能。当然,WebAssembly 不仅可以运行在浏览器上,也可以运行在非web环境下。
WebAssembly 有一套完整的语义,实际上 wasm 是体积小且加载快的二进制格式, 其目标就是充分发挥硬件能力以达到原生执行效率.
可以让ffmpeg运行在浏览器环境,unity web也是使用webassembly网页Demo

实验

进入docker编译环境

docker镜像
docker pull abdulachik/ffmpeg.js:latest
docker run -it -p 8080:8080 -v /Users/workspace/Downloads/ffmpeg_wasm:/tmp --privileged=true abdulachik/ffmpeg.js:latest /bin/bash

代码

cd /tmp
touch hello.c
hello.c

#include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello, world!\n");
//注意这里不用return
}

编译测试

emcc ./hello.c -s WASM=1 -o hello.html
我们可以使用 emrun 命令来创建一个 http 协议的 web server 来展示我们编译后的文件。
emrun --no_browser --port 8080 .
浏览器打开http://127.0.0.1:8080/hello.html

编译默认会生成一个2500多行的JavaScript文件hello.js和一个可反编译成文本wat格式的近1万行代码的hello.wasm文件,
hello.js是一坨胶水,用来在不同条件下为wasm搭建一个执行环境.

报错处理

stdio streams had content in them that was not flushed. you should set EXIT_RUNTIME to 1 (see the FAQ), or make sure to emit a newline when you printf etc.

这一坨英文的意思是,编译出的wasm默认情况下不会退出运行时,这是web情况下期待的方式,主程序main虽然运行结束了,但模块没有退出,静态变量可以保持在内存中,不释放。同时标准 I/O 缓冲区没有被flush,也就没有看到 Hello world!
编译命令改为:
emcc ./hello.c -s WASM=1 -s EXIT_RUNTIME=1 -o hello.html
[emscripten 安装与使用, 让C语言出现在前端](https://segmentfault.com/a/1190000038456358?sort=newest)

标签:WebAssembly,web,简介,js,编译,wasm,体验,hello
From: https://www.cnblogs.com/qsbye/p/16586672.html

相关文章

  • Apollo简介
    1、SpringCloudConfig和Apollo的对比 SpringCloudConfigVSApollo.jpg如上图对比SpringCloudConfig优势是对SpringBoot原生支持,且是SpringCloud组件。缺点是......
  • tauri学习(1)-初体验
    tauri是一个类似Electron的框架,对于开发者最大的区别是后端语言用的是Rust,而且生成的可执行程序更小,今天尝试了下,感觉还不错,按官网的做法,只需执行下的命令(mac环境)npmc......
  • react+rust+webAssembly(wasm)示例
    前言:WebAssembly(简称wasm)已经出来有几年了,在一些需要高性能的web应用场景中,wasm技术可以让代码执行效率大大提升。react做为目前大厂主流的前端框架之一,搭配上最近几年一......
  • 在jira上创建测试计划,你的每一步都能有像手游奖惩系统一样的心流体验
      1、新建测试计划2、完成测试计划创建 3、添加测试计划用例 4、添加测试周期     5、执行测试周期    当人沉浸在当下着手的某件事......