当前位置: 首页 > article >正文

webAssembly初探

学习地址: https://www.bilibili.com/video/BV13i4y1n74s/?spm_id_from=333.337.search-card.all.click&vd_source=a6f7db332f104aff6fadf5b3542e5875

什么是WebAssembly

官网:
在这里插入图片描述

在这里插入图片描述

MDN

在这里插入图片描述

简单说:webAssembly是一种可使用非js编程语言编写的代码(c++,go)并且能在浏览器上运行的技术方案,实际上,是一种新的字节码格式。(可以使用其他语言,生成二进制,在浏览器中运行)

在这里插入图片描述

优势

在这里插入图片描述

demo

用c编写斐波序列

#ifdef __cplusplus
extern "C" {
#endif

int fit(int n) {
    if (n <= 1) {
        return n;
    } else {
        return fit(n-1) + fit(n-2);
    }
}

#ifdef __cplusplus
}
#endif

然后用emcc转为wasm文件,
sudo emcc ../hello.c -o test4.js -s WASM=1 -s MODULARIZE=1 -s EXPORTED_FUNCTIONS="['_fit']"
指定导出函数为fit
然后在html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fib(x) {
            if (x <= 1) {
                return x
            }
            return fib(x - 1) + fib(x - 2)
        }
        console.log('===');
        const start = Date.now()
        fib(40);
        console.log('js结束:', Date.now() - start, 'ms');


        fetch('./test4.wasm').then(res => {
            return res.arrayBuffer()
        }).then(bytes => {
            return WebAssembly.instantiate(bytes)
        }).then(results => {

            const start = Date.now()
            const fit = results.instance.exports.fit;
            fit(40);
            console.log('wasm 结束:', Date.now() - start, 'ms');

        })
    </script>
</body>

</html>

先用js实现斐波序列,运行40,再引入wasm,使用其导出的fit函数,运行fit(40),分别计算花费时间。

测试结果:

在这里插入图片描述

相差并不是很大。

使用wasm

步骤

  • 1 编写其他语言的代码,
  • 2 编译为wasm代码,
  • 3 在浏览器请求,直接使用,如上。

浏览器提供了一个api,WebAssembly

加载wasm模块

为了在js中使用wasm,在编译/实例化之前,需要讲模块放入内存。
上述我们用的是res.arrayBuffer(),将字节码转为了ArrayBuffer

fetch("module.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((results) => {
    // 使用 results 做些什么!
  });

浏览器目前有个WebAssembly.instantiateStreaming,可以直接在网络的原始字节流上执行操作。如

WebAssembly.instantiateStreaming(fetch("simple.wasm"), importObject).then(
  (results) => {
    // 使用 results 做些什么!
  },
);

改用下面的写法更加方便
在这里插入图片描述
在results中有个instance,可以理解成wasm的实例,再然后通过exports可以拿到导出的属性。如上,通过exporst拿到导出的fit函数。
然后直接执行。


http://www.kler.cn/a/371441.html

相关文章:

  • 开源项目-投票管理系统
  • Pytorch(一)
  • 从零开始的 vue项目部署到服务器详细步骤(vue项目build打包+nginx部署+配置ssl证书)
  • WordPress与WP Engine:关键事件时间线
  • Flutter Image和Text图文组件实战案例
  • <十六>Ceph mon 运维
  • Python BeautifulSoup 实战案例:抓取网页并提取数据
  • 【C++】智能指针:解决内存泄漏、悬空指针等问题
  • 【Unity基础】初识UI Toolkit - 编辑器UI
  • 简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
  • PyTorch模块介绍
  • 【IC每日一题】
  • 【架构-36】常见的各类锁的特点
  • C++学习:类和对象(二)
  • [ 问题解决篇 ] 解决远程桌面安全登录框的问题
  • 3个模型的交互式多模型IMM,基于EKF的目标跟踪实例(附MATLAB代码)
  • java web调试时清理当前网址的缓存
  • 3.1.3 虚存页面的映射
  • Java学习笔记(九)
  • 云原生后端:现代应用架构的核心力量
  • JavaWeb——Web入门(2/9)-SpringBootWeb:快速入门(入门程序需求、开发步骤、项目相关文件说明、小结)
  • 【Linux网络编程】 --- Linux权限理解
  • ICM20948 DMP代码详解(106)
  • 四、Hadoop 命令高级用法深度剖析
  • 前端之html(二)加入css开篇(一)
  • LeetCode72:编辑距离