WebAssembly 是一个什么样的新技术?

前言

很多人可能会产生这样一种错觉,随着手机在日常生活中的用途越来越广泛,人们的使用频率变得越来越高,很多软件都推出了 App 或者是小程序等来获取移动端的流量。
原先我们很多需要在网页上做得操作已经越来越多地被各式各样的 App、网页所取代,浏览器的打开率变得越来越低,感觉网页好像离我们越来越遥远,越来越没有意义了。
《WebAssembly 是一个什么样的新技术?》
确实,我们已经从「网页时代」切换到了「App 时代」,但这并不意味着网页,或者说 Web,已经彻底远离了我们。实际上我们目前看到的 App 中,有很多页面其实仍然还是 Web,这在日常 Top 10 甚至是 Top 50 的 App 中是非常常见的。

小程序

至于小程序,它和 Web 之间的关系也很紧密。小程序是微信自己做出来的一套框架,用的是自己的实现机制与 runtime,是典型的 C/S 模式,而非是 Web 应用那一套 B/S 模式,它很成功地在原生和 Web 之间找到了一个平衡点,在能够做到即点即开、无需安装的同时达到媲美原生应用的体验。
《WebAssembly 是一个什么样的新技术?》
然而,小程序的本质其实还是脱离不了 Web 的那些东西,所谓的 wxml、wxss 实际上也就是一个定制化的 html、css,很多内容的呈现仍然还是靠把 wxml、wxss 渲染成 Web 内容,通过 Webview 来呈现,只有少部分的组件有对接原生。
在这个「后 Web 时代」,或者说「App 时代」,我们看似是远离了浏览器、远离了 Web,实际上 Web 只是变成了一种我们更不容易察觉的,更能和原生融为一体、体验相仿的形式罢了,有的概念确实发生了比较大的变化,但是技术上东西还是那些东西,只是在不同的框架下我们可用的 API 不同罢了。

原生

随着时间的发展,在移动领域因为性能的问题,App 还是在更多地向原生靠拢,在 React Native 之后,Flutter 的高热度也能够说明这个问题。但这并不意味着 Web 在移动端注定要被淘汰,毕竟它拥有相当高的灵活性,原生和 Web 混合开发的应用在未来的很长时间内都会持续存在。
《WebAssembly 是一个什么样的新技术?》
在 PC 领域,随着目前电脑的计算性能越来越强,内存越来越大,越来越多的应用也开始转向采用 Electron 等框架来开发应用,而像 Electron 这样的应用其交互界面完全就是用 Web 来实现的,Electron 基于 Node 让 Web 应用能够被封装成客户端,和系统进行直接的交互。
一个 Web 应用可以在很短的时间内使用 Electron 包装成一个桌面客户端,这是因为 Electron 直接囊括了一整个 Chromium,界面本质上就是通过浏览器呈现出来的,只是我们并不能察觉到这是一个浏览器罢了。
市面上已经有非常多的知名应用在转向了 Electron,比如迅雷,他们弃用了使用多年的 Bolt,用 Electron 对界面进行了重构。Web 一直都没有过时,随着时代的发展,Web 也在不断进步,之所以我们可能会觉得它过时了,是因为我们对这项技术的理解、认知已经落后于时代。

WebAssembly

这一次给大家介绍的 WebAssembly 被很多大牛视为是会给 Web 带来一次革命的东西,近期 WebAssembly 是正式进入到了 1.0 版本,成为了一个正式的标准,被纳入进了主流的四个浏览器(浏览器引擎)中。
官方网站 https://webassembly.org/
我们都知道,Web 技术的三大件是 HTML、CSS 和 JavaScript,前两者需要浏览器引擎中的渲染引擎进行解析,最终得到页面,后者则需要浏览器通过脚本引擎解析执行。
如果我们要让 Web 能够实现一些更加高级的功能,我们要么必须要通过上述那些框架去改变 Web 应用的形态、模式,使其从 B/S 转为 C/S,让 Web 应用从浏览器中走出来,变身成为一个独立的客户端,要么就像以往那样,使用一些能够嵌入到 Web 中的东西,例如 Flash,来给 Web 扩增各种各样的功能。
随着 Flash 的逐渐没落(一些浏览器在近期即将彻底停止对 Flash 的支持),单纯在浏览器这样一个盒子内,在 B/S 这一套模式下,我们想要给它扩增一些功能,尤其是高性能地扩增一些功能,开始变得有些困难了。
《WebAssembly 是一个什么样的新技术?》
举个例子,比如 AI 的应用。TensorFlow 是 Google 旗下一个很火的开源深度学习框架,考虑到应用的问题,他们不单单是在 Python 下提供了一套训练、执行的框架,在 JavaScript 下,我们也能够通过 TensorFlow.js 来进行模型的构建、训练,以及执行已有的模型。
然而,不论是在浏览器内还是在 Node 下,受 JS 引擎和浏览器资源的限制,模型很难高性能地运行,大多数开发者往往只是用 Web 做输入输出,而不是把整个 AI 部分完全本地化地运行在浏览器中。
虽然现在的 JavaScript 引擎、HTML5 技术是相当强大的,但是不可否认的是,在对功能进行扩展的时候,在某些领域下 Web 的局限性是不可避免的。
除此之外,上文笔者有提到有很多桌面应用已经专用 Web 的方式来实现 UI,而不是再用原生的方式去实现,然而,也正是因为同样的资源受限原因,这些桌面应用很难去做一些计算密集的任务,除此之外,JS 的解释执行等也会带来额外的开销。
这个时候就有人开始想,如果 Web 能够直接执行、调用已经编译成二进制指令的库,那么它的性能和扩展性是不是会得到很大的提升呢?如果让这样的东西直接嵌入到 Web 内,就像以往的 Flash、Sliverlight 那样,这么做的话,Web 的性能和功能是否能够得到一个大提升呢?
《WebAssembly 是一个什么样的新技术?》
顺着这个方向,走在行业前沿的人做出了 WebAssembly。它可以由高级语言如 C/C++/Rust 静态编译得到,可直接在浏览器中执行。得益于它已经把程序静态编译成了二进制的指令码,理论上 Wasm 的最高执行速度能够达到 JS 的 20+ 倍,这能够赋予 Web 胜任一些计算密集型任务的能力。
换言之,这项技术的推行可以让 Web 得到之前开发者们想都不敢想的原生级性能,很多复杂、高强度、密集的计算可以从服务端转移到 Web 上执行,不再需要服务器去负担这些计算任务。
像上文笔者有提到的人工智能模型,它完全就可以不需要再用 JS 去实现,而是转成这种更高性能的 Wasm 向前端开发者提供框架,提供执行 AI 模型的能力,使其在能够被灵活使用的同时也能够保持相当高的性能。

从理念上来看,WebAssembly 真的不是什么很新鲜的东西,因为在这之前行业内并不是没有人想这么做,Java Applet 和 Silverlight 其实方向和 WebAssembly 是类似的,不过很遗憾的是这两个解决方案都生不逢时,最后被时代的洪流淹没。
相较于 Java Applet 和 Silverlight,由于 WebAssembly 刚好赶上了人工智能、物联网、区块链的浪潮,时代对于「计算」的需求越来越高,所以它也就自然而然得到了开发者和行业顶层那些决策者们的支持。
早期的 WebAssembly 是不能直接操作 DOM 的,也就是网页上的元素,但在现在的 WebAssembly 中,它拥有了直接操作 DOM 的能力
换言之,有很多业务逻辑是可以直接被封装到 Wasm 中以更高的性能表现去执行,这是 WebAssembly 很可能会掀起变革的一个点,尤其是在现在桌面端有很多应用已经抛弃原生转向 Web 的情况下。
很多前端程序员在看到这一点的时候心中多少会产生一些焦虑,因为 Wasm 淘汰 JavaScript 的可能是存在的。
不过在笔者看来,JavaScript 在未来很长的一段时间内仍然还有市场,所有的逻辑不可能都被 WebAssembly 接管,就像现在大型移动端 App 上所有的页面不都是原生的一样。
JavaScript 和浏览器的契合程度,操作 DOM 的方便性,以及它本身的灵活程度都是 Wasm 所不能达到的,即使 Wasm 在未来能够大火,成为主流的技术,JavaScript 也不会彻底出局,甚至连 jQuery 仍然都可能还有大把的程序员在用,后端也不可能就这么把前端给直接统一了。
但这并不意味着前端开发的工作和流程不会有任何的改变,最大的可能是未来浏览器很多一些底层的扩展、依赖等可能会转变为 Wasm,而表层的所有逻辑,所有和 DOM 直接交互的操作还是使用 JavaScript。
如果 Wasm 真的有这么大的魅力,那么这将是未来非常可能的一个发展结果。
Wasm 官方把「安全」作为了这项技术的一个特色,Wasm 会在一个沙箱环境中执行,它的执行环境可以和 JavaScript 的虚拟机独立开,也可以直接运行在 JavaScript 的虚拟机中。
考虑到它是直接嵌入到 Web 中的东西,所以它也会严格遵守同源策略和浏览器的各种安全策略。
在笔者看来,对于 Wasm 的安全性笔者是比较担忧的,尤其是它现在已经作为一个 1.0 正式版本加入到浏览器中的情况下,由于 Wasm 是编译好的二进制指令码,它不像脚本一样更容易被识别、拦截,而且由于 Wasm 能够做的事情远比 JavaScript 多,所以像利用 Wasm 做的恶意挖矿,甚至是一些危害程度更高的程序可能会更加泛滥,而且想要逆向它、分析它难度会变得更大。
相较于更加透明的 JavaScript,笔者对 Wasm 的安全性并不持乐观态度。
《WebAssembly 是一个什么样的新技术?》

结合 PWA 和 Chrome OS 的一些概念,以及未来前端可能的发展方向,Wasm 的出现无非是为了以下这几点铺路的:
1、基于 Web 的 AR、VR 应用,由于 AR、VR 非常吃计算,所以他们不可能只局限于浏览器、局限于 JS 引擎这样一套东西来跑,它们需要高性能的解决方案。
2、超大型复杂 Web 应用,综合利用 Wasm、WebGL 来实现各种复杂功能。
3、IoT(物联网)。其实现在 IoT 领域并不是特别好做开发,门槛较高、难度较大,嵌入式开发的很多深度知识已经够很多程序员喝一壶的了,这也正是为什么在算力越来越不是问题的今天,像华为开始考虑直接用 JavaScript 来给物联网设备写逻辑的一个原因。如果 Wasm 这个技术发展得好,那么前端未来可以大举入驻 IoT,直接在 Web 的层面来实现各种各样的功能与交互。
随着交互的形式越来越多样化,以及未来 Serverless 可能会引起的变革,Wasm 确实是有机会重新定义前端的,至少它可以让现在的 Web 达到一个前所未有的高度。
在国内,这样的新技术目前来说还是非常小众的,就连 TypeScript 都还没能在国内互联网业界得到一个非常可观的普及,换言之,如果你现在正在接触前端,你还有比较多的时间去接触和了解这些新生的技术,并且抢在它火之前把握先机。
毕竟现在 Wasm 还只是 1.0,刚刚成为国际网络标准组织万维网联盟(W3C)的一个开放标准,未来的机会会非常多。请各位保持关注。
点赞