第七期《WebAssembly给前端带来了什么》

Posted 2021-04-25 前端趣闻

疑问

1.WebAssembly是什么？

2.WebAssembly解决什么问题？

3.应用在那些方面？

4.还存在什么问题？

5.给前端带来了什么？

6.浏览器支持情况？

1.WebAssembly是什么？

WebAssembly 是一种可以使用非 javascript 编程语言编写代码并且能在浏览器上运行的技术方案。

2.WebAssembly解决什么问题？

突破性能的瓶颈

这里不涉及过多技术性的问题。我们知道，在今天的浏览器中，JavaScript是在虚拟机（VM）中执行的，该虚拟机能够最大化地优化代码并压榨每一丝的性能，这也使得JavaScript称为速度最快的动态语言之一。但尽管如此，它还是无法与原生的C/C++代码相媲美。所以，WebAssembly就出现了。

Wasm同样在JavaScript虚拟机中运行，但是它表现得更好。两者可以自由交互、互不排斥，这样你就同时拥有了两者最大的优势——JavaScript巨大的生态系统和有好的语法，WebAssembly接近原生的表现性能。

大多数程序员会选择使用C语言来编写WebAssembly模块，并将其编译成.wasm文件。这些.wasm文件并不能直接被浏览器识别，所以它们需要一种称为JavaScript胶接代码（glue code，用于连接相互不兼容的软件组件，详见：http://whatis.techtarget.com/definition/glue-code）的东西来加载。

3.应用在那些方面？

1.数据加密

2.网页游戏

3.密集计算

4.还存在什么问题？

1.还是浏览器的兼容问题。

2.WebAssembly是没有自动垃圾回收的（需要手动处理）

3.api还不稳定

5.给前端带来了什么？

wasm是个好东西，但不会取代js。

按官方的说法，wasm不是javascript的替代品，它与javascript一同工作，是对web平台的补充。所以有了wasm的js api。可以把wasm看成是当成js的加速器。

wasm还不支持访问dom，在未来，有计划让wasm调用javascript，以此调用js支持的api，因为wasm无法调用web的api。当wasm可以调用javascript的时候，辅以js胶水代码（帮助wasm调用webapi），让wasm甚至可以脱离javascript（除了加载wasm和加载胶水js依赖），就完成整个web应用。可能直接在c++中实现webapi的成本太大，如果每种语言都实现webapi，就不如去实现胶水。

显然，这种机制的出现可以让c++（或者其他语言）直接实现web应用，而实际上语言上的瓶颈对比dom操作的瓶颈来说，还是微不足道的。

wasm实现了c++中的 SDL, OpenGL, OpenAL, 部分的 POSIX。代码最终还是要跑在客户端，所以可见很多功能实际上是被阉割的，好在OpenGL可以在canvas中运行，所以我觉得，wasm的出现，对于h5游戏的开发会有提升。

Guess Future 1.h5游戏搭配wasm会有很大的潜力，甚至搭配pwa，让h5游戏可以处理更重的情景。

2.对js的冲击，按照现在js的份额（高），js的灵活性（高），以及目前大部分js web应用的瓶颈问题（没明显瓶颈），时下的情况不足以让团队投入精力去搞这件事。

3.企业级产品或许可以投入精英人力搞基于wasm的应用，可以提高企业级web应用的体验。

4.c端业务以及活动需要的敏捷度、人力情况以及产品瓶颈都不允许团队大力搞wasm。（招个靠谱的js已经很难了）。

6. 浏览器支持情况？

主流浏览器新版本中基本开始支持WebAssembly

7. 总结

WebAssembly 比 JavaScript 执行更快是因为：

1.文件抓取阶段，WebAssembly 比 JavaScript 抓取文件更快。即使 JavaScript 进行了压缩，WebAssembly 文件的体积也比 JavaScript 更小；

2.解析阶段，WebAssembly 的解码时间比 JavaScript 的解析时间更短；

3.编译和优化阶段，WebAssembly 更具优势，因为 WebAssembly 的代码更接近机器码，而 JavaScript 要先通过服务器端进行代码优化。

4.重优化阶段，WebAssembly 不会发生重优化现象。而 JS 引擎的优化假设则可能会发生“抛弃优化代码<->重优化”现象。

5.执行阶段，WebAssembly 更快是因为开发人员不需要懂太多的编译器技巧，而这在 JavaScript 中是需要的。WebAssembly 代码也更适合生成机器执行效率更高的指令。

6.垃圾回收阶段，WebAssembly 垃圾回收都是手动控制的，效率比自动回收更高。

参考资料：

1.WebAssembly 的出现是不是意味着 Javascript 要完？

2.WebAssembly 实践：如何写代码

3.让C代码在浏览器中运行——WebAssembly入门介绍