文档章节

WebAssembly 应用案例直击 它们都在用 WebAssembly

编辑部的故事
 编辑部的故事
发布于 01/31 05:49
字数 1729
阅读 3112
收藏 74
点赞 4
评论 2

目前 WebAssembly 已经开始在哪些场景中应用了?不妨从这 8 个 WebAssembly 应用一探究竟!

事实上,WebAssembly 最大的优点莫过于可大幅度提升 Javascript 的性能。WebAssembly 的设计目标:定义一个可移植,体积紧凑,加载迅速的二进制格式为编译目标,而此二进制格式文件将可以在各种平台(包括移动设备和物联网设备)上被编译,然后发挥通用的硬件性能以原生应用的速度运行。

除了浏览器开发者和游戏开发者大力支持 WebAssembly 外,许多需要提升性能表现的大型网页应用或线上工具,都可从 WebAssembly 的超快运行速度中受益。那么目前 WebAssembly 已经开始应用在哪些场景了呢?我们不妨从下面 8 个 WebAssembly 应用一探究竟。其中,有些应用已在 GitHub 上提供源码,可供我们参考,以打造自己的 WebAssembly 应用。

1. TeaVM — 将 JVM 字节码翻译成 JavaScript 和 WebAssembly

TeaVM 是一个 AOT 编译器(翻译器),可将 JVM 字节码翻译成 JavaScript 或 WebAssembly 格式,它和著名的 Google Web Tooklit(GWT) 有一定相似之处,但必须指出 TeaVM 并不需要 Java 源代码,而只需要 class 文件(JVM 字节码)。所以它能成功地用于 Kotlin 和 Scala 等基于 JVM 的语言。

TeaVM 在主页上的自我描述为,给不想学习 JavaScript 技术,但又想要进行 Web 前端开发的 Java 开发者的一个强大工具。所以,TeaVM 除了可以让 Java 开发者进行前端开发工作外,也能整合旧的 Java 后台开发基础框架。

GitHub 地址:https://github.com/konsoletyper/teavm

2. Figma — 基于浏览器的多人实时协作 UI 设计工具

Figma 称得上是一款新晋的设计神器,它以浏览器为基础环境,是一个用于进行各种设计的多人实时协作工具,正因为它基于浏览器,所以支持 Windows、macOS 以及 Linux 平台,并且有 iOS 端的预览工具。

除了实时协作,Figma 还有版本控制、矢量网络(Vector Network)、全平台适配等一些很棒的特性。此外,我们都知道 UI 设计工作必须要经常处理体积巨大的设计文件,所以不难发现读取速度以及性能对 Figma 的重要性。

过去的 Figma 使用 Asm.js 来加快文件读取速度,现在改用 WebAssembly 技术后,这套多功能 UI 设计工具的运行速度又再飙升 3 倍。

虽然这是一款收费产品,但提供了免费体验版。传送门:https://www.figma.com

附注:asm.js 由 Mozilla 提出,属于 JavaScript 的一个子集,主要是为了解决 JavaScript 的执行效率问题,可以更大程度的优化以提高执行速度。

3. Google Earth — 支持各大浏览器的 3D 地图,而且运行流畅

2017年10月底,谷歌开始支持让 Google Earth 在 Firefox 上运行,其中的关键就是使用了 WebAssembly。

在 WebAssembly 尚未问世时,能让代码在浏览器原生执行的技术除了 Asm.js 外,还有谷歌自家的 Native Client。而在谷歌选择后者之下,它也让 Google Earth 只能在 Chrome 浏览器中运行。但随着主流浏览器相继支持 WebAssembly 的情况下,Google Earth 团队也承诺,要开始从 Native Client 迁移到 WebAssembly。

Google Earth:https://www.google.com/earth/

4. Magnum — 跨平台的 OpenGL 图形引擎

Magnum 是一款轻量级和模块化的游戏、数据可视化 OpenGL 图形处理引擎,支持 C++11/C++14。桌面环境一共支持 Linux、Windows 及 Mac,移动环境也支持了 iOS 和 Android,并且整合了嵌入式 Linux,而在网页环境则必须通过编译器 Emscripten 将代码编译成 Asm.js、WebAssembly 格式。该工具所支持的图片 API,包含了 OpenGL、OpenGL ES 及 WebGL。

GitHub 地址:https://github.com/mosra/magnum

5. Egret Engine — 最受欢迎的 HTML 5 游戏引擎,让游戏引擎快三倍

Egret Engine 是白鹭科技开发的知名游戏引擎,它是遵循 HTML 5 标准的 2D、3D 引擎,解决了 HTML 5 性能问题及碎片化问题,灵活地满足开发者开发 2D 或 3D 游戏的需求,并有着极强的跨平台运行能力。

在2017年5月时,白鹭引擎宣布开始支持 WebAssembly,而利用 WebAssembly,白鹭引擎可以将 HTML 5 代码编译为机器码运行,让游戏运行性能提升 300%。若使用者浏览器不支持 WebAssembly,该引擎也会自动转换成 Java 版本。中国热门手游,如:莽荒纪同名手游、三生三世十里桃花同名手游、猫来了、梦道、坦克风云等都采用了 Egret Engine。

GitHub 地址:https://github.com/egret-labs/egret-core/

6. Blazor — 让 .NET 代码也能在浏览器运行

通过 WebAssembly 或 Asm.js 将 Mono Runtime 编译处理后,开源 UI 框架 Blazor 可以让 .NET 代码在浏览器环境中运行,而习惯 ASP.NET Razor 语法的开发者,仍可以继续沿用习惯的开发模式。

Razor 会自动检测开发者的浏览器是否支持 WebAssembly,如果不支持,该工具也会自动转换成 Asm.js。不过目前该工具仍然属于实验阶段,尚未支持正式环境的构建、调试功能。

GitHub 地址:https://github.com/SteveSanderson/Blazor

7. Web-DSP — 使用浏览器就能即时制作多媒体影音特效

Web-DSP 是一个在浏览器上运行的多媒体影音处理函数库,其目标是打造各类基本元件,让开发者可以在浏览器上处理影音等多媒体文件。而该工具的函数库是以 C++ 编写的,并且编译成 WebAssembly 执行,借此让 JavaScript 开发者也能使用。

该工具开发者也展示了使用 WebAssembly 的图像编辑器,在播放视频的同时,使用者也可以即时选择套用各项效果,如负片、灰阶、噪点、锐化等处理。

GitHub 地址:https://github.com/shamadee/web-dsp

8. Walt — 用 JavaScript 语法也能快速开发原生的极速应用

目前,在多数网页开发者尚未熟悉使用 Asm.js,WebAssembly 技术的情况下,有一款叫做 Walt 的工具或许可以帮助到他们,目的是让网页开发者可以不用接触 C、C++ 或者 Rust 语言,继续使用 JavaScript 语法,来打造出接近机器码效率的网页应用。此外 Walt 也不需要依靠 LLVM 编译器或者其他二进制转换工具,可以直接将源代码编译成 WebAssembly 格式。

GitHub 地址:https://github.com/ballercat/walt

参考:https://www.ithome.com.tw/news/120813

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1105
博文 241
码字总数 400552
作品 0
深圳
运营/编辑
加载中

评论(2)

OSC_SRtSbN
OSC_SRtSbN
区块链项目eos也是用到它
开源中国首席罗纳尔多
开源中国首席罗纳尔多
chrome几支持的?
WebAssembly已支持所有主流浏览器

Firefox Quantum、Safari、Edge和Chrome一并支持WebAssembly,可以接近原生速度运行Web应用程序。点击【阅读原文】获取原文地址。 作者:Judy DeMocker 译者:王鸿蒙 审校:包研 虽然Mozilla...

livevideostack
2017/11/17
0
0
前端每周清单半年盘点之 WebAssembly 篇

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/09/14
0
0
WebAssembly 系列(六)WebAssembly 的现在与未来

本文作者:Lin Clark 翻译原文:http://huziketang.com/blog/posts/detail?postId=58ce7fd3a6d8a07e449fdd26 英文原文:Where is WebAssembly now and what’s next? 本文是关于 WebAssembl......

胡子大哈
2017/03/16
0
0
继谷歌之后,苹果也宣布加入WebAssembly阵营

  【IT168 编译】6月5日,Google宣布Chrome将不再支持PNaCl,而是将和其他浏览器一起拥抱WebAssembly。近日,苹果也发声表示Safari的开源浏览器引擎WebKit也宣布完全支持WebAssembly。 ▲图...

it168网站
2017/06/09
0
0
WebAssembly 新标准可能导致幽灵熔断修复程序无效

据 Forcepoint 的安全研究员 John Bergbom 称,即将增加的 WebAssembly 标准可能会使浏览器级别的一些针对 Meltdown 和 Specter 的修复程序无用。 WebAssembly(WA 或 WASM)目前支持所有主流...

达尔文
06/26
0
3
[译] JavaScript 是如何工作的:对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适

原文地址:How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本......

stormluke
05/23
0
0
WebAssembly 为什么比 asm.js 快?

本文作者:Alon Zakai 翻译原文:http://huziketang.com/blog/posts/detail?postId=58ce80d2a6d8a07e449fdd28 英文连接:Why WebAssembly is Faster Than asm.js WebAssembly 是为 Web 而设计......

胡子大哈
2017/03/19
0
0
WebAssembly 系列(一)生动形象地介绍 WebAssembly

本文作者:Lin Clark 翻译原文:http://huziketang.com/blog/posts/detail?postId=58ce8036a6d8a07e449fdd27 英文原文:A cartoon intro to WebAssembly 你可能已经听说过,WebAssembly 执行......

胡子大哈
2017/03/16
0
0
【JSConf EU 2018】Rust + WebAssembly

欧洲JSConf上的神秘项目 在今年的欧洲JSConf上来自Mozilla的Lin Clark为我们展示一个神秘项目,一个的拱形彩虹门(视频传送门),它实际上是由三万个彩色LED组成的画布,可以展现灯光动画,并...

leyayun
06/26
0
0
WebAssembly 系列(四)WebAssembly 工作原理

本文作者:Lin Clark 翻译原文:http://huziketang.com/blog/posts/detail?postId=58c77641a6d8a07e449fdd24 英文原文:Creating and working with WebAssembly modules 本文是关于 WebAssem......

胡子大哈
2017/03/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

流利阅读笔记29-20180718待学习

高等教育未来成谜,前景到底在哪里? Ray 2018-07-18 1.今日导读 在这个信息爆炸的年代,获取知识是一件越来越容易的事情。人们曾经认为,如此的时代进步会给高等教育带来众多便利。但事实的...

aibinxiao
12分钟前
6
0
第15章FTP服务搭建与配置

15.1FTP介绍 FTP多用于Windows传文件到linux rz sz在文件超过4G,就无法使用了——>安装包yum install -y install lrzsz rz把 window 上的文件传输到 linux 上 sz 把 linux 上的文件传输到 ...

Linux学习笔记
20分钟前
0
0
OSChina 周三乱弹 —— 你被我从 osc 老婆们名单中踢出了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小鱼丁:分享五月天的单曲《后来的我们 (电影《后来的我们》片名曲)》: 《后来的我们 (电影《后来的我们》片名曲)》- 五月天 手机党少年们想...

小小编辑
25分钟前
6
1
Spring Boot Admin 2.0开箱体验

概述 在我之前的 《Spring Boot应用监控实战》 一文中,讲述了如何利用 Spring Boot Admin 1.5.X 版本来可视化地监控 Spring Boot 应用。说时迟,那时快,现在 Spring Boot Admin 都更新到 ...

CodeSheep
44分钟前
0
0
Python + Selenium + Chrome 使用代理 auth 的用户名密码授权

米扑代理,全球领导的代理品牌,专注代理行业近十年,提供开放、私密、独享代理,并可免费试用 米扑代理官网:https://proxy.mimvp.com 本文示例,是结合米扑代理的私密、独享、开放代理,专...

sunboy2050
今天
0
0
实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部