最近在看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,放到项目的根目录即可。