带你了解 WebAssembly 的发展、应用与开发
一、WebAssembly 是什么?
“WebAssembly(缩写为 Wasm)是一种基于堆栈式虚拟机的二进制指令集。Wasm 被设计成为一种编程语言的可移植编译目标,并且可以通过将其部署在 Web 平台上,以便为客户端及服务端应用程序提供服务”
以上是 wasm 官网给出的一段解释。它运行在虚拟机中,执行的指令是虚拟指令,与汇编代码十分相似。WebAssembly 的名字可能也是由此而来(汇编语言的英文:Assembly)

通俗的讲,WebAssembly 是除 JavaScript 之外另一门可以在浏览器上运行的语言,其他语言(如 C/C++/Rust)也可以被编译成 WebAssembly 在浏览器上运行。WebAssembly 是静态类型的语言,可以以“接近原生”的速度运行代码。
- 2015 年 Mozilla 发布 WebAssembly 项目,随后 Google、Microsoft、Apple 等各大主流的浏览器厂商均大力支持;
- 2018 年 WebAssembly 第一个规范草案诞生;
- 2019 年成为 W3C 国际标准,成为与 HTML、CSS 和 JavaScript 并列的唯四前端技术;
- 2022 年 Docker 对 WebAssembly 提供支持;
二、为什么需要 WebAssembly?
WebAssembly 的出现,是为了解决 JavaScript 性能底下的问题!
随着 JavaScript 被广泛的应用,它也暴露了很多问题:
- 语法太灵活导致开发大型 Web 项目困难;
- 性能不能满足一些场景的需要;
这两大问题成为 JavaScript 头顶上的达摩克利斯之剑,危及着 JavaScript 更广泛的应用。
第一个问题,被微软的 TypeScript 解决了!微软利用 TypeScript 这把锋利的武器打造了 VSCode 等史诗级项目。

第二个问题,2008 年 Google 推出 JavaScript 引擎 V8,使用 JIT 技术,使得 Web 性能得到了数十倍的增长。但 Web 性能还是被挑战!
- 由于 DOM 渲染和 JavaScript 执行相互独立,单线程导致 DOM 渲染阻塞 JavaScript 执行;
- 由于 JavaScript 是动态弱类型语言,而不像 C/C++ 这类静态强类型语言,JIT 优化效率有限;
为了进一步优化 JIT 效率,浏览器鼻祖 Mozilla 推出了 asm.js,随后 Google、Microsoft、Apple 都觉得 asm.js 的思路不错,于是联合起来,一同共建 WebAssembly 生态。

WebAssembly 最大的优点是,可以大幅度提升 Web 应用的性能,执行速度和 C/C++ 原生应用在一个数量级,据称优化后可以达到 C 语言程序 70% 的速度。
WebAssembly 的高性能、轻量和跨平台,使得我们可以将 C/C++ 等语言运行在 Web,也可以将桌面端应用跑在 Web 容器。
三、浏览器兼容性
参见 https://developer.mozilla.org/zh-CN/docs/WebAssembly#浏览器兼容性
- Firefox 52+;
- Chrome 57+;
- Edge 16+;
- Safari 11+;
- Node 8+;
另外,微信小程序基础库版本从 2.13.0 开始,通过 WXWebAssembly 对象对集成的 wasm 包进行支持。

四、应用场景有哪些?
初期,主要用于浏览器性能敏感模块的实现,如复杂的界面渲染、游戏引擎、地图渲染,数学计算等。
过去几年发展很快,除了浏览器中可以跑,后端(Node.js)也可以跑,在终端设备、移动设备、物联网及云原生上都有广阔的应用场景。
Figma 文件读取;
Magnum 跨平台的 OpenGL 图形引擎;
Google 3D 地图;
eBay 的条形码扫描仪;
AutoCAD 网页版;
Photoshop 网页版;
Web-DSP 在浏览器上运行的多媒体影音处理函数库;
Unity 的 Web 游戏引擎;
Egret Engine H5 游戏引擎;
Disney+ 应用程序开发工具包;
微软的飞行模拟器有一个基于 WebAssembly 的插件系统;
网页版 Windows 2000;
Blazor 让 .NET 代码在浏览器运行;
Walt 用 JavaScript 语法快速开发原生应用;
还包括语言检测、音频混合、视频编解码、数字信号处理、医学影像、物理模拟、加解密、压缩、数学计算等领域;
18个 WebAssembly 相关的创业公司:


五、如何使用 WebAssembly 进行开发
目前较为常见的是将 C/C++ 代码或者是 Rust 代码转为 wasm 文件,另外也支持 Go 等语言。



参考:
- WebAssembly 中文网
- 《8个WebAssembly 应用案例》
- 《为什么说 WASM 是 Web 的未来》
- 《WebAssembly 用在了哪里?18个激动人心的 Wasm 初创公司》
- 《恕我直言,90% 的应用场景都不需要用WebAssembly!》
带你了解 WebAssembly 的发展、应用与开发的更多相关文章
- 三本书带您快速深入掌握Spring Boot应用开发《Spring Boot从零开始学(视频教学版)》
#好书推荐##好书奇遇季#三本书带您快速深入掌握Spring Boot应用开发<Spring Boot从零开始学(视频教学版)><Spring Boot应用开发实战><深 ...
- 带你领略Linux系统发展及版本更迭
Linux的出现是在1991年,Linus Torvalds的学生开发的,最初的Linux是类似Unix操作系统,可用于386,486或奔腾处理器的计算机上.Linus Torvalds是一个伟人,他 ...
- Android发展演变与开发环境搭建
本人也算是一名比较会玩的Android手机用户,常常关注Android发展的最新情况,并且每年都会熬夜看谷歌的I/O大会,总会第一时间刷入最新的Android版本.接下来简单谈一下Android版本的 ...
- 一文带你快速入门 Go 语言微服务开发 - Dubbo Go 入门实践总结
更多详细示例可直接访问 Dubbo 官网 或搜索关注官方微信公众号:Apache Dubbo 1. 安装Go语言环境 建议使用最新版 go 1.17 go version >= go 1.15 ...
- WebAssembly学习(一):认识WebAssembly
WebAssembly作为一门新兴起的技术,在 JavaScript 圈非常的火!人们都在谈论它多么多么快,怎样怎样改变 Web 开发领域,被各大巨头所推广,这篇文章对其做一个简单的了解认识,本文非原 ...
- .NET开发者的机遇与WebAssembly发展史(有彩蛋)
一.唠唠WebAssembly的发展历程 目前有很多支持WebAssembly的项目,但发展最快的是Blazor,这是一个构建单页面的.NET技术,目前已经从Preview版本升级到了beta版本,微 ...
- WebAssembly是解决JavaScript 痼疾的银弹?
写在前面 <没有银弹>是 Fred Brooks 在 1987 年所发表的一篇关于软件工程的经典论文.该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍. ...
- [转贴] 软件测试职业发展的 A 面和 B 面
[转贴] 软件测试职业发展的 A 面和 B 面 1.所谓的软件测试技术到底包含什么? 梅子:我先来从传统意义上来谈一下测试技术,主要就是测试分析,测试设计,测试管理,测试执行,自动化测试技术,专项测试 ...
- WebAssembly 介绍
http://blog.csdn.net/zhangzq86/article/details/61195685 WebAssembly 的出现是不是意味着 Javascript 要完? https:/ ...
- WebAssembly,Web的新时代
在浏览器之争中,Chrome凭借JavaScript的卓越性能取得了市场主导地位,然而由于javascript的无类型特性,导致其运行时消耗大量的性能做为代价,这也是JavaScript的瓶颈之一.W ...
随机推荐
- 【SLAM】ORB_SLAM3 初步调试运行详细记录
前言 相关解析及参考: 超详细解读ORB-SLAM3单目初始化(下篇) ORB_SLAM3和之前版本有什么不同?_小白学视觉的技术博客_51CTO博客 orbslam3 官方源码地址:https:// ...
- 嵌入式工业开发板基础测试手册——基于NXP iMX6ULL开发板(1)
前 言 本文档适用开发环境: Windows开发环境:Windows 7 64bit.Windows 10 64bit 虚拟机:VMware15.1.0 Linux开发环境:Ubuntu18.04.4 ...
- 2023年台州市初赛Misc
2023年台州市初赛Misc 这是神马 冰蝎流量,找到key <?php @error_reporting(0); session_start(); $key="144a6b22963 ...
- Simple WPF: WPF 实现按钮的长按,短按功能
最新内容优先发布于个人博客:小虎技术分享站,随后逐步搬运到博客园. 实现了一个支持长短按得按钮组件,单击可以触发Click事件,长按可以触发LongPressed事件,长按松开时触发LongClick ...
- Nginx 高性能架构解析
本文详细探讨了Nginx的反向代理.负载均衡和性能优化技术,包括配置优化.系统优化.缓存机制和高并发处理策略,旨在帮助专业从业者深入理解并有效应用Nginx. 关注TechLead,复旦博士,分享云服 ...
- Node.js 处理 File
Node.js 处理 File fs 模块 常规使用 运用递归遍历目录树 创建文件和目录 读写文件 path 模块 对于 file 的理解,此处 fs 模块 Node.js 提供了处理文件系统的内置模 ...
- for循环以及常用的遍历(迭代)用法
for循环以及常用的遍历(迭代)用法 概念:(概念才是高楼的地基!) for循环是一个计次循环,一般运用在循环次数已知的情况下.通常适用于枚举或遍历序列,以及迭代序列中的元素. 注意*:迭代变量用 ...
- html5 video标签 去掉边框黑线
只需在样式中添加: mix-blend-mode: darken; 注意:IE和Edge浏览器不支持mix-blend-mode属性
- 面试题-python 什么是闭包(closure)?
前言 前面学了装饰器,那么闭包和装饰器有什么区别呢?闭包传递的是变量,而装饰器传递的是函数对象,只是传的参数内容不一样,闭包的概念包含了装饰器,可以说装饰器是闭包的一种,它只是传递函数对象的闭包. 先 ...
- 【MySQL】MySQL 执行创建存储过程报错的解决方法
源码 创建使用while循环插入数据的存储过程 设置mysql分隔符为// delimiter // drop procedure if exists while1 ; create procedur ...