WebAssembly技术实践

梦幻通灵

于 2024-09-01 23:10:28 发布

阅读量116

点赞数 2

分类专栏：前端开发数据处理文章标签： wasm 前端框架

本文链接：https://blog.csdn.net/u012190388/article/details/141757646

版权

数据处理同时被 2 个专栏收录

102 篇文章 5 订阅

订阅专栏

前端开发

24 篇文章 0 订阅

订阅专栏

文章目录

知识学习
- 优点
开启本地临时服务器
- 方式一、命令安装
- 方式二、直接在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>