WebAssembly在性能及加密场景的深度探索

作者 | 冉叶兰

嘉宾 | 赵洋

编辑 | 张之栋、王文婧

随着 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 实战、新兴编程语言、团队建设与管理等热门技术专场，目前大会 8 折购票最后一周，点击「阅读原文」了解大会日程。有任何问题欢迎联系票务鱼丸：13269078023（微信同号）