随着 Web 技术的不断发展, WebAssembly 非常有技术前景。尽管很多公司已经尝试并落地 WebAssembly ,但仍有很多公司及开发者处于观望状态,他们并不了解如何将 WebAssembly 融入到现有的项目中。coupang 优先尝试 WebAssembly 并落地 ,将其融入到自己的项目中 ,目前对 WebAssembly 的探索已经小有成就。
在即将于 12 月 20~21 日举行的 GMTC 全球大前端技术大会 (深圳站) 上,coupang 高级软件开发工程师赵洋老师将分享《WebAssembly 在性能及加密场景的深度探索》。届时,他将通过 coupang 实际落地的两个项目,分享这两个项目不断演进的过程以及未来的发展方向,深入探讨 WebAssembly 的性能及保密相关的优势。通过分享让大家有所启发,并能够逐步引入 WebAssembly 技术提升自身的开发效率和产品体验。以下是 InfoQ 对赵洋老师的会前采访。
InfoQ: 请您简单介绍下自己以及自己所负责的工作。
赵洋: 我个人职业经历比较丰富,曾在百度、腾讯担任过前端工程师,也在全民直播这样的创业公司担任过前端开发经理;目前在 coupang 的 CMG 团队担任高级软件开发工程师。
coupang 是一个非常具有前景但很低调的独角兽公司,主要从事韩国电商相关的业务,目前也在积极发展国内商家的入驻。我所属的 CMG 在公司内部是一个非常年轻的团队,目前主要负责广告媒体平台的相关工作。coupang 非常崇尚 Work Life Balance,并且鼓励个人对外发声和贡献社区,因此我个人除了在公司团队内部贡献力量外,也时常编写一些围绕 WebAssembly 相关的开源项目,包括 SecurityWorker、WXInlinePlayer 等,同时也会参与一些著名开源项目,为之贡献代码,比如 ShadowNode、Vue 等。
InfoQ: 1995 年 JavaScript 诞生,2008 年浏览器加入即时编译器 JIT,JavaScript 的运行速度快了 10 倍。有人说,现在的 WebAssembly 是另一个转折点,您怎么看?
赵洋: 相较于 JavaScript 而言,WebAssembly 的性能提升是我们感受最明显的部分,在我们的业务场景测试中,对于 CPU 密集相关的应用来说,WebAssembly 确实有非常巨大的提升。但由于我们的大部分前端项目主要面向 UI 场景,在这个场景中 WebAssembly 与 JavaScript 需要频繁的相互调用并交换数据,导致通信成本比计算成本要高得多。因此,如何更好地利用 WebAssembly 仍然需要因地制宜,根据自己的场景来测试和选择。从技术趋势来看,随着 5G 技术的出现和硬件性能的提升,我们可以预见,Web 平台能够承担的复杂工作会越来越多,尽管 V8 每年仍会提升 JavaScript 的性能,但这种提升逐渐变缓,JavaScript 已经慢慢变为整个 Web 平台发展的瓶颈,所以 WebAssembly 的出现无疑是非常让人兴奋的。这并不是说 WebAssembly 会取代 JavaScript,前端工程师们也无须担心这种情况的发生,我觉得两种技术应该会不断融合,最终为 Web 创造更多可能性。
InfoQ:coupang 当初引入该技术的契机是什么?
赵洋: 我们的大部分前端项目面向 UI 场景, WebAssembly 与 JavaScript 需要频繁地相互调用并交换数据,我们主要使用 JavaScript 编写相关代码,然后采用混淆等方式增大代码被破译的难度,但从数据上看,效果并不是很好。
再加上 C/C++ 代码由风控团队编写和维护,他们能够很方便地编译到 iOS 和 Android 端;对于 Web 端来说,我们需要不断地同步他们的代码,并将 C/C++ 代码改写为 JavaScript ,由于风控的策略相关代码更新非常频繁和琐碎,这样不但会降低工作效率,还加大了开发成本。
所以我们引入了 WebAssembly ,这样就可以更好地复用 C/C++ 代码,其中包括人机识别的日志内容加密、活动页面的请求加密等,不仅跨部门跨团队能有效沟通提升工作效率,还能减少开发成本。
InfoQ: 未来,您认为 WebAssembly 将会如何发展?会有哪些典型的应用场景?
赵洋: 相对于 WebAssembly 更多被提及的性能,我觉得大家还应该把目光放在代码复用上。现在,越来越多的平台和语言开始支持 WebAssembly,我相信在未来也会有更多的新技术成果出现在 Web 平台上,从而使得 Web 具有更多的可能性。目前 WASI(WebAssembly System Interface)的出现已经逐步让 WebAssembly 的使用场景更为宽广。通过 WebAssembly 对其他平台、语言的代码进行更好的复用,我觉得这是非常重要且正确的路线。
InfoQ: WebAssembly 在性能及加密场景的探索中遇到的最大的难点是什么?团队是解决的?
赵洋: 在我们的实践中 ,WebAssembly 在性能上遇到的最大难点是,目前优化手段十分有限。例如,其多线程相关的支持还不太可用,也不支持汇编代码编译、AVX 指令等,但这些问题在之后的版本中应该会逐渐解决。而在加密场景中,我们目前仍然没有解决的问题是, WebAssembly 编译后 Codebase 过大。后期我们会和风控团队合作,逐步精简目前的库代码,使得 Codebase 进一步减少。目前风控日志加密这块收益比较大,过滤了 Web 端大量不专业的羊毛党用户,降低了公司的损失。
InfoQ: 京东、淘宝在前端也有基于 WebAssembly 的探索,coupang 在 WebAssembly 的应用上与之相比,有何异同?
赵洋: 相比于京东或淘宝来说,coupang 还是非常年轻的。因此,在技术以及产品上我们也在不断学习两家的优点,并对好的部分做一些内化和提升。同时,coupang 在 WebAssembly 的应用会更加直接面向用户,而不仅仅是内部探索。当然,目前 WebAssembly 在 coupang 的使用主要还是针对一些小的场景点进行提升、优化,仍然有非常大的提升空间。
InfoQ: WebAssembly 也出现了一段时间,就技术本身而言我们更想知道您即将在 GMTC 分享的两个实践案例,可以简单介绍下吗?
赵洋: 这次分享,主要通过我开源的两个项目 WXInlinePlayer 和 SecurityWorker 来介绍自己对 WebAssembly 的一些理解和实践经验。
WXInlinePlayer 是一个通过 WebAssembly 解码 FLV 的播放器项目,主要是为了解决移动端 Web 播放器体验不一致的问题,相较于手淘、花椒以往使用 WebAssembly+FFmpeg 进行的技术探索而言,WXInlinePlayer 通过自己实现 I/O、解码、渲染层等,大幅度减小了播放器核心的代码大小,并且针对于直播场景添加了一些减少延迟及优化体验的策略。届时我将和大家分享 WXInlinePlayer 的架构及实现细节,并一起探讨未来 WXInlinePlayer 的一些可行的性能提升策略。
SecurityWorker 是一个类似于 WebWorker 的独立 VM,其中使用了 WebAssembly 和 Duktape,并且自己实现了一些 Opcode 的设计和实现。其主要场景是用来保护业务中核心的 JavaScript 通讯逻辑。其参考了 Google reCAPTCHA 以及 Native 端的一些代码保护手段(VMP),目前 SecurityWorker 这套技术稳定使用在 coupang 的 Web 的风控日志加密上。我会和大家详细介绍 SecurityWorker 的前世今生,以及未来的规划。
活动推荐
在即将到来的 GMTC 深圳 2019 上,赵洋老师还会具体分享到,如何更好地保护前端的核心代码?如何更好地适配 Mobile 端播放器?以及常规的代码保护方案、Google reCAPTCHA 所采用的方案调研、WebAssembly 的落地方案、各方案优劣势对比、如何结合自身的场景去提升性能、缩小生成体积、增强编码体验等。
除了赵洋老师的分享,本次 GMTC 全球大前端技术大会(深圳站)2019 我们还设置了小程序挑战与应对、音视频技术、Serverless 实践、前端测试与安全、大前端工程化、Flutter 实战、新兴编程语言、团队建设与管理等热门技术专场。
评论