WebAssembly入门介绍_webassembly studio

相关文章推荐

WebAssembly？

1，WebAssembly是由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的一个关于面向Web的通用二进制和文本格式的项目。WebAssembly 是除了 JavaScript 以外，另一种可以在网页中运行的编程语言。

2，WebAssembly（缩写WASM）是一种新的字节码格式。并且被设计为多种编程语言（如C、Rust）目标文件格式，以.wasm 为文件名后缀。WASM通过LLVM（Low Level Virtual Machine、底层虚拟机）工具链支持多种编程语言。

3，WebAssembly初期目标是浏览器内应用程序的高性能执行引擎，随着WASM 在开发者社区中越来越流行，WASM 也正在从客户端迁移到服务端，成为服务端技术的新锐。

WebAssembly 可以用 C 语言或者 Rust 开发，再编译成 .was文件（WebAssembly文件），还可以利用TypeScript开发，再编译成 .was文件。

简单地说，WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。

WebAssembly（Wasm）官网

https://webassembly.org/

WebAssembly中文文档

https://www.wasm.com.cn/

Emscripten编译工具 ，可将其他的高级语言，编译成WebAssembly。只要高级语言能转换成 LLVM IR（LLVM Intermediate Representation：LLVM中间表示，LLVM——Low Level Virtual Machine——底层虚拟机），就能被编译成 WebAssembly 字节码。Emscripten官网：

https://emscripten.org/index.html

一般而言编译需要安装工具Emscripten，目前（2020年6月）Windows10中Emscripten 安装比较容易出错，网上文章大多语焉不详，我在试用时饱受挫折，多次实验，通过，特撰 “Windows10中Emscripten 安装详解”一文：

https://blog.csdn.net/cnds123/article/details/106742371

我们也可以使用在线（“在线”意味不需要在本地安装）工具，如WasmFiddle、WebAssembly Studio学习。

WasmFiddle

WasmFiddle界面简陋，但是它不仅能够查看编译结果，还能够加入js代码，查看运行结果。

https://wasdk.github.io/WasmFiddle/?j1noa

WasmFiddle界面介绍

其中：1、此区域输入代码。2、 “Build”启动编译。3、下载Wasm模块。

打开WasmFiddle，输入如下c代码

char* toChar (char* str) {
return str;
}
int add (int x, int y) {
return x + y;
}

int square (int x) {
return x * x;
}

点击“Build”启动编译，然后再下载Wasm模块，可参见上图。

可以在你的电脑的“用户名”的“下载”中找到Wasm模块，参见下图。

编写html代码调用的它：

新建test2.html加入调用上面产生的 program.wasm ：

<!DOCTYPE html>

<title>Document</title>

</head>

* @param {String} path wasm 文件路径

* @param {Object} imports 传递到 wasm 代码中的变量

function loadWebAssembly (path, imports = {}) {

return fetch(path) // 加载文件

.then(response => response.arrayBuffer()) // 转成 ArrayBuffer

.then(buffer => WebAssembly.compile(buffer))

.then(module => {

imports.env = imports.env || {}

// 开辟内存空间

imports.env.memoryBase = imports.env.memoryBase || 0

if (!imports.env.memory) {

imports.env.memory = new WebAssembly.Memory({ initial: 256 })

// 创建变量映射表

imports.env.tableBase = imports.env.tableBase || 0

if (!imports.env.table) {

// 在 MVP 版本中 element 只能是 "anyfunc"

imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })

// 创建 WebAssembly 实例

return new WebAssembly.Instance(module, imports)

// 加载wasm文件

loadWebAssembly('program.wasm')

.then(instance => {

//调用c里面的方法

const toChar = instance.exports.toChar

const add = instance.exports.add

const square = instance.exports.square

console.log('return: ', toChar("12352324"))

console.log('10 + 20 =', add(10, 20))

console.log('3*3 =', square(3))

console.log('(2 + 5)*2 =', square(add(2 + 5)))

</script>

</body>

</html>

注意将test2.html和program.wasm放在同一目录下，我这里是D:\WebAssemblyTest

现在还不能浏览器查看，需要来个web服务器如http-serve。

http-serve就能实现在电脑的浏览器上输入特定`url`，就可以访问本机特定位置的文件，当测试服务器与客户端的交互，启动本地作为一个服务器是相当方便而有必要的。

如果已安装可以跳过这一步，

现在介绍如何使用Node.js的http-serve搭建本地服务器。

打开命令提示符（cmd窗口）：

【需要已安装node

可用node -v验证是否安装

安装http-server

在cmd 中

npm install -g http-server

留意一下安装路径。

打开test2.html

要先使用http-server将D:/WebAssemblyTest（此目录根据你的情况而定，它包含你的网页即.html文件和网页调用的.wasm文件）设置为服务器根目录：

1）需要先运行命令cd /d D:/WebAssemblyTest切换目录，2）再运行命令http-server ，参见下图：

【可以通过ctrl+C使服务停止运行】

3）然后启动浏览器如edge，在地址栏输入 http://127.0.0.1:8080/test2.html 或 http://localhost:8080/test2.html 即可，参见下图：

WebAssembly Studio

WebAssembly Studio 是WebAssembly 的在线 IDE（集成开发环境）开发工具。

https://webassembly.studio/

具体使用参见：

https://blog.csdn.net/m0_46439030/article/details/106365076

对此就不说了。

最后， 提一下新秀AssemblyScript。

AssemblyScript将TypeScript编译成WebAssembly。要将TypeScript 编译为WebAssembly，就要用到AssemblyScript编译器了。AssemblyScript官网

https://www.assemblyscript.org/

GitHub—AssemblyScript 开源项目

https://github.com/AssemblyScript/assemblyscript#installation

WebAssembly介绍WebAssembly？1，WebAssembly是由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的一个关于面向Web的通用二进制和文本格式的项目。WebAssembly 是除了 JavaScript 以外，另一种可以在网页中运行的编程语言。2，WebAssembly（缩写WASM）是一种新的字节码格式。并且被设计为多种编程语言（如C、Rust）目标文件格式，以.wasm 为文件名后缀。WASM通过LLVM（Low Le... 要运行本地副本，您将需要在计算机上安装node.js和webpack，然后运行以下命令： npm install 要在每次文件更改运行时构建 WebAssembly Studio，请执行以下操作： npm run build-watch 要启动开发Web服务器，请运行： npm run dev-server 在提交拉取请求运行之前： npm test 有任何疑问或疑问吗？您随时可以在上以松弛状态找到我们需要邀请吗？该项目依赖于几个出色的库和工具：用于富文本编辑，树视图和上下文菜单。用于汇编和反汇编.wasm文件。用于验证和优化.wasm文件。用于格式化C / C ++文件。 Cassowary.js用于使拆分窗格正常工作。 Showdown

PSPDFKit 的 WebAssembly 基准测试 WebAssembly (Wasm, WA) 的基准测试，它使用 Standalone。 Standalone 的渲染引擎是用 C/C++ 编写并编译为 Wasm。在获取您的分数并在我们的了解更多。（使用 npm 或 Yarn）用于 Web 许可证的 PSPDFKit。如果您还没有，可以。安装pspdfkit npm 包并将所有内容移动到供应商目录。 npm install --save pspdfkit mkdir -p public/vendor cp -R node_modules/pspdfkit/dist public/vendor/pspdfkit 通过安装所有其他依赖项来引导项目。 npm install 现在安装了 PSPDFKit for Web，您需要将您的产品（

Asterius：Haskell到 WebAssembly 的编译器 Asterius是基于GHC的Haskell to WebAssembly 编译器。它将Haskell源文件或Cabal可执行目标编译为 WebAssembly + JavaScript代码，可以在或浏览器中运行。它具有无缝JavaScript互操作（支持Promise轻量级异步FFI）和小的输出代码（约为600KB hello.wasm ）。已经支持许多常见的Haskell软件包，例如lens 。该项目由积极维护。在您的浏览器中运行的流行Haskell应用程序的演示：使用预先构建的容器映像快速入门我们在上托管了一个预先构建的容器映像。该映像还从最近的Stackage快照中发送了约2k的预编译，以方便测试简单程序而无需设置Cabal项目。要使用该映像，请将包含源代码的工作目录挂载为共享卷，然后使用ahc-link程序： terrorjack@hostname:/project $ podman run -it --rm -v $( pwd ) :/workspace -w /workspac

文章目录 WebAssembly 是什么？ WebAssembly 和JavaScript WebAssembly 是什么？ WASM是什么？带你了解 WebAssembly 的前世今生参考URL: http://www.mabiji.com/ webassembly /wasm.html WebAssembly 是什么？ WebAssembly 即WASM， WebAssembly 是一种新的编码格式并且可以在浏览器中运行，WASM可以与JavaScript并存，WASM更类似一种低级的汇编语言。 WebAssembly （又名w

凡泰极客导读：相信不少人听说过 WebAssembly ，它是由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的一个关于面向 Web 的通用二进制和文本格式的项目。那么 WebAssembly （wasm）到底是什么? 翻译成中文的话， WebAssembly （wasm）就是一个可移植、体积小、加载快并且兼容 Web 的全新格式。实际上，WebAssembl...

最近， WebAssembly 在 JavaScript 圈非常的火！搬砖小弟关注的各大前端公众号都在疯狂的推送这类文章，不得不让人深思，人们都在谈论它多么多么快，怎样怎样改变 Web 开发领域。但是没有人讲他到底为什么那么快。在这篇文章里，我将会帮你了解 WebAssembly 到底是什么。当我们了解事务时，都会抛出三个问题： WebAssembly 是什么？ WebAssembly 怎么样工作的？ WebAssembly 做了这件事有什么影响？那么下面就开始从这个方面开始展开对 WebAssembly 的探

使用 WebAssembly ，编译的 WebAssembly 二进制文件（称为模块）与负责解释它的主机之间存在共生关系。这种关系是您使用这项新技术可以做的一切的核心，了解模块和主机之间的界限是能够构建有效的 WebAssembly 应用程序的关键。 WebAssembly 可以在两个不同的级别上查看 - 原始的，基...

WebAssembly （简称Wasm）是一项由W3C组织制定的新一代的Web标准。它是一种低级、面向资源的二进制格式，用于在Web平台上运行高性能的应用程序。 WebAssembly 标准入门 PDF可以提供给读者一个初步了解 WebAssembly 的指南。在该PDF中，读者可以了解到 WebAssembly 的背景、目标和基本原理。首先，介绍了 WebAssembly 的发展背景，即Web平台需要更高性能的应用程序来满足日益增长的互联网需求。接着，解释了 WebAssembly 的目标，即提供一种可跨平台、快速加载和高性能的二进制格式。在PDF中，读者将学到如何使用C、C++、Rust等编程语言来编写和编译 WebAssembly 模块。同时，还将介绍如何将 WebAssembly 模块与Web平台的其他组件（如JavaScript）进行交互，以及如何在浏览器中加载和执行 WebAssembly 代码。此外，该PDF还将详细介绍 WebAssembly 的模块结构和指令集，包括其类型系统、内存管理和异常处理。读者将了解到如何使用 WebAssembly 提供的功能来最大限度地提高应用程序的执行效率和性能。最后， WebAssembly 标准入门 PDF还会提供一些实际应用的示例，让读者深入理解 WebAssembly 的应用场景和潜力。总之， WebAssembly 标准入门 PDF将为读者提供一个全面的介绍，帮助他们了解 WebAssembly 的起源、设计理念和基本原理。通过这份PDF，读者将能够掌握 WebAssembly 的基础知识，并为将来在Web平台上开发高性能应用程序奠定基础。