WebAssembly的简单理解

什么是WebAssembly

WebAssembly是一种字节码指令,类比java字节码。它现在已经成为了浏览器的第四大标准语言:html、css、JavaScript、WebAssembly

若想让不同的计算机语言写的程序能够跨平台运行,则需要一个针对不同语言的编译器将它们翻译成一种统一的字节码,在java体系中,编译器能将各种jvm-base的语言(java、groovy、scala等)统一翻译成java字节码文件供执行引擎调用。同样,若想让浏览器也能运行各种语言(c、c++、rust等),则需要使用编译器将各种语言编译成一种统一的语言文件,这个转换后的文件就是WebAssembly指令集文件,通常以.swam为后缀

flutter web 中使用的wasm

为什么要这么做

个人认为有两个主要原因:

  1. 性能更高
    使用wasm技术直接将原本的c文件转换为字节码文件比让浏览器引擎解析js文件要快得多
  2. 减少成本
    可以直接将已经用其他语言写好的项目直接转换为web端,大大减少了开发成本

比较有名的例如AutoCAD web端,它就是将其原本使用c语言编写的客户端软件编译成了wasm使得用户可以在浏览器上使用、Figma、

flutter web端也使用了该技术

flutter

浏览器访问flutter web项目时,需要先加载一个 canvaskit.wasm 文件,该文件就是将Skia编译成的webassembly文件,这也是flutter能在浏览器中渲染图形的核心文件

Skia

Skia是一套2d渲染库,canvas就使用该库进行渲染

skia是个2D向量图形处理函数库,包含字型、坐标转换,以及点阵图都有高效能且简洁的表现。不仅用于Google Chrome浏览器,新兴的Android开放手机平台也采用skia作为绘图处理,搭配OpenGL/ES与特定的硬件特征,强化显示的效果。

百度百科

为什么不直接使用Skia

既然Chrome已经用了skia,为什么还需要再加载一个wasm格式的Canvaskit文件?

1. Canvaskit 能够缓存绘制中间对象,使得多次渲染性能更高

2. 避免了 gpu 内存和 cpu 内存交换

3. 更可靠的path boolean operations 布尔运算

4. 文字排版功能更好用

https://zhuanlan.zhihu.com/p/432454443

skia根据硬件不同有很多后端实现,例如对cpu和gpu的不同实现,canvaskit编译使用的是cpu版本,这就导致canvaskit的性能普遍较低。但canvaskit可以用在部分不支持skia的浏览器上。

https://news.ycombinator.com/item?id=24368808

如果浏览器不支持wasm怎么办

浏览器会再次将wasm翻译回js执行,这种技术叫做 polyfill

跨平台

当然,其能将多种语言统一成一种语言便具有了跨平台的优势,自然可以不仅仅局限于浏览器了,比如nodejs端。所以后面就出现了越来越多的WebAssembly技术用于跨平台处理

Leave a Comment