【JSConf EU 2018】Rust + WebAssembly
欧洲JSConf上的神秘项目
在今年的欧洲JSConf上来自Mozilla的Lin Clark为我们展示一个神秘项目，一个的拱形彩虹门（视频传送门），它实际上是由三万个彩色LED组成的画布，可以展现灯光动画，并且通过Rust编写的WebAssembly模块来控制“拱门”的灯光动画。Lin在2017年的JSConf上也曾做过关于WebAssembly的演讲，在该演讲中她提到2008年是JavaScript执行效率曲线的一个拐点，随着众多浏览器加入了JIT编译器（Just-in-time compiler），JavaScript的运行性能带来了十倍的增速，这为JavaScript插上了一双翅膀使它可以自由翱翔在浏览器端、服务器端和客户端。Lin指出WebAssembly的诞生可能会成为曲线的下一个拐点。可见Mozilla对WebAssembly的重视程度。
emm...让我们回到2018年。Lin在会上说明了如何使用WebAssembly模块控制“拱门”的灯光动画。下面让我们来看下这是如何做到的。
用字节把空间或时间连续起来
我们所处的空间是一个三维空间，如果再给它加上时间维度，那它就是四维空间。
计算机是没有办法理解这个四维空间的，如果要让计算机可以“理解”，我们需要对四维空间降维。首先是时间维度，可以通过帧来完成的。显示屏就像一个翻页的书，每一帧就相当于书的一页。
现在要从三维降到二维，我们要做的是将空间压平到一个方格纸上。
现在下降到了一行像素，我们已经可以把它放到内存里面了，因为WebAssembly内存（linear memory）基本就是一排小格子。这意味着我们已经下降到一维结构，但是仍然拥有着代表着二维、三维或四维的全部数据。只是现在它们是以一种连续的、线性的方式在展示。
线性内存（Linear memory）
线性内存是JavaScript和WebAssembly的一个主要通信方式，WebAssembly和运行它的JavaScript都可以访问这个对象。线性内存实际上是一个可变大小的ArrayBuffer对象，本质上是连续的、按字节可寻址的一段内存。
例如你用了一个16进制的值，那你的数字将有24位的宽度。所以你需要一个24位的格子。每个格子都包含一个像素,而可容纳24位最小的格子是32位的（int32），所以我们将在这个缓冲区上创建一个Int32Array的视图。它将这段缓冲区的字节码包裹到格子里。在这个例子里我们需要添加一些空白来填充这个格子由24位补齐到32位。
如果我们使用RGB值，这些格子将是8位的宽度。为了得到一个RGB的值，你将使用每三个格子代表你的R、G和B的值。这意味着你需要遍历这些格子，并取出它们里面的数字。
直接使用线性内存，你需要手动（写一些代码）遍历它，把它里面的数据取出来存放到更加合理的数据结构里。对于这个项目来说，这样做不是很糟糕。颜色的映射是数字，它们相对容易使用线性内存来表示。我们使用的数据结构（RGB值）也不是很复杂。但是如果你使用的是更加复杂的数据结构，直接处理内存将会很痛苦。如果你可以直接传一个JavaScript对象给WebAssembly，让WebAssembly去维护它，这将会变简单很多。你只需要添加一个很小的库(wasm-bindgen)就可以做到这些。
使用wasm-bindgen
wasm-bindgen是使用Rust写的一个库，它可以使JavaScript与WebAssembly模块之间的数据交互变的更简单。它用一个JavaScript wrapper 来包裹WebAssembly模块。这个wrapper知道如何将复杂的JavaScript对象写入线性内存。然后，当WebAssembly函数返回一个值时，JavaScript wrapper将从线性内存中获取数据并将其重新转换为JavaScript对象。
要做到这一点，它会查看Rust代码中的函数签名，并计算出所需的JavaScript。这适用于像字符串这样的内置类型，也适用于你定义在代码里的类型。wasm-bindgen将Rust结构体转化JavaScript的类。该工具在当前版本只支持Rust，之后会不断完善从而支持其他编程语言（例如：C/C++）。
完
这个项目是开始学习WebAssembly的很好的开始，因为我们可以通过自己编写的WebAssembly模块来对真实世界产生影响。是不是很酷、很有趣。想体验通过写WebAssembly模块来控制灯光动画的乐趣吗？Mozilla已经帮我们准备了在线环境The Arch，现在就开始体验吧!
关注公众号 低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。
- 上一篇
JavaScript事件机制——记一次认真准备的技术分享
先问几个问题，你是否能快速闪过答案？ 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？ 捕获型和冒泡型同时存在，谁生效？ jquery的on或bind是冒泡，还是捕获？ 冒泡能够阻止，那捕获能够阻止吗？ stopPropagation 和 stopImmediatePropagation的区别 Event.bubbles，Event.eventPhase Event.cancelable，Event.cancelBubble，event.defaultPrevented 常用技巧 js事件的捕获和冒泡图 举个例子： 点击s2，s1分别会打印什么？ <div id="s1">s1 <div id="s2">s2</div> </div> <script> s1.addEventListener("click",function(e){ console.log("s1 冒泡事件"); },false); s2.addEventListener("click",function(e){ console.log("s2 冒泡事...
- 下一篇
webpack 从入门到放弃(一)
什么是 webpack，为什么要使用 webpack 什么是 webpack 官网给出的概念是： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 根据官网最直观最出名的那个图我们可以知道，webpack 可以打包/脚本/图片/样式/表 从图中我们可以看出左边有依赖关系的模块（MODULES WITH DEPENDENCIES）通过 webpack 打包成了各种静态资源（STATIC ASSETS） 为什么要使用 webpack 通过上面的概念，你是不是已经大概知道了 webpack 是干什么的，那么问题来了，为什么要使用 webpack 呢？ 这就说来话长了，那就长话短说，emmmm 为什么使用 webpack，这应该是和前端的发展有关系的，我认为，webpack 是前端发展到一定阶段的必然产物（貌似是一句废话）。 因为计算机网络的飞速...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS6,7,8上安装Nginx，支持https2.0的开启
- CentOS关闭SELinux安全模块
- 2048小游戏-低调大师作品
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- 设置Eclipse缩进为4个空格，增强代码规范
- CentOS8安装MyCat，轻松搞定数据库的读写分离、垂直分库、水平分库
- Docker快速安装Oracle11G，搭建oracle11g学习环境
- SpringBoot2全家桶，快速入门学习开发网站教程
微信收款码
支付宝收款码