WebAssembly最详教程

        WebAssembly 是一种新的编码方式，可以在现代的 Web 浏览器中运行——它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C/C++、C# 和 Rust 等语言提供编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。

        它提供了一条使得以各种语言编写的代码都可以接近原生的速度在 Web 中运行的途径，使得以前无法在 Web 上运行的客户端应用程序得以在 Web 上运行，使得我们有可能将桌面应用(如 AutoCAD)甚至电子游戏移植到 Web。

        WebAssembly 被设计为可以和 JavaScript 一起协同工作——通过使用 WebAssembly 的 JavaScript API，你可以把 WebAssembly 模块加载到 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 WebAssembly 的性能和能力以及 JavaScript 的表达力和灵活性，即使你可能并不知道如何编写 WebAssembly 代码。

 JavaScript存在的问题

        JavaScript 是解释型语言，也是动态类型语言。如果变量类型是在运行时决定的，那么就是动态类型语言。对于 JavaScript 中的操作，每次执行程序时，引擎都必须检查它是整数还是浮点数，或者任何其他有效的数据类型。所以 JavaScript 中的每条指令都要经过几次类型检查和转换，这会影响到它的执行速度。

        相对于动态类型语言，还有静态类型语言，C++就是一种静态类型语言，其变量类型是在定义的时候就决定了的。同样的操作通过一条指令，编译器就能知道变量 x 的类型和内存位置。

JavaScript 在运行代码时花费的时间：

WebAssembly 花费的时间： 

 WebAssembly解决的问题

  • 一种新型的代码，可以运行在 Web 浏览器，提供一些新特性并主要专注于高性能
  • 主要不是用于写，而是 C/C++、C#、Rust 等语言编译的目标，所以你即使不知道如何编写 WebAssembly 代码也能利用它的优势
  • 其他语言编写的代码也能以近似于原生速度运行，客户端 App 也能在 Web 上运行
  • 在浏览器或 Node.js 中可以导入 WebAssembly 模块，JS 框架能够使用 WebAssembly 来获得巨大的性能优势和新的特性的同时在功能上易于使用

WebAssembly的优势

  1. 快、高效、便利 -- 通过利用一些通用的硬件能力，能够跨平台以近乎于原生的速度执行
  2. 可读、可调试 -- WebAssembly 是一种低层次的汇编语言，但是它也有一种人类可读的文本格式，使得人们可编写代码、查看代码、可调试代码。
  3. 确保安全 -- WebAssembly 明确运行在安全、沙箱的执行环境，类似其他 Web 的代码，它会强制开启同源和一些权限策略。
  4. 不破坏现有的 Web -- WebAssembly 被设计与其他 Web 技术兼容运行，并且保持向后兼容性。

WebAssembly 如何适应网络平台？

网络平台可以被想象成拥有两个部分：

  • 一个运行网络程序（Web app）代码的虚拟机VM（比如给你的程序提供能力的 JavaScript）
  • 一系列网络程序能够调用API从而控制网络浏览器/设备功能，并且能够让事物发生变化的 Web API（DOM、CSSOM、WebGL、IndexedDB、Web Audio API 等）。

        当试图把 JavaScript 应用到诸如 3D 游戏、虚拟现实、增强现实、计算机视觉、图像/视频编辑以及大量的要求原生性能的其他领域的时候，我们遇到了性能问题

        同时，下载、解析和编译大体积的 JS 应用是很困难的，在一些资源更加受限的平台上，如移动设备等，则会更加放到这种性能瓶颈。

        WebAssembly 是一种与 JavaScript 不同的语言，它不是为了替代 JS 而生的，而是被设计为与 JS 互为补充并能协作，使得 Web 开发者能够重复利用两种语言的优点：

  1. JS 是高层次的语言，灵活且极具表现力，动态类型、不需要编译步骤，并且有强大的生态，非常易于编写 Web 应用。
  2. WebAssembly 是一种低层次、类汇编的语言，使用一种紧凑的二级制格式，能够以近乎原生的性能运行，并提供了低层次的内存模型，是 C++、Rust 等语言的编译目标，使得这类语言编写的代码能够在 Web 上运行（需要注意的是，WebAssembly 将在未来提供垃圾回收的内存模型等高层次的目标）

        随着 WebAssembly 的出现，上述提到的 VM 现在可以加载两种类型的代码执行：JavaScript 和 WebAssembly。

        JavaScript 和 WebAssembly 可以互操作，实际上一份 WebAssembly 代码被称为一个模块，而 WebAssembly 的模块与 ES2015 的模块在具有很多共同的特性。

WebAssembly 关键概念

  • 模块：表示一个已经被浏览器编译为可执行机器码的 WebAssembly 二进制代码。一个模块是无状态的，并且像一个二进制大对象（Blob）一样在 Window 和 Worker 之间进行共享（通过 postMessage() 函数）。一个模块能够像一个 ES 的模块一样声明导入和导出。
  • 内存：一个可变长的 ArrayBuffer。本质上是连续的字节数组，WebAssembly 的低级内存存取指令可以对它进行读写操作。
  • 表格：一个可变长的类型化数组。表格中的项存储了不能作为原始字节存储在内存里的对象的引用（为了安全和可移植性的原因）。
  • 实例：一个模块及其在运行时使用的所有状态，包括内存、表格和一系列导入值。一个实例就像一个已经被加载到一个拥有一组特定导入的特定的全局变量的 ES 模块。

如何在应用里使用 WebAssembly？

        WebAssembly 给 Web 平台添加了两块内容：二进制格式代码，以及一系列可用于加载和执行二进制代码的 API。

  • 使用 EMScripten 来移植 C/C++ 应用
  • 在汇编层面直接编写和生成 WebAssembly 代码
  • 编写 Rust 应用，然后将 WebAssembly 作为它的输出
  • 使用 AssemblyScript，它是一门类似 TypeScript 的语言，能够编译成 WebAssembly 二进制

编译C/C++为WebAssembly

Emscripten 环境安装
git clone https://github.com/juj/emsdk.git
cd emsdk# 在 Windows 上
# 安装依赖项，这个过程比较长，会下载并自动安装node、Java、python等环境包，耐心等待
emsdk install latest
# 激活上一步下载的环境变量临时，一旦关闭cmd窗口，环境变量就失效了。
emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit# 注意：Windows 版本的 Visual Studio 2017 已经被支持，但需要在 emsdk install 需要追加 --vs2017 参数。

        global 标识会让 PATH 变量在全局被设置，所以接下来所打开的终端或者命令行窗口都会被设置。如果你仅仅想让 Emscripten 在当前窗口生效，就删掉这个标识。

        每当你想要使用 Emscripten 时，尝试从远程更新最新的 emscripten 代码是个很好的习惯（运行 git pull）。如果有更新，重新执行 install 和 activate 命令。这样就可以确保你使用的 Emscripten 一直保持最新。

现在让我们进入 emsdk 文件夹

输入以下命令来让你进入接下来的流程

# on Windows
# 把emsdk加到环境变量中，方便后续执行命令
emsdk_env.bat

安装时遇到的问题：

emcc : 无法将“emcc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

重新执行下命令 ./emsdk.bat activate latest --permanent

编译一个样例 C 程序到 asm.js 或者 wasm。

#include <stdio.h>int main(int argc, char ** argv) {printf("Hello World\n");
}

在emsdk文件夹下执行

emcc E:\selfWork\html\hello.c

执行后，会在当前cmd所在目录下生成a.out.js 和 a.out.wasm

编译为html格式的demo文件

emcc E:\selfWork\html\hello.c -o test.html

 将html文件发布到web容器中，或者使用下面命令发布

python -m http.server
# 也可以使用下面的命令，直接打开默认浏览器运行
emrun test.html

也可以转到一个已经配置过 Emscripten 编译环境的终端窗口中，进入刚刚保存 hello.c 文件的文件夹中，然后运行下列命令：

emcc hello.c -s WASM=1 -o hello.html

命令中选项的细节：

  • -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 文件

只生成某个文件

使用 WebAssembly JavaScript API

调用自定义方法

默认情况下，Emscripten 生成的代码只会调用 main() 函数，其他的函数将被视为无用代码。在一个函数名之前添加 EMSCRIPTEN_KEEPALIVE 能够防止这样的事情发生。你需要导入 emscripten.h 库来使用 EMSCRIPTEN_KEEPALIVE。

#include <stdio.h>
#include <emscripten/emscripten.h>int main(int argc, char ** argv) {printf("Hello World\n");
}#ifdef __cplusplus
extern "C" {
#endifint EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {printf("我的函数已被调用\n");
}#ifdef __cplusplus
}
#endif

备注：为了保证万一你想在 C++ 代码中引用这些代码时代码可以正常工作，我们添加了 #ifdef 代码块。由于 C 与 C++ 中名字修饰规则的差异，添加的代码块有可能产生问题，但目前我们设置了这一额外的代码块以保证你使用 C++ 时，这些代码会被视为外部 C 语言函数。

//调用一个定义在 C、C++ 中的自定义方法
const importObject={wasi_snapshot_preview1:{proc_exit:(arg)=>console.log(arg)},
}let funcpp
fetch("WebAssemblyTest2.wasm")
.then((res)=>res.arrayBuffer())
.then((bytes)=>WebAssembly.instantiate(bytes,importObject))
.then((results)=>{console.log(results)funcpp = results.instance.exports._Z3fibi
})

 针对以下函数，WebAssembly对于性能的提升对比

function funj(n){if(n<=1){return n}return funj(n-1)+funj(n-2)
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/399519.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

面试 | Python 自动化测试技术面试真题

面试 | Python 自动化测试技术面试真题

本文为面试某公司测试开发&#xff0f;自动化测试工程师时的面试题笔记。 全部笔试内容没有全部写全&#xff0c;只贴通用性的技术相关的笔试面试题&#xff0c;至于测试理论和团队管理的问题&#xff0c;都是大同小异&#xff0c;也没什么实际的参考价值。 1.直接手写一个 P…
阅读更多...
AWS云服务器选择最佳区域

AWS云服务器选择最佳区域

2024年&#xff0c;随着全球云计算的持续发展和AWS在全球不断扩展的数据中心网络&#xff0c;选择合适的AWS云服务器区域成为了企业和开发者需要认真考虑的问题。九河云告诉你在做出选择之前&#xff0c;需要考虑以哪些关键因素&#xff1a; 地理位置和用户分布 选择AWS云服务…
阅读更多...
ZAN与Mysten Labs合作推进Web3基础设施开发

ZAN与Mysten Labs合作推进Web3基础设施开发

Mysten Labs是一家Web3基础设施公司&#xff0c;也是Sui区块链的开发公司&#xff0c;今天宣布与蚂蚁数字科技的技术品牌ZAN建立合作伙伴关系。 通过整合Sui&#xff0c;ZAN旨在加速其Web3应用程序的开发和采用。该合作将专注于为Mysten Labs在两个关键领域提供技术支持&#…
阅读更多...
分班查询一键发布，老师们都在用

分班查询一键发布，老师们都在用

新学期的钟声即将敲响&#xff0c;校园里又将迎来一批充满好奇和期待的新生。对于老师们来说&#xff0c;这不仅仅是一个新起点&#xff0c;更是一项挑战——如何高效而准确地将新生的分班信息传达给每一位家长。传统的方法是通过私信逐一发送&#xff0c;这不仅耗时耗力&#…
阅读更多...
opencv-python图像增强二：图像去雾（暗通道去雾）

opencv-python图像增强二：图像去雾（暗通道去雾）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、简介&#xff1a;二、暗通道去雾方案简述&#xff1a;三、算法实现步骤3.1最小值滤波3.2 引导滤波3.3 计算图像全局光强 四&#xff1a;整体代码实现五&#xf…
阅读更多...
加密软件有哪些常见的安全特性

加密软件有哪些常见的安全特性

1. 数据加密 核心功能&#xff1a;加密软件的核心在于对数据进行加密处理&#xff0c;通过复杂的加密算法&#xff08;如AES、RSA等&#xff09;将明文数据转换为密文&#xff0c;确保数据在存储和传输过程中的安全性。 透明加密&#xff1a;部分加密软件支持透明加密功能&am…
阅读更多...
代码+视频，R语言VRPM绘制多种模型的彩色列线图

代码+视频，R语言VRPM绘制多种模型的彩色列线图

列线图&#xff0c;又称诺莫图&#xff08;Nomogram&#xff09;&#xff0c;它是建立在回归分析的基础上&#xff0c;使用多个临床指标或者生物属性&#xff0c;然后采用带有分数高低的线段&#xff0c;从而达到设置的目的&#xff1a;基于多个变量的值预测一定的临床结局或者…
阅读更多...
排队免单小程序

排队免单小程序

本文来自&#xff1a;排队免单小程序 - 源码1688 应用介绍 排队免单小程序是基于移动互联网技术开发的平台系统&#xff0c;通过小程序的形式为消费者和商家搭建了一个互动桥梁。以下是对排队免单小程序的详细介绍&#xff1a; 一、基本概念 排队免单小程序是一种创新的营销工…
阅读更多...
拯救打工人的4款可ai生成ppt神器大PK，谁是加班狗的最爱？

拯救打工人的4款可ai生成ppt神器大PK，谁是加班狗的最爱？

在忙碌的工作日常里&#xff0c;做PPT常常让不少上班族头疼。晚上加班时&#xff0c;办公室里总能看到那些为了做出完美PPT而熬夜的人。不过现在好了&#xff0c;科技进步带来了好消息&#xff0c;有几款AI生成PPT的神器出现了&#xff0c;今天&#xff0c;咱们就来比一比&…
阅读更多...
c++41两头堵模型

c++41两头堵模型

直接拷到自己的内存空间 字符串反转 递归&#xff1a;参数的入栈模型 函数的调用模型 先被调用的模型后执行 向局部变量拷贝内存 传两个参数 做函数结果
阅读更多...
华为od统一考试B卷【AI面板识别】python实现

华为od统一考试B卷【AI面板识别】python实现

思路 n int(input())class Light:def __init__(self, id, x1, y1, x2, y2):self.id idself.x1 x1self.y1 y1self.x2 x2self.y2 y2self.height y2 - y1def get_lights_info(n):lights []for _ in range(n):id, x1, y1, x2, y2 map(int, input().strip().split())lights…
阅读更多...
乡村振兴旅游休闲景观解决方案

乡村振兴旅游休闲景观解决方案

乡村振兴旅游休闲景观解决方案摘要 2. 规划方案概览 规划核心&#xff1a;PPT展示了乡村振兴建设规划的核心区平面图及鸟瞰图&#xff0c;涵盖景观小品、设施农业、自行车道、新社区等设计元素。 规划策略&#xff1a;方案注重打造大开大合的空间感受&#xff0c;特色农产大观…
阅读更多...
安全测试中的权限测试

安全测试中的权限测试

安全测试中的权限测试&#xff08;或称为访问控制测试&#xff09;是一个关键的组成部分&#xff0c;它确保系统正确地实施了访问控制策略&#xff0c;防止未授权的用户或进程访问敏感信息和功能。 身份验证&#xff1a; 测试系统是否要求用户提供凭据&#xff08;如用户名和密…
阅读更多...
负载均衡、高可用

负载均衡、高可用

负载均衡 负载均衡&#xff08;Load Balance&#xff09;&#xff1a;可以利用多个计算机和组合进行海量请求处理&#xff0c;从而获得很高的处理效率&#xff0c;也可以用多个计算机做备份&#xff08;高可用&#xff09;&#xff0c;使得任何一个机器坏了整个系统还是能正常…
阅读更多...
2024靠谱的网站建设公司推荐

2024靠谱的网站建设公司推荐

在现在的互联网社会&#xff0c;一个企业的网站往往是潜在客户对该品牌的第一印象来源。也正因如此&#xff0c;选择一个靠谱的网站建设公司对于确保企业在线形象和功能性至关重要&#xff0c;作为建站行业从业人员&#xff0c;我分享几个选择网站建设公司时应考虑的几个关键因…
阅读更多...
react+taro的文字粘贴识别功能

react+taro的文字粘贴识别功能

效果图 <View className"components-page"><Textareastyle"font-size:12PX"className"textareaStyle"placeholderClass"placeholderStyle"placeholder"例&#xff1a;公司&#xff1a;xxxx公司, 电话:13*********, 地址…
阅读更多...
来电、消息提醒延时很久，该如何解决

来电、消息提醒延时很久，该如何解决

使用华为穿戴设备且同时使用三方安卓手机的朋友们&#xff0c;是否发现自己的华为手表经常接不到电话&#xff0c;接到消息提醒也是延时很久&#xff1f;不是手表有问题&#xff0c;而是因为三方安卓手机系统管控华为运动健康App&#xff0c;导致推动来电和消息有延迟。 若您使…
阅读更多...
【区块链+食品安全】海南省市场监管局：进口冷链食品可信追溯平台 | FISCO BCOS应用案例

【区块链+食品安全】海南省市场监管局：进口冷链食品可信追溯平台 | FISCO BCOS应用案例

2020 年 10 月&#xff0c;海南省市场监管局联合腾讯基于 FISCO BCOS 区块链底层技术建设“海南省进口冷链食品可信追 溯平台”( 简称“海南冷链”)&#xff0c;在全国范围内首批实现了与市场监管总局数据对接。平台以冷 ( 冻 ) 库为抓手&#xff0c;从 进口冷链食品进入海南省…
阅读更多...
【网站项目】SpringBoot749乡村日常政务管理系统

【网站项目】SpringBoot749乡村日常政务管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
C语言--实用调试技巧

C语言--实用调试技巧

目录 一.调试是什么&#xff1f; 1.1 什么是调试 1.2调试的基本步骤 1.3.Debug和Release 二.Windows环境下的调试 2.1 调试环境的准备 2.2 调试的快捷键 3.3 调试的时候查看程序当前信息 3.3.1 查看临时变量的值 3.3.2 查看内存信息 3.3.3 查看调用堆栈 3.3.4 查看…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发