[JavaScript知识库]webassembly调研

为什么WebAssembly不是JavaScript的终结者，而是它的“助推器”？

https://mp.weixin.qq.com/s/unBJycuMZZGKbJ1LT9vS0w

什么是webassembly

可移植、体积小、加载快的全新web格式（二进制），由主流的浏览器厂商组成的w3c社区置顶的新的规范

发展历史

1995 javascript诞生，解释性语言，实时编译，执行速度受限

2008 浏览器性能解决方案：JIT(即时编译)，展开论述JIT的原理，解释JIT对于弱类型失效

随着js的性能达到瓶颈，google\apple safari\microsoft edge\firefox共同参与基于asm.js的标准，即webassembly,；2015 webassembly首次发布，并可直接在浏览器中运行

2019 正式纳入web标准

webassembly影响

（带来的好处：大幅提高javascript的性能，安全性的体现？不需要使用插件提高速度；允许任何语言编译到AST tree;二进制存储）

工作原理

将javascript、c等静态语言编译成浏览器能够运行的wasm二进制文件（中间态），当浏览器加载wasm文件后编译为本地机器码后运行

为什么能提高当前的js的性能

正常的js：javascript源码=>抽象语法树（字节码）=> 编译优化 => 去优化 => 重新编译优化=> 执行

webassembly：源码 => 二进制码 => 机器码 => 执行

浏览器支持

ie不兼容怎么办：将通过polyfill腻子脚本转为javascript执行

实战（参考： https://blog.csdn.net/weixin_30477797/article/details/97874817）

环境准备

 1.初始化项目    npx asinit（类似express）

 2.安装包    npm i assemblyscript

 3.语言选择(其他语言参考：https://github.com/appcypher/awesome-wasm-langs)

js：使用assemblyscript（typescript的子集）编写样例，编译成wasm

 export function f(x: i32): i32 {
      return x<=1?1:f(x-1)+f(x-2)
   }

 4.编译

   asc assembly/index.ts

在html的js中引入（语法参考：https://webassembly.org/community/resources/）

fetch('optimized.wasm').then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes)
).then(result =>{
  console.time('wasm-fb');
  var start=performance.now();
  result.instance.exports.f(45);//wasm-fb: 8637.450927734375 ms
  console.log(performance.now() - start);
  console.timeEnd('wasm-fb');
}
);

性能比较

(！！！再确认计算结果)

40 
assembly-fb: 494.02ms 
js-fb: 833.369ms

45 
wasm-fb: 8637.450927734375 ms 
js-fb: 16764.12109375 ms

40.00
assembly-fb: 709.493ms
js-fb: 1.285s

45.00 
assembly-f_float: 8.962s 
js-fb_float: 14.322s

50.00 
assembly-f_float: 1:41.413 (m:ss.mmm) 
js-fb_float: 2:42.703 (m:ss.mmm)

assemblyscript如何与js互通?

总结

了解了webassembly加速的原理，但是性能的提升还需要进一步测试