纵论WebAssembly.js在性能逆境下的召唤强援

webassembly的作用 

webassembly是一种底层的二进制数据格式和一套可以操作这种数据的JS接口的统称。我们可以认为webassembly的范畴里包含两部分

• wasm: 一种体积小、加载快并且可以在Web浏览器端运行的底层二进制数据格式，并且可以由C++等语言转化而来

• webassembly的操作接口：例如WebAssembly.instantiate就可以将一份wasm文件编译输出为JS能够直接调用的模块对象 

打破性能瓶颈

一直以来，我们都比较关心JS的运行速度问题，V8引擎解决了绝大多数情况下遇到的问题，但是少数情况下我们进行大量本地运算的时候，仍然可能遇到性能瓶颈，需要优化，这个时候webassembly的作用就凸现出来了 

webassembly项目的编码流程

• 性能无强关的部分用JS编写

• 性能强相关的，并且需要大量本地运算的部分，先用C++/Rust编写，通过命令行工具转化为wasm代码后让JS调用

 

 

 

 

玄学的webassembly性能提升

webassembly相对于纯JS的性能提升是随具体场景和条件的变化而变化的 

当您使用WebAssembly时，不要总是期望得到20倍的加速。您可能只得到2倍的加速或者20%的加速。或者，如果您在内存中加载非常大的文件时，或者需要在WebAssembly和JavaScript之间进行大量通信时，那么速度可能会变慢。 作者：Robert 《Level Up With WebAssembly》一书的作者，同时也是一位生物信息学软件工程师

参考链接

在上面的文章的作者Robert，做了这样一个实验，他使用 seqtk，一个用C编写的评估DNA测序数据质量(通常用于操作这些数据文件)的软件，去对比webassembly相对于普通JS带来的性能提升

 

一.Robert的对比测试结果

下面是他的测试结果

• 第一步：运行序列分析软件seqtk，对比性能：9倍提升

• 第二步：删除不必要的printf输出，对比性能：13倍提升

• 第三步：去除函数的重复调用后，对比性能：21倍提升

当然，上面的概括也许太过简略，大家可以看看Robert的原文以得到更为详细的认识

 

二.运行Fibonacci函数的性能对比

有位博主，对比了运行递归无优化的Fibonacci函数的时候，WebAssembly版本和原生JavaScript版本的性能差距，下图是这两个函数在值是45、48、50的时候的性能对比。

 

文章链接 作者：detectiveHLH

 

三.IVweb的的性能对比测试

IVWeb团队对长度不同的文本进行加密处理，对比webassembly相对于纯JS的性能提升，结果发现

• 对于长文本（2M文本） 的密集计算，webassembly的性能提升很大

• 对于短文本（"IVWE