WebAssembly照亮了 Web端软件的未来

WebAssembly的发展历程相对较短，但影响深远。WebAssembly 于 2015 年首次发布，先驱技术是来自Mozilla的asm.js和Google Native Client，最初的实现是基于asm.js的功能集。自2017年3月由WebAssembly创造的MVP的预览版发布以来，WebAssembly发展迅速，目前已经部署到了所有主流浏览器。到了2019年，WebAssembly 1.0成为了W3C推荐的标准，这打破了之前仅用JavaScript来进行Web开发的局面。那么什么是WebAssembly? 这篇文章让你从多方面了解WebAssembly这一技术。

WebAssembly是什么？

WebAssembly（简称Wasm）是一种新型的、可以在现代Web浏览器中运行的代码。这是一种低级类汇编语言，其二进制格式紧凑，为诸如 C、C++和 Rust 等低级源语言提供一个高效的编译目标，以便它们可以在Web上运行。开发者通过自选语言编写代码，然后将其编译为WebAssembly字节码进行运行。字节码在客户端（通常是Web浏览器）上运行，在那里它被编译为可执行机器码并以接近原生的速度执行。

由于Wasm提供给浏览器的是以二进制格式编译的代码，节省了下载和解析JavaScript代码时间，使代码执行效率更高。此外，WASM提供了开发者手动管理内存的选项，以及可以直接访问内存的特性，从而提升了运行效率。WebAssembly不仅具有高效的解析和执行能力，还有着硬件和操作系统无关的低级虚拟机模型，提供了安全的运行环境。当前，WASM可以兼容主流的Web浏览器，例如Chrome、Edge、Firefox、Opera和Safari。

WASM被设计为与JavaScript协同工作，以此实现Web平台上的高性能应用。综合来看，WASM在Web平台上表现出近乎原生的开发速度，充分凸显了WebAssembly的性能与功能，以及JavaScript的表现力与灵活性，使得客户端应用可以轻松地在Web上运行。

WebAssembly的关键原理

在了解如何编译C语言为WASM的步骤之前，你需要先了解几个关键原理。

模块（Module）： 表示一个已经被浏览器编译为可执行机器码的 WebAssembly 二进制代码。模块中包含一系列的函数和数据（例如，全局变量和初始化的内存）。模块是无状态的，能够像ES2015 的模块一样声明导入和导出。

内存（Memory）： WebAssembly使用一种名为线性内存的数据结构来表示内存。线性内存是一个连续的字节块，其大小总是一页（64 KiB）的倍数。WebAssembly代码可以直接读取和写入这些字节。

表格（Table）： 可调整大小的类似于数组的结构，包含引用（例如函数），出于安全和可移植性考虑，这些引用不能以原始字节形式存储在内存中。

实例（Instance）： 一个已经与运行时使用的所有状态配对的模块，包括内存、表和导入值集。一个实例就像一个 ES 模块，它被加载到一个特定的整体中，并带有一组特定的导入值。

一个WebAssembly模块定义了一系列的函数、全局变量、内存和表格，它们通过与特定的导入和导出的值结合，可以被实例化为一个运行的应用。而内存和表格也可以被实例化为运行的应用，它们的值随着应用的执行而改变。

编译C/C++为Wasm的操作步骤

在示例如何用C语言编译为 Wasm之前，你需要满足一个前提条件 —— 获取 Emscripten SDK来配置安装环境。使用 Emscripten 编译主要适用于两个场景，下面分别来了解一下具体的操作步骤。

创建 HTML 和 JavaScript

你可以用 C 语言编写一个程序，使用 Emscripten SDK 将该程序编译成 WebAssembly，然后创建一个 HTML 文件，在网络服务器上加载并运行 WebAssembly 代码。

  1. 首先我们需要一个例子来编译。复制以下简单的 C 示例，并将其保存在本地目录并命名为 hello.c 的文件中：
#include <stdio.h>int main() {printf("Hello World\n");return 0;
}
  1. 现在，使用进入 Emscripten 编译器环境时使用的终端窗口，导航到与 hello.c 文件相同的目录，然后运行以下命令：
emcc hello.c -o hello.html
  1. 我们通过命令传递的选项如下：

-o hello.html —— 这指定我们希望Emscripten生成一个HTML页面来运行我们的代码（以及要使用的文件名），以及Wasm模块和JavaScript粘合代码来编译和实例化Wasm，使其可以在Web环境中使用。

  1. 在这个时候，你的源代码目录中应该有：
  • 二进制的Wasm模块代码（hello.wasm）
  • 一个包含粘合代码的JavaScript文件，用于在原生C函数和JavaScript/Wasm之间进行转换（hello.js）
  • 一个HTML文件，用于加载、编译和实例化你的Wasm代码，并在浏览器中显示其输出（hello.html）
  1. 现在，在支持 WebAssembly 的浏览器中加载生成的hello.html来运行示例。Firefox 52、Chrome 57、Edge 57 和 Opera 44 默认启用了 WebAssembly。
  2. 如果运行顺利，您应该会在网页上以及浏览器的 JavaScript 控制台上看到 Emscripten 控制台中的"Hello world"输出。

使用自定义 HTML 模板

  1. 首先，在新目录中，将以下 C 代码保存在名为hello2.c的文件中：
#include <stdio.h>int main() {printf("Hello World\n");return 0;
}
  1. 在 emsdk 存储库中搜索文档shell_minimal.html。将其复制到之前新目录中名为html_template的子目录中。
  2. 现在导航到您的新目录（同样，在您的 Emscripten 编译器环境终端窗口中），并运行以下命令：
emcc -o hello2.html hello2.c -O3 --shell-file html_template/shell_minimal.html
  1. 这次我们传递的选项略有不同：
  • 我们已经指定了-o hello2.html，这意味着编译器仍将输出 JavaScript 粘合代码 和.html。
  • 我们指定了-O3，用于优化代码。Emcc 与任何其他 C 编译器一样具有优化级别，包括：（-O0无优化）、-O1、-O2、-Os、-Oz、-Og和-O3。-O3是发布版本的良好设置。
  • 我们还指定了--shell-file html_template/shell_minimal.html —— 这提供了您要用来创建将运行示例的 HTML 的 HTML 模板的路径。
  1. 现在让我们运行这个例子。上面的命令将生成hello2.html，其内容与模板大致相同，并添加了一些粘合代码来加载生成的 Wasm、运行它等。在浏览器中打开它，您将看到与上一个示例大致相同的输出。

调用 C 语言定义的自定义函数

如果你在 C 代码中定义了一个函数，而又想根据需要从 JavaScript 中调用该函数，那么您可以使用Emscripten ccall()函数和EMSCRIPTEN_KEEPALIVE声明（该声明会将您的函数添加到导出函数列表中）来实现这一目的。

  1. 首先，在新目录中将以下代码保存为hello3.c.默认情况下，Emscripten 生成的代码只会调用 main() 函数，其他的函数将被视为无用代码。在一个函数名之前添加 EMSCRIPTEN_KEEPALIVE 能够防止这样的事情发生。你需要导入 emscripten.h 库来使用 EMSCRIPTEN_KEEPALIVE。
#include <stdio.h>
#include <emscripten/emscripten.h>int main() {printf("Hello World\n");return 0;
}#ifdef __cplusplus
#define EXTERN extern "C"
#else
#define EXTERN
#endifEXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char ** argv) {printf("MyFunction Called\n");
}
  1. 现在，为了方便起见，将包含 {{{ SCRIPT }}} 内容的 html_template/shell_minimal.html 也添加到这个新目录中（在实际开发环境中，显然应将其放在中心位置）。
  2. 现在让我们再次运行编译步骤。在最新目录下（在 Emscripten 编译器环境的终端窗口中），用以下命令编译 C 代码。请注意，我们需要使用 NO_EXIT_RUNTIME 进行编译：否则，当 main() 退出时，运行时将被关闭，并且调用编译后的代码将无效。这对于正确的 C 语言模拟来说非常必要：例如，确保调用 atexit() 函数。
emcc -o hello3.html hello3.c --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"
  1. 如果你在浏览器中在此加载实例，你将看到和之前相同的结果。
  2. 现在我们需要运行新的 myFunction() JavaScript 函数。首先，在文本编辑器中打开hello3.html文档。
  3. 添加一个<button>元素，如下所示，就在第一个 <script type='text/javascript'> 开始标签的上方。
<button id="mybutton">Run myFunction</button>
  1. 现在在第一个 <script> 元素末尾添加以下代码：
document.getElementById("mybutton").addEventListener("click", () => {alert("check console");const result = Module.ccall("myFunction", // name of C functionnull, // return typenull, // argument typesnull, // arguments);
});

结尾

目前，WebAssembly已经逐渐被用在很多Web应用中，包括复杂的图形处理和游戏开发，AI和机器学习，音频和视频处理等等。随着技术的发展，WebAssembly的应用领域和影响力将会越来越大。

我们最近发布的ComPDFKit Web Demo应用了最新的WebAssembly技术，为用户提供一个纯前端的方案，即在客户端上运行，而无需依赖Server端处理PDF文档。使用这个方案，你的PDF渲染速度更快，并且在不同平台渲染的效果一致。欢迎联系我们获取更多信息并试用我们的Demo.

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

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

相关文章

AMEYA360：村田首款1608M尺寸/100V静电容量1µF的MLCC实现商品化

AMEYA360：村田首款1608M尺寸/100V静电容量1µF的MLCC实现商品化

株式会社村田制作所成功开发了用于基站、服务器和数据中心48V线路的多层陶瓷电容器“GRM188D72A105KE01”并已量产。该产品在1608M(1.60.8mm)尺寸、100V的额定电压下可实现1μF的超大静电容量(村田调查数据&#xff0c;截至2023年11月20日)。目前可向村田申请免费样品。 随着5G…
阅读更多...
【Java】 Shell 重启 SpringBoot 项目脚本（含服务守护）

【Java】 Shell 重启 SpringBoot 项目脚本（含服务守护）

简介 本文介绍了如何使用 Bash 脚本来管理和守护运行服务。将展示一个示例脚本&#xff0c;该脚本可以停止、启动和守护运行一个服务&#xff0c;并提供了相应的解释和用法说明。 引 在实际的软件开发和部署过程中&#xff0c;经常需要使用脚本来管理和控制服务的运行。这些…
阅读更多...
NOIP2015提高组第二轮T1：能量项链

NOIP2015提高组第二轮T1：能量项链

题目链接 [NOIP2006 提高组] 能量项链 题目描述 在 Mars 星球上&#xff0c;每个 Mars 人都随身佩带着一串能量项链。在项链上有 N N N 颗能量珠。能量珠是一颗有头标记与尾标记的珠子&#xff0c;这些标记对应着某个正整数。并且&#xff0c;对于相邻的两颗珠子&#xff0…
阅读更多...
网络和Linux网络_4(应用层)序列化和反序列化(网络计算器)

网络和Linux网络_4(应用层)序列化和反序列化(网络计算器)

目录 1. 重新理解协议 2. 网络版本计算器 2.1 前期封装 Log.hpp sock.hpp TcpServer.hpp 第一次测试(链接) 2.2 计算器实现 第二次测试(序列化和反序列化) 第三次测试(客户端字节流) CalServer.cc CalClient.cc 3. 守护进程 3.1 守护进程和前后台进程 3.1 变成…
阅读更多...
数组扩展方法（一）

数组扩展方法（一）

Array.prototype.forEach MDN解释forEach()方法是对数组的每个元素执行一个给定的函数&#xff0c;换句话来说就是在调用forEach()方法的时候&#xff0c;需要传入一个回调函数callback&#xff0c;循环每个数组内部元素时都会执行一次传入的回调函数callback forEach()方法的…
阅读更多...
有哪些免费好用的API接口，一文告诉你

有哪些免费好用的API接口，一文告诉你

实名认证&#xff08;身份证二要素&#xff09;&#xff1a;核验身份证二要素&#xff08;姓名和身份证号码&#xff09;信息是否一致。 实人认证&#xff08;人像三要素&#xff09;&#xff1a;输入姓名、身份证号码和一张人脸照片&#xff0c;与公安库身份证头像进行权威比…
阅读更多...
AUTOSAR实战篇：基于ETAS工具链的信息安全协议栈集成指南

AUTOSAR实战篇：基于ETAS工具链的信息安全协议栈集成指南

AUTOSAR实战: 基于ETAS工具链的信息安全协议栈集成指南 前言 小T出品，必是精品！ 手把手带你集成信息安全协议栈，你值得拥有! 正文 随着汽车信息安全的不断发展与完善，其在汽车电子领域如智能驾驶(ADAS)，智能座舱等方向上不断被重视起来，越来越多的Tier1，主机厂都在全面…
阅读更多...
开发一款抖音小游戏大致的研发成本是多少

开发一款抖音小游戏大致的研发成本是多少

抖音小游戏开发成本的影响因素较多&#xff0c;包括开发团队规模、技术选型、功能复杂度、测试成本、运营成本等等。因此&#xff0c;具体的成本需要根据你的项目需求和规模来确定。一般来说&#xff0c;小游戏开发成本大致可以分为人力成本和设备成本两部分。 人力成本主要取…
阅读更多...
LeetCode算法心得——爬楼梯（记忆化搜索+dp）

LeetCode算法心得——爬楼梯（记忆化搜索+dp）

大家好&#xff0c;我是晴天学长&#xff0c;第二个记忆化搜索练习&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1&#xff09;爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或…
阅读更多...
Redis主从复制，哨兵和Cluster集群

Redis主从复制，哨兵和Cluster集群

主从复制&#xff1a; 主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制基础上实现高可用的。主从复制主要实现了数据的多机备份&#xff08;和同步&#xff09;&#xff0c;以及对于读操作的负载均衡和简单的故障恢复。 缺陷&#xff1a;故障恢复无法自动化…
阅读更多...
C# ReadOnlyRef Out

C# ReadOnlyRef Out

C# ReadOnly ReadOnly先看两种情况1.值类型2.引用类型 结论 Ref Out ReadOnly官方文档 ReadOnly 先看两种情况 1.值类型 当数据是值类型时&#xff0c;标记为Readonly时&#xff0c;如果再次设置值&#xff0c;会提示报错&#xff0c;无法分配到只读字段 public class A {pri…
阅读更多...
Vue中Vue router和axios的封装使用。

Vue中Vue router和axios的封装使用。

模拟场景&#xff1a; 当用户登录后&#xff0c;后台会返回一个token给前端&#xff0c;前端下次进入首页后&#xff0c;会先判断token是否过期&#xff0c;如果过期自动进入登录页面。配置路由&#xff1a; 1.安装 npm install vue-router42.安装后在src目录下创建router文…
阅读更多...
基于Springboot的美容院管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的美容院管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的美容院管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&a…
阅读更多...
qt treeview 删除节点

qt treeview 删除节点

Qt 中&#xff0c;要删除 QTreeView 中的节点&#xff0c;可以通过操作其模型&#xff08;QAbstractItemModel&#xff09;来实现。以下是一个简单的示例&#xff0c;展示如何从 QTreeView 中删除节点。 假设你有一个 QTreeView&#xff0c;它使用了 QStandardItemModel 作为模…
阅读更多...
Redis(事务和持久化)（很重要！）

Redis(事务和持久化)（很重要！）

事务的定义&#xff1a; Redis中的事务是指一组命令的集合&#xff0c;这些命令可以在一个原子操作中执行。在Redis中&#xff0c;可以使用MULTI命令开始一个事务&#xff0c;然后使用EXEC命令来执行事务中的所有命令&#xff0c;或者使用DISCARD命令来取消事务。事务可以确保…
阅读更多...
爬取春秋航空航班信息

爬取春秋航空航班信息

一、使用fiddler爬取小程序春秋航空航班信息 使用Fiddler爬取春秋航空微信小程序&#xff08;手机上由于网络问题&#xff0c;无法进入&#xff0c;使用电脑版&#xff09; 搜索航班信息 搜索记录 使用Fiddler查找url(没有得到有效url) 继续查找&#xff0c;发现航班信息列…
阅读更多...
数据结构：二叉树（初阶）

数据结构：二叉树（初阶）

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下二叉树方面的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 …
阅读更多...
振南技术干货集：制冷设备大型IoT监测项目研发纪实（3）

振南技术干货集：制冷设备大型IoT监测项目研发纪实（3）

注解目录 1.制冷设备的监测迫在眉睫 1.1 冷食的利润贡献 1.2 冷设监测系统的困难 &#xff08;制冷设备对于便利店为何如何重要&#xff1f;了解一下你所不知道的便利店和新零售行业。关 于电力线载波通信的论战。&#xff09; 2、电路设计 2.1 防护电路 2.1.1 强电防护…
阅读更多...
vue 中为什么需要虚拟DOM、VDOM 是如何生成的、VDOM 如何做 diff 的?

vue 中为什么需要虚拟DOM、VDOM 是如何生成的、VDOM 如何做 diff 的?

一、vue 中为什么需要虚拟DOM 1.1本概念 基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象&#xff0c;也就是现在大家所熟知的VNode 和VDOM Virtual DOM 就是用js 对象来描述真实 DOM&#xff0c;是对真实 DOM 的抽象&#xff0c;由于直接操作 DOM 性能低但是is 层的操…
阅读更多...
Jmeter执行某个请求时，先删除cookie信息

Jmeter执行某个请求时，先删除cookie信息

1、增加BeanShell PreProcessor 2、添加如下内容 import org.apache.jmeter.protocol.http.control.CookieManager;// Get the current threads cookie manager CookieManager cm sampler.getCookieManager();// Clear all cookies for this domain cm.clear();
阅读更多...
最新文章

Copyright @ 2022~2023