WebAssembly 基本了解

现代浏览器朝着第二操作系统一路狂奔，网页在线 PS、3D 地图、音视频编解码、游戏引擎等等应用，都在浏览器实现了，这都是基于 WebAssembly。

什么是 WebAssembly

WebAssembly 也简称 wasm，是以.wasm 结尾的文件。我们都知道，在机器的世界，最终运行的都是 0101 这样的二进制文件，而 WebAssembly 是被编译成二进制的文件。WebAssembly 并不是一门语言，而是一个编译的目标，好比我们用 vite、gulp、rollup、webpack 等打包成最终的产物，WebAssembly 是把其它编程语言编译成二进制文件，从而可以运行在浏览器上，实现更复杂的应用。

起源

说起 WebAssembly 不得不提起 Mozilla，一个非营利性的开源组织，致力于推动开放式网络和互联网技术的发展，Rust、HTML5、MDN、asm.js 等互联网行业基石都是这家公司的产物，前身是网景公司（Netscape Communications Corporation）。

当初 Emscripten 项目的创造者 Alon Zakai 开始研究将 C/C++ 代码编译为 JavaScript 的想法时，他的初衷并不是为了在 Web 浏览器中运行高性能代码。实际上，他的目标是为了在 Node.js 环境中运行 C/C++ 代码。

然而，当 Alon Zakai 开始探索将 C/C++ 代码转换为 JavaScript 的方法时，他发现 JavaScript 引擎在 JIT（即时编译）时的优化能力非常出色。这让他想到，如果能够通过一种方式将 C/C++ 代码转换为符合特定规范的 JavaScript，那么 JavaScript 引擎就可以通过 JIT 编译来优化和加速这些代码的执行。

于是，Alon Zakai 开始着手开发 Emscripten，并提出了 asm.js 这种低级子集 JavaScript 的概念。他利用 LLVM 编译器作为后端，将 C/C++ 代码编译为符合 asm.js 规范的 JavaScript。

asm.js 可以说是 WebAssembly 的前世，Emscripten 官网有介绍：
Compile C and C++ code, or any other language that uses LLVM, into WebAssembly, and run it on the Web, Node.js, or other Wasm runtimes.

除了 C C++，其它只要是能使用 LLVM 的都能编译成 WebAssembly。

JavaScript 在运行过程中，需要编译成引擎能够直接执行的字节码，在此过程会对执行次数较多的代码进行优化，下次再次执行的时候直接使用上一次编译完成的字节码，但由于 JavaScript 本身是弱类型语言，上次是 string，下一次可能就是 boolean 了，上一次的优化也就失效了，又得重新编译执行，在效率方面肯定就会低一些。于是 asm.js 出现了。

asm.js 会强制静态类型，所以会比原生 JavaScript 更快一些，这个快要根据实际场景，我们说的是在正常的普遍的时候，不以极端场景来说。当然，asm.js 更重要的是让 C 和 C++等语言也可以运行在浏览器上。

WebAssembly 诞生与优势

asm.js 的思想是一个语言编译成另一个语言，输出的还是 JavaScript，不过强制了静态类型，还是需要经过编译。于是，跳过编译可以直接运行的 WebAssembly 就诞生了，WebAssembly 是浏览器可以识别的更底层的语言。WebAssembly 不是具体的开发语言，而是各个语言编译成 WebAssembly，然后运行在浏览器内置的 wasm 虚拟机中，除了运行在浏览器，WebAssembly 也能运行在很多地方，是一种新的二进制指令集格式，它是一种可移植、高性能的代码格式，对于很多语言来说都是支持运行的。

WebAssembly 提议于 2015 年推出，早期版本于 2017 年推出，在 2019 年 12 月 5 日成为 Web 标准。现在的浏览器几乎都兼容 WebAssembly。

WebAssembly 主要有几点优势

  • 体积更小：WebAssembly 的二进制格式在被精心设计之后可以比 gzip 压缩后的 JavaScript 代码小 10-20%左右。

  • 高性能：WebAssembly 得益于其二进制的格式，可以通过即时编译器（JIT）或预编译器进行优化，从而提供更高的执行速度和更低的延迟解析速度，比 JavaScript 快了一个量级，还可以在多核 CPU 上进行并行解析

  • 跨平台，Wasm 是一种与平台无关的代码格式，可以在不同的 Web 浏览器和操作系统上运行。这意味着开发人员可以使用不同的编程语言（如 C/C++、Rust 等）编写代码，并将其编译为 Wasm，然后在不同的平台上部署和运行，无需重新编写或适配代码。这提供了更大的灵活性和可移植性

  • 安全性：由于 Wasm 的执行是在沙箱环境中进行的，它具有更高的安全性。Wasm 代码受到严格的安全限制，只能访问特定的资源和 API，并且与宿主环境（如浏览器）之间有明确定义的接口。这限制了恶意代码对系统的潜在危害，从而提供了更好的安全性

  • 生态系统支持：Wasm 在 Web 开发社区中得到了广泛的支持和采用。已经有许多工具、编辑器、框架和库提供了对 Wasm 的支持和集成，使开发人员能够更方便地开发、调试和优化 Wasm 代码。

WebAssembly 在性能方面只是最基本的，更大的作用体现在给 web 提供了更大的可能和发展，不仅是 C++、RUST（编译优化程度会更高），PHP、GO、Python 等也都能实现。

WASI

需要明确的是，WebAssembly 的宏图绝不是只运行在浏览器，脱离了浏览器后，运行在各个操作系统中只需要抹平系统 api 的差异性，WASI 就诞生了。

WASI（WebAssembly System Interface）是一个开放标准，旨在为 WebAssembly 提供一个通用的系统接口，使其能够在各种计算平台和操作系统上运行。WASI 的目标是提供一套标准的 API，使 WebAssembly 模块能够访问底层系统资源和功能，例如文件系统、网络、进程管理等。

WASI 的设计初衷是为了解决 WebAssembly 在不同平台上的兼容性和可移植性问题。通过提供统一的系统接口，WASI 使得开发者可以编写与特定操作系统无关的 WebAssembly 模块，从而实现跨平台的部署和执行。

WASI 的工作原理是通过与底层操作系统进行交互，将 WebAssembly 模块的系统调用映射到相应的底层系统调用。这样，WebAssembly 模块就可以在不同操作系统上以相同的方式访问系统资源，而无需关心底层操作系统的细节和差异。

WASI 是由多个技术组织和公司共同推动和开发的，包括 Mozilla、Fastly、Google 等。WASI 标准的开发和演进是一个开放的过程，任何人都可以参与其中。

通过 WASI，WebAssembly 的应用场景得到了扩展，使得开发者可以更轻松地将 WebAssembly 模块应用于更广泛的领域，包括服务器端应用、嵌入式系统、边缘计算等。

只是相对来说，各个语言对于常用的场景来说，性能限制都不会像 web 限制那么大，所以 Java 能实现的，PHP 大部分也能实现，就不太需要那么多通过编译出 WebAssembly 然后到 PHP 运行实现。

Emscripten

我们一直说 WebAssembly 不是一门语言，开发者并不需要去手动敲一行一行的 WebAssembly，大部分都是使用 Emscripten 进行编译，Emscripten 说是 WebAssembly 的灵魂工具不为过，WebAssembly 的前身都是因为 Emscripten 而诞生。

Emscripten 是一个开源工具链，用于将 C 和 C++等编程语言的代码编译为 WebAssembly（Wasm）和 JavaScript，使其能够在 Web 浏览器中运行。它是使用 LLVM 编译器框架构建的，可以将 C/C++代码转换为高效且可移植的 WebAssembly 字节码。

Emscripten 已经被广泛应用于各种领域，包括游戏开发、图形渲染、数据可视化等。许多知名的项目和游戏，如 Unity、Unreal Engine、Google Earth 等，都使用 Emscripten 将其代码转换为 WebAssembly，以实现在 Web 浏览器中运行。

在 web 端的应用

  • Google Earth，需要展示很多 3D 的图像，对性能要求非常高，最早只能是下载桌面版，现在在浏览器就能直接使用Earth

  • AutoCAD，AutoCAD 是用 C++实现的，WebAssembly 出现之后，AutoCAD 得以利用编译器，将其沉淀了 30 多年的代码直接编译成 WebAssembly，同时性能基于之前的普通 Web 应用得到了很大的提升

  • Unity 和 Unreal 游戏引擎，目前所有版本的 unity 以及 Unreal4.18 之前版本的 UE，都支持将游戏内容打包发布到 web 端。之后的版本不支持，就不知道为什么了。

  • FFmpeg-音视频处理，这个可能是大部分知道 WebAssembly 的在 web 端应用非常广的一个应用了。ffmpeg.wasm，太多的应用都是在这个的基础上套了一个 UI。

  • Adobe Photoshop Web 版，WebAssembly 解决了很多性能问题，更重要的是 Photeshop 的 web 端和 PC 端应用可以由同一份源码编译生成，对于简单的需求，肯定是不希望安装 Adobe Photoshop（对于我来说，安装或者破解都要好一番折腾）。

其实还有很多很有名的应用都在 web 上实现了，很大程度也都是基于 WebAssembly，比如 SketchUp、AutoDesk Fusion 360、Microsoft Office、Figma-设计工具、Zoom-在线会议等等。

WebAssembly 的意义

WebAssembly 给了 web 更好的性能，给了 web 更多的可能，把更多 Desktop 的应用搬到 web 上，改变了 Web 应用的发展方式和能力，提供了更高性能、跨平台、多语言支持和更安全的 Web 开发体验。它使得开发者能够在 Web 平台上构建更强大、复杂和创新的应用，同时为用户提供更好的使用体验。

只是可惜的一点是，有很多应用能够在 web 实现，WebAssembly 是其中一个重要的点，但是 webGL 渲染器的改进却是更重要的一点，虽然目前很大很大的场景并不需要 WebAssembly，但是不能否认 WebAssembly 会在未来扮演很重要的角色。

我会想要了解 WebAssembly，是因为业务扫码遇见了问题，使用 zxing 扫码的时候，如果码贴近标签的边缘，贴在深色的物品上面，会无法解析。通过拍照生成图片去解析，把生成的图片黑白通过 rgb 转换，都不能解决。最后是我们的 leader 用 Java 版本写了接口试了一下可以了，然后就使用 Java 版本生成的 wasm 实现了。

我第一次知道 WebAssembly 的时候，也觉得是不是未来的风向标，是不是一定要去学一下，后面觉得吹的有点过头了，其实目的就是营销，对于前端来说，只需要找到 wasm 文件，找到文档，使用它，目前我是觉得不需要去学习。

文章里面用了蛮多chatgpt搜索出来的东西，也是最近才发现，3.5的已经不限制账号了，连地区也不限制了，不用登录都能直接用：https://chat.openai.com/

欢迎关注订阅号 coding个人笔记

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

02节-51单片机-LED模块

02节-51单片机-LED模块

文章目录 1.点亮一个LED灯2.LED闪烁3.LED流水灯 1.点亮一个LED灯 #include <REGX52.H> void main() {P20xFE; //1111 1110while(1){} }2.LED闪烁 增加延时&#xff0c;控制LED的亮灭间隙 延时函数的添加依靠STC-ISP软件的延时函数功能代码自动生成&#xff0c;如图 #i…
阅读更多...
递归 python

递归 python

↵一、简单理解 解决问题的一种方法&#xff0c;它将问题不断的分成更小的子问题&#xff0c;直到子问题可以用普通的方法解决。通常情况下&#xff0c;递归会使用一个不停调用自己的函数。 【注】&#xff1a;每一次递归调用都是在解决一个更小的问题&#xff0c;如此进行下…
阅读更多...
数据库管理-第171期 Oracle是用这种方式确保读一致的（20240418）

数据库管理-第171期 Oracle是用这种方式确保读一致的（20240418）

数据库管理171期 2024-04-18 数据库管理-第171期 Oracle是用这种方式确保读一致的&#xff08;20240418&#xff09;1 基本概念2 用处3 注意事项总结 数据库管理-第171期 Oracle是用这种方式确保读一致的&#xff08;20240418&#xff09; 作者&#xff1a;胖头鱼的鱼缸&#x…
阅读更多...
Docker文档阅读笔记-How to Run GUI Based Applications inside Docker?

Docker文档阅读笔记-How to Run GUI Based Applications inside Docker?

以后的文档阅读笔记不在一一介绍。以后只总结干货和重点。 Step 1 使用Systemctl命令启动docker服务&#xff1a; systemctl start docker // to start the docker service. systemctl status docker // to check the status . systemctl restart docke…
阅读更多...
mybatis创建入门流程体验

mybatis创建入门流程体验

mysql数据库中建表 drop table if exists tb_user;create table tb_user(id int primary key auto_increment,username varchar(20),password varchar(20),gender char(1),addr varchar(30) );INSERT INTO tb_user VALUES (1, zhangsan, 123, 男, 北京); INSERT INTO tb_user …
阅读更多...
四川易点慧电子商务抖音小店：安全先行，购物无忧

四川易点慧电子商务抖音小店：安全先行，购物无忧

随着互联网的飞速发展&#xff0c;电子商务已成为人们日常购物的重要渠道。抖音小店作为新兴的电商平台&#xff0c;凭借其独特的社交属性和庞大的用户基础&#xff0c;迅速崛起并吸引了众多商家的入驻。在这个背景下&#xff0c;四川易点慧电子商务有限公司&#xff08;以下简…
阅读更多...
Android11应用安装未知来源的权限改动

Android11应用安装未知来源的权限改动

最近开发的App需要下载安装另一个App。这就涉及到了app的安装代码。关于App的安装代码&#xff0c;写了不少&#xff0c;所以这一块觉得不是问题&#xff1a; 判断版本&#xff0c;Android8.0判断是否有未知来源安装全选&#xff0c;没有则打开未知来源安装权限设置界面去开启…
阅读更多...
Linux并发程序设计(1):进程的创建和回收

Linux并发程序设计(1):进程的创建和回收

目录 1、基本概念概念 1.1 程序 1.2 进程 1.3 进程的内容 1.4 进程类型 1.5 进程状态 2、常用命令 2.1 查看进程信息 2.2 改变进程优先级 2.2.1 按用户指定的优先级运行进程 2.2.2 改变正在运行进程的优先级 2.3 其他相关指令 3、进程的创建和结束 3.1 子进程创建 3.1.1 …
阅读更多...
Odoo讨论+聊天模块：一体化内部协作平台，赋能高效沟通与业务流程协作

Odoo讨论+聊天模块：一体化内部协作平台，赋能高效沟通与业务流程协作

Odoo讨论聊天模块&#xff1a;一体化内部协作平台&#xff0c;赋能高效沟通与业务流程协作 Odoo 讨论模块是一个集成了即时通讯、文件共享、业务关联、权限控制等功能于一体的内部协作工具&#xff0c;允许用户通过跨模块的聊天窗口或通过专用的“讨论”面板互相发送消息、分享…
阅读更多...
Golang（一）：基础、数组、map、struct

Golang（一）：基础、数组、map、struct

目录 hello world 变量 常量&#xff0c;iota 函数 init函数和导包过程 指针 defer 数组和动态数组 固定长度数组 遍历数组 动态数组 len 和 cap 截取 切片的追加 map 四种声明方式 遍历map 删除 查看键是否存在 结构体 声明 作为形参 方法 封装 继承…
阅读更多...
笔记软件功能多样的是哪款？做笔记的软件哪个好用

笔记软件功能多样的是哪款？做笔记的软件哪个好用

在快节奏的现代生活中&#xff0c;笔记软件已成为我们提高工作效率、记录生活点滴的重要工具。想象一下&#xff0c;在繁忙的工作中&#xff0c;你能够快速记录下关键信息&#xff0c;或在灵感迸发时及时捕捉&#xff0c;这是多么方便高效。 一款功能多样的笔记软件&#xff0…
阅读更多...
Syncovery for Mac：高效文件备份和同步工具

Syncovery for Mac：高效文件备份和同步工具

Syncovery for Mac是一款专为Mac用户设计的文件备份和同步工具&#xff0c;凭借其高效、安全和易用的特点&#xff0c;深受用户好评。 Syncovery for Mac v10.14.2激活版下载 该软件具备强大的备份功能&#xff0c;支持多种备份方案和数据格式&#xff0c;用户可以根据需求轻松…
阅读更多...
Python教学入门：函数

Python教学入门：函数

在 Python 中&#xff0c;def 关键字用于定义函数。函数是一段可重用的代码块&#xff0c;用于执行特定的任务或操作。通过定义函数&#xff0c;可以将一段代码封装起来&#xff0c;使其可以在程序中被多次调用&#xff0c;提高代码的复用性和可维护性。 下面是 def 函数定义的…
阅读更多...
pandas/python 一个实战小案例

pandas/python 一个实战小案例

上次写坦克游戏的时候&#xff0c;接触了一点pandas&#xff0c;当时只是简单了解了一下如何遍历行和列并获取值来替换图片&#xff0c;想更多了解pandas。正好有一些数据需要筛选&#xff0c;试试能不能用通过代码实现。虽然总的来说不复杂&#xff0c;但由于原始数据在命名、…
阅读更多...
如何训练猫出门不害怕:耐心做好这些训练，轻松get能溜的小猫

如何训练猫出门不害怕:耐心做好这些训练，轻松get能溜的小猫

一般我们外出见到的都是遛狗的&#xff0c;溜猫的相对少见&#xff0c;一方面是因为猫咪是喜欢安静独处的小动物&#xff0c;另一方面是糟乱的环境也容易引起猫咪的应激。对于是否应该“溜猫”&#xff0c;有两个极端的阵营。一些铲屎官认为应尊重猫的天性&#xff0c;胆小不爱…
阅读更多...
如何使用AI写作扩写文章？看完这篇学会扩写

如何使用AI写作扩写文章？看完这篇学会扩写

如何使用AI写作扩写文章&#xff1f;在数字化时代的浪潮下&#xff0c;人工智能&#xff08;AI&#xff09;已经深入渗透到我们生活的各个领域&#xff0c;其中&#xff0c;AI写作扩写技术更是以其高效、便捷的特点受到了广大用户的青睐。它不仅极大提升了写作效率&#xff0c;…
阅读更多...
Leetcode算法训练日记 | day29

Leetcode算法训练日记 | day29

一、递增子序列 1.题目 Leetcode&#xff1a;第 491 题 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&…
阅读更多...
硬件?、嘉立创EDA画PCB规则设计

硬件?、嘉立创EDA画PCB规则设计

1、打开规则设计 设置单位为mil 点击全部 将安全距离设置为8mil&#xff0c;这个8mil是目前很多生产PCB的工厂可以做的&#xff0c;如果距离设置的更小也就是性能要求更高&#xff0c;相应的生产成本也高元件到元件的距离设置为20mil 2、设置导线的宽度规则&#xff0c;可以对v…
阅读更多...
第G6周：CycleGAN实践

第G6周：CycleGAN实践

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、CycleGAN原理 &#xff08;一&#xff09;CycleGAN的原理结构&#xff1a; CycleGAN&#xff08;循环生成对抗网络&#xff09;是一种生成对抗网络&…
阅读更多...
思维导图软件Xmind for Mac 中文激活版 支持M

思维导图软件Xmind for Mac 中文激活版 支持M

XMind是一款非常受欢迎的思维导图软件&#xff0c;它应用了Eclipse RCP软件架构&#xff0c;注重易用性、高效性和稳定性&#xff0c;致力于帮助用户提高生产率。 Xmind for Mac 中文激活版下载 XMind的程序主体由一组插件构成&#xff0c;包括一个核心主程序插件、一组Eclipse…
阅读更多...
最新文章

Copyright @ 2022~2023

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