WebAssembly技术实践
文章目录
- 知识学习
- 优点
- 开启本地临时服务器
- 方式一、命令安装
- 方式二、直接在vscode的插件
- 测试程序
- 异常处理
最近在看WebAssembly相关的知识，在本地运行，记录下来，方便备查。
知识学习
WebAssembly是一种高性能二进制格式、用于在各种现代硬件上快速运行，与web生态系统无缝集成。2019年12月5日，其正式成为W3C标准，web的第四种语言（HTML、CSS、JavaScript）。
WebAssembly 使用费JavaScript编程语言编写代码并在浏览器上运行的技术方案，本质是一种新的字节码格式。
优点
文件加载：体积更小，下载速度更快
编译和优化：在文件推送到服务器前已经进行更多优化
执行：更接近机器码，执行速度更快
垃圾回收：手动控制，不直接支持垃圾回收，比自动垃圾回收效率高
安全：可以放hash和签名等。
在浏览器中已经集成，可在console界面，直接调用 WebAssembly
开启本地临时服务器
两种安装方式，第一种是执行安装命令，第二种是在vscode里中直接安装 live server 插件。
//安装
npm install live-server -g
// 开启
live-server --port=2222
方式一、命令安装
使用 npm install 命令
方式二、直接在vscode的插件
在html文件右键 -> Open with Live Server 即用live server 打开，如下图所示。
测试程序
以斐波那契数列打印程序为例，测试WebAssembly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wifth=device-width,initial-scale=1.0">
<title>测试</title>
</head>
<body>
<script>
function fib(x){
if(x<=0) return 0;
if(x<= 2) return 1;
return fib(x-1) + fib(x-2);
}
console.time("测试斐波那契数列开始-速度");
var ret = fib(40);
console.time("测试斐波那契数列结束-速度");
</script>
</body>
</html>
打开服务器运行
异常处理
1、运行live-server报错，GET /favicon.ico 404
处理方案：
可复制图片，重命名为 favicon.ico，放到项目的根目录即可。