WebAssembly完全入门——了解wasm的前世今身

WebAssembly完全入门——了解wasm的前世今身前言接触WebAssembly之后,在google上看了很多资料。感觉对WebAssembly的使用、介绍、意义都说的比较模糊和笼统。感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

接触WebAssembly之后,在google上看了很多资料。感觉对WebAssembly的使用、介绍、意义都说的比较模糊和笼统。感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成功,要么就是不知所云、一脸蒙蔽。本着业务催生技术的态度,这边文章就诞生了。前部分主要是对WebAssembly的背景做一些介绍,WebAssembly是怎么出现的,优势在哪儿。如果想直接开始撸代码试试效果,可以直接跳到最后一个板块

WebAssembly是什么?

定义

首先我们给它下个定义。

WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式

例子

当然,我知道,即使你看了定义也不知道WebAssembly到底是什么东西。废话不多说,我们通过一个简单的例子来看看WebAssembly到底是什么。

WebAssembly完全入门——了解wasm的前世今身

上图的左侧是用C++实现的求递归的函数。中间是十六进制的Binary Code。右侧是指令文本。可能有人就问,这跟WebAssembly有个屁的关系?其实,中间的十六进制的Binary Code就是WebAssembly。

编译目标

大家可以看到,其可写性和可读性差到无法想象。那是因为WebAssembly不是用来给各位用手一行一行撸的代码,WebAssembly是一个编译目标。什么是编译目标?当我们写TypeScript的时候,Webpack最后打包生成的JavaScript文件就是编译目标。可能大家已经猜到了,上图的Binary就是左侧的C++代码经过编译器编译之后的结果。

WebAssembly的由来

性能瓶颈

在业务需求越来越复杂的现在,前端的开发逻辑越来越复杂,相应的代码量随之变的越来越多。相应的,整个项目的起步的时间越来越长。在性能不好的电脑上,启动一个前端的项目甚至要花上十多秒。这些其实还好,说明前端越来越受到重视,越来越多的人开始进行前端的开发。

但是除了逻辑复杂、代码量大,还有另一个原因是JavaScript这门语言本身的缺陷,JavaScript没有静态变量类型。这门解释型编程语言的作者Brendan Eich,仓促的创造了这门如果被广泛使用的语言,以至于JavaScript的发展史甚至在某种层面上变成了填坑史。为什么说没有静态类型会降低效率。这会涉及到一些JavaScript引擎的一些知识。

静态变量类型所带来的问题

WebAssembly完全入门——了解wasm的前世今身

这是Microsoft Edge浏览器的JavaScript引擎ChakraCore的结构。我们来看一看我们的JavaScript代码在引擎中会经历什么。

  • JavaScript文件会被下载下来。
  • 然后进入Parser,Parser会把代码转化成AST(抽象语法树).
  • 然后根据抽象语法树,Bytecode Compiler字节码编译器会生成引擎能够直接阅读、执行的字节码。
  • 字节码进入翻译器,将字节码一行一行的翻译成效率十分高的Machine Code.

在项目运行的过程中,引擎会对执行次数较多的function记性优化,引擎将其代码编译成Machine Code后打包送到顶部的Just-In-Time(JIT) Compiler,下次再执行这个function,就会直接执行编译好的Machine Code。但是由于JavaScript的动态变量,上一秒可能是Array,下一秒就变成了Object。那么上一次引擎所做的优化,就失去了作用,此时又要再一次进行优化。

asm.js出现

所以为了解决这个问题,WebAssembly的前身,asm.js诞生了。asm.js是一个Javascript的严格子集,合理合法的asm.js代码一定是合理合法的JavaScript代码,但是反之就不成立。同WebAssembly一样,asm.js不是用来给各位用手一行一行撸的代码,asm.js是一个编译目标。它的可读性、可读性虽然比WebAssembly好,但是对于开发者来说,仍然是无法接受的。

asm.js强制静态类型,举个例子。

function asmJs() {
    'use asm';
    
    let myInt = 0 | 0;
    let myDouble = +1.1;
}

为什么asm.js会有静态类型呢?因为像0 | 0这样的,代表这是一个Int的数据,而+1.1则代表这是一个Double的数据。

asm.js不能解决所有的问题

可能有人有疑问,这问题不是解决了吗?那为什么会有WebAssembly?WebAssembly又解决了什么问题?大家可以再看一下上面的ChakraCore的引擎结构。无论asm.js对静态类型的问题做的再好,它始终逃不过要经过Parser,要经过ByteCode Compiler,而这两步是JavaScript代码在引擎执行过程当中消耗时间最多的两步。而WebAssembly不用经过这两步。这就是WebAssembly比asm.js更快的原因。

WebAssembly横空出世

所以在2015年,我们迎来了WebAssembly。WebAssembly是经过编译器编译之后的代码,体积小、起步快。在语法上完全脱离JavaScript,同时具有沙盒化的执行环境。WebAssembly同样的强制静态类型,是C/C++/Rust的编译目标。

WebAssembly的优势

WebAssembly和asm.js性能对比

下面的图是Unity WebGL使用和不使用WebAssembly的起步时间对比的一个BenchMark,给大家当作一个参考。
可以看到,在FireFox中,WebAssembly和asm.js的性能差异达到了2倍,在Chrome中达到了3倍,在Edge中甚至达到了6倍。通过这些对比也可以从侧面看出,目前所有的主流浏览器都已经支持WebAssembly V1(Node >= 8.0.0).
WebAssembly完全入门——了解wasm的前世今身

与JavaScript做对比

我自己在一个用create-react-app新建的项目中,分别对比了WebAssembly版本和原生JavaScript版本的递归无优化的Fibonacci函数,下图是这两个函数在值是45、48、50的时候的性能对比。
WebAssembly完全入门——了解wasm的前世今身

看图说话,这就是WebAssembly与JavaScript很实际的一个性能对比。几乎稳定的是JavaScript的两倍。

WebAssembly在大型项目中的应用

在这里能够举的例子还是很多,比如AutoCAD、GoogleEarth、Unity、Unreal、PSPDKit、WebPack等等。拿其中几个来简单说一下。

AutoCAD

这是一个用于画图的软件,在很长的一段时间是没有Web的版本的,原因有两个,其一,是Web的性能的确不能满足他们的需求。其二,在WebAssembly没有面世之前,AutoCAD是用C++实现的,要将其搬到Web上,就意味着要重写他们所有的代码,这代价十分的巨大。

而在WebAssembly面世之后,AutoCAD得以利用编译器,将其沉淀了30多年的代码直接编译成WebAssembly,同时性能基于之前的普通Web应用得到了很大的提升。正是这些原因,得以让AutoCAD将其应用从Desktop搬到Web中。

Google Earth

Google Earth也就是谷歌地球,因为需要展示很多3D的图像,对性能要求十分高,所以采取了一些Native的技术。最初的时候就连Google Chrome浏览器都不支持Web的版本,需要单独下载Google Earth的Destop应用。而在WebAssembly之后呢,谷歌地球推出了Web的版本。而据说下一个可以运行谷歌地球的浏览器是FireFox。

Unity和Unreal游戏引擎

这里给两个油管的链接自己体验一下,大家注意上网的方式。

WebAssembly要取代JavaScript?

答案是否定的,请看下图。
WebAssembly完全入门——了解wasm的前世今身

大家可以看到这是一个协作关系。WebAssembly是被设计成JavaScript的一个完善、补充,而不是一个替代品。WebAssembly将很多编程语言带到了Web中。但是JavaScript因其不可思议的能力,仍然将保留现有的地位。

什么时候使用WebAssembly?

说了这么多,我到底什么时候该使用它呢?总结下来,大部分情况分两个点。

  • 对性能有很高要求的App/Module/游戏
  • 在Web中使用C/C++/Rust/Go的库
    举个简单的例子。如果你要实现的Web版本的Ins或者Facebook, 你想要提高效率。那么就可以把其中对图片进行压缩、解压缩、处理的工具,用C++实现,然后再编译回WebAssembly。

WebAssembly的几个开发工具

  • AssemblyScript。支持直接将TypeScript编译成WebAssembly。这对于很多前端同学来说,入门的门槛还是很低的。
  • Emscripten。可以说是WebAssembly的灵魂工具不为过,上面说了很多编译,这个就是那个编译器。将其他的高级语言,编译成WebAssembly。
  • WABT。是个将WebAssembly在字节码和文本格式相互转换的一个工具,方便开发者去理解这个wasm到底是在做什么事。

WebAssembly的意义

在我的个人理解上,WebAssembly并没有要替代JavaScript,一统天下的意思。我总结下来就两个点。

  • 给了Web更好的性能
  • 给了Web更多的可能
    关于WebAssembly的性能问题,之前也花了很大的篇幅讲过了。而更多的可能,随着WebAssembly的技术越来越成熟,势必会有更多的应用,从Desktop被搬到Web上,这会使本来已经十分强大的Web更加丰富和强大。

WebAssembly实操

要进行这个实际操作,你需要安装上文提到过的编译器Emscripten,然后按照这个步骤去安装。以下的步骤都默认为你已经安装了Emscripten。

WebAssembly在Node中的应用

导入Emscripten环境变量

进入到你的emscripten安装目录,执行以下代码。

source emsdk/emsdk_env.sh

新建C文件

用C实现一个求和文件test.c,如下。

int add(int a, int b) {
	return a + b;
}

使用Emscripten编译C文件

在同样的目录下执行如下代码。

emcc test.c -Os -s WASM=1 -s SIDE_MODULE=1 -o test.wasm

emcc就是Emscripten编译器,test.c是我们的输入文件,-Os表示这次编译需要优化,-s WASM=1表示输出wasm的文件,因为默认的是输出asm.js,-s SIDE_MODULE=1表示就只要这一个模块,不要给我其他乱七八糟的代码,-o test.wasm是我们的输出文件。

编译成功之后,当前目录下就会生成test.wasm

编写在Node中调用的代码

新建一个js文件test.js。代码如下。

const fs = require('fs');
let src = new Uint8Array(fs.readFileSync('./test.wasm'));
const env = {
	memoryBase: 0,
	tableBase: 0,
	memory: new WebAssembly.Memory({
		initial: 256
	}),
	table: new WebAssembly.Table({
		initial: 2,
		element: 'anyfunc'
	}),
	abort: () => {throw 'abort';}
}
WebAssembly.instantiate(src, {env: env})
.then(result => {
	console.log(result.instance.exports._add(20, 89));
})
.catch(e => console.log(e));

执行test.js

运行以下代码。

node test.js

然后就可以看到输出的结果109了。

WebAssembly在React当中的应用

通过fetch的方法调用

直接用fetch的方式。大概的调用方式如下。

const fibonacciUrl = './fibonacci.wasm';
const {_fibonacci} = await this.getExportFunction(fibonacciUrl);

getExportFunction具体代码如下。

getExportFunction = async (url) => {
    const env = {
      memoryBase: 0,
      tableBase: 0,
      memory: new WebAssembly.Memory({
        initial: 256
      }),
      table: new WebAssembly.Table({
        initial: 2,
        element: 'anyfunc'
      })
    };
    const instance = await fetch(url).then((response) => {
      return response.arrayBuffer();
    }).then((bytes) => {
      return WebAssembly.instantiate(bytes, {env: env})
    }).then((instance) => {
      return instance.instance.exports;
    });
    return instance;
};

通过import C文件来调用

先通过Import的方式来引进依赖。

import wasmC from './add.c';

然后进行调用。具体的方式如下。

wasmC({
  'global': {},
  'env': {
    'memoryBase': 0,
    'tableBase': 0,
    'memory': new WebAssembly.Memory({initial: 256}),
    'table': new WebAssembly.Table({initial: 0, element: 'anyfunc'})
  }
}).then(result => {
  const exports = result.instance.exports;
  const add = exports._add;
  const fibonacci = exports._fibonacci;
  console.log('C return value was', add(2, 5643));
  console.log('Fibonacci', fibonacci(2));
});

详细的代码在这里,欢迎Star。

写在后面

如今技术出现的越来越多,但是实际上在工作中能够用到的,越并不是那么多。其实很多大厂所输出的一些技术,都是有业务场景的,有业务做推动。而不是凭空造轮子。所以总结下来适合自己的才是最好的。当然不是说不要了解新技术,了解新技术跟上步伐是十分必要的。我们现在不用,不代表不需要了解。相反,以后再遇到类似的业务场景时,我们就会多一种选择,可以更加从容的对待。

欢迎微信搜索关注【SH的全栈笔记】,回复【队列】获取MQ学习资料,包含基础概念解析和RocketMQ详细的源码解析,持续更新中。

好了以上就是本篇博客的全部内容了,如果你觉得这篇文章对你有帮助,还麻烦点个赞关个注分个享留个言

WebAssembly完全入门——了解wasm的前世今身

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166577.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pychar激活码3月最新在线激活

    pychar激活码3月最新在线激活,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • osip和mysql_osip2/eXosip2调试笔记

    osip和mysql_osip2/eXosip2调试笔记软件版本:libosip2-3.3.0.tar.gzlibeXosip2-3.3.0.tar.gz./configure–prefix=/opt/sip/target–disable-staticmakemakeinstall测试代码:代码来源:http://blog.csdn.net/bat603/archive/2006/11/15/1386277.aspx1、UAS…

  • Excel将两个表格关联数据

    Excel将两个表格关联数据Excel将两个表格关联数据合并     有时候我们需要将两个数据表,合并成为一张数据表,根据两张表中,有一个相同定义的列进行合并。      此时,有两个sheet数据表。     数据表1     数据表2      两种表格中都有序列化id这个列,此时,需要把表2中的价格列,根据序列号id,添加到表1中。      首先,在表1中,后面的…

  • 高手解决DISK BOOT FAILURE,INSERT SYSTEM DISK AND PRESS ENTER

    高手解决DISK BOOT FAILURE,INSERT SYSTEM DISK AND PRESS ENTER1、首先要先确定你加电启动的时候有没有认出你的硬盘。这点在bios里可查。如果开机「滴」的一声短声,证明开机自检没问题(排除硬件问题,但不包括硬盘没有识别)。此时按del键进入bios,看你的硬盘有没

  • 作业调度和进程调度的辨析题_进程调度的功能有哪些

    作业调度和进程调度的辨析题_进程调度的功能有哪些很多学习完《操作系统原理》这门课程的小伙伴都应该对“FCFS(先到先服务)”、“SJF(短作业优先)”等调度算法原理比较熟悉。但是在实际做题的时候,往往一不小心就把概念搞错,不容易区分“作业调度”和“进程调度”的区别。下面我主要针对这两个概念进行解析并给出经典习题解答。PS:本博客并不详解每种调度算法的原理,因此有这方面需求的小伙伴可以直接pass了。1、作业调度作业调度又称为高级调度,频度较低。其主要工作是将位于外存后备队列中的某个(或某几个)作业调入内存,排在就绪队列上。注意了,这个时候仅仅是将作

  • java中接口(interface)详解

    java中接口(interface)详解接口(interface)有时必须从几个类中派生出一个子类,继承它们所有的属性和方法。但是,Java不支持多重继承。有了接口,就可以得到多重继承的效果。接口(interface)是抽象方法和常量值的定义的集合。从本质上讲,接口是一种特殊的抽象类,这种抽象类中只包含常量和方法的定义,而没有变量和方法的实现。接口定义举例publicinterfaceRunnerintid=…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号