1. Python技术站首页
  2. 其他
  3. JavaScript

WebAssembly初尝试

• JavaScript

前言

  • 之前老是听别人提到WebAssembly这个词，一直对其比较模糊，不能理解是个啥东西，后来自己实践了一下，发现其实就是一种提高代码性能的手段。

简介

  • WebAssembly 是一种运行在现代网络浏览器中的新型代码，并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C++和 Rust 等低级源语言提供一个高效的编译目标。（解释来自MDN）
  • 通俗一点来讲，就是利用一些C、C++、Rust等偏底层的一些语言去实现部分功能并编译成二进制文件然后暴露给第三方平台（可能是浏览器端，也可能是服务端，还有可能是客户端），可以丰富和优化相关的应用。
  • 当然了，其实也有类似asm.js这种非底层语言去实现，但是它编译后的二进制文件减少了编译的过程，其实也是可以提高代码的性能。

开始尝试

准备工作

开始

  • 使用上面安装好的wasm-pack新建一个空项目，wasm-pack new test-webassembly。
  • 查看目录结构

    test-webassembly

    src

    lib.rc // 主入口
    utils.rs // 依赖的工具方法

    tests

    web.rs // 测试文件

    .appveyor.yml // 项目的前置依赖配置

    .gitignore // git忽略的文件配置

    .travis.yml // 该项目的CI环境配置文件

    cargo.toml // 该项目的配置文件，类似package.json

    README.md // 解释文件

重点文件分析

  • lib.rs，默认自带的这个文件只实现了一个greet方法，并暴露给了浏览器端，里面调用了alert方法。 
    use wasm_bindgen::prelude::*; // 引入wasm_bindgen::prelude下所有的类和方法

#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; // 一般不需要用，可以选择注释

#[wasm_bindgen]
extern {
    fn alert(s: &str); // 表示第三方环境可以直接用的方法定义，编译的时候会直接去调用第三方环境中的同名方法
}

#[wasm_bindgen] // 类似ts中的装饰器，打上这个标签，表示是需要与第三方环境去交互的，通俗一点，就是这个地方会被打包到第三方环境中。
pub fn greet() {
    alert("Hello, test-webassembly!");
}
  • Cargo.toml，这个文件主要就是一些项目配置信息了。 
    [package]
name = "test-webassembly" // 包名
version = "0.1.0" // 包版本
authors = ["xxx"] // 作者名
edition = "2018" // rust版本

[lib] // target设置，类似webpack种的target，将其打包成什么样的包
crate-type = ["cdylib", "rlib"] // 分别代表动态系统库和rust静态库

[features] // 用来条件编译
default = ["console_error_panic_hook"] // 这个可以删掉不需要

[dependencies]
wasm-bindgen = "0.2.63" // 这个就是主要的处理rust代码转化成webassembly的包

# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
# console_error_panic_hook = { version = "0.1.6", optional = true } 这个其实如果不是特别需要也可以不用

# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
# wee_alloc = { version = "0.4.5", optional = true } 这个一般用不上，注释掉就可以

[dev-dependencies]
wasm-bindgen-test = "0.3.13" // 用来测试的包，自己写一般可以不用

[profile.release]
# Tell `rustc` to optimize for small code size.
opt-level = "s"

改造

接下来实现一个简单的图片处理工具，帮助web端更快的处理图片内容。

  1. 会用到image这个rust包。所以先改造它的Cargo.toml。
[dependencies]
wasm-bindgen = "0.2.63"
// 在之前的dependencies下面添加image包
image = "0.24.6"
  1. 就以处理图片的其中内置的一个灰度方法来看一下。接下来改造lib.rs文件。
// 新增一个灰度方法，接受一个字节类型的集合，返回一个新的字节类型的集合
#[wasm_bindgen]
pub fn gray(_array: &mut [u8]) -> Vec<u8> {
    let mut img = image::load_from_memory(_array).unwrap(); // 将传入的u8集合转化成一个image对象
    img = img.grayscale(); // 调用第三方包的灰度方法得到新的图片
    let mut bytes: Vec<u8> = Vec::new(); // 定义一个新的u8集合
    img.write_to(&mut Cursor::new(&mut bytes), image::ImageOutputFormat::Png).unwrap(); // 将变换后的image转化成新的u8集合
    bytes // 将u8集合作为返回值抛出
}
  1. 运行命令wasm-pack build --release --target web，将rust文件打包成目标为web项目的可用二进制文件以及加载的js文件。可以看到项目多了一个pkg文件夹

    pkg

    .gitignore
    package.json
    README.md
    test_webassembly_bg.wasm // 二进制文件
    test_webassembly_bg.wasm.d.ts
    test_webassembly.d.ts
    test_webassembly.js // 这个就是加载这个二进制的文件

// test_webassembly.js这个文件主要看几个重点地方，其实不看也行，这个地方wasm-pack已经帮你处理好了，基本只需要学会用就行
// 加载二进制后的处理，返回暴露出的模块的实例
async function load(module, imports) {
    if (typeof Response === 'function' && module instanceof Response) {
      // 在支持instantiateStreaming的情况下，优先使用instantiateStreaming加载对应的二进制文件
        if (typeof WebAssembly.instantiateStreaming === 'function') {
            try {
                return await WebAssembly.instantiateStreaming(module, imports); 
            } catch (e) {
                if (module.headers.get('Content-Type') != 'application/wasm') {
                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
                } else {
                    throw e;
                }
            }
        }

        const bytes = await module.arrayBuffer();
        return await WebAssembly.instantiate(bytes, imports);

    } else {
      // 不支持的时候，就使用instantiate文件来加载
        const instance = await WebAssembly.instantiate(module, imports);

        if (instance instanceof WebAssembly.Instance) {
            return { instance, module };

        } else {
            return instance;
        }
    }
}
// 针对已经解析完的实例，做一些初始化操作，抛出模块实例的exports
function finalizeInit(instance, module) {
    wasm = instance.exports;
    init.__wbindgen_wasm_module = module;
    cachedInt32Memory0 = null;
    cachedUint8Memory0 = null;


    return wasm;
}
// 文件暴露的入口
async function init(input) {
    if (typeof input === 'undefined') {
        input = new URL('test_webassembly_bg.wasm', import.meta.url); // 默认的二进制文件地址
    }
    const imports = getImports();

    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
        input = fetch(input); // 加载对应的二进制文件
    }

    initMemory(imports); // 这个就是之前上面申请空间的，可以注释掉的，不用看

    const { instance, module } = await load(await input, imports); // 调用webassembly的api去加载二进制文件

    return finalizeInit(instance, module); // 得到模块中抛出的exports
}

在html中使用，新建一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" multiple="false" id="file">

    <div id="box"></div>
    <div>
        <button id="gray-btn">灰度</button>
    </div>
    <div id="target"></div>

    <script type="module">
        import init, { gray } from './pkg/test_webassembly.js';

        await init();

        const file = document.getElementById('file');
        const grayBtn = document.getElementById('gray-btn');
        let current = null;
        let uint8Array = [];
        file.addEventListener('change', (e) => {
            current = e.target.files[0];
            var reader = new FileReader(); 
            reader.readAsDataURL(current);
            reader.onload = function() {
                const img = new Image();
                img.src = this.result;
                document.querySelector('#box').appendChild(img);
            }
        });
        grayBtn.addEventListener('click', () => {
            var reader = new FileReader();
            reader.readAsArrayBuffer(current);
            reader.onload = function () {
                uint8Array = new Uint8Array(this.result);
                let newUnit8Array = gray(uint8Array); // 调用webassembly提供的灰度方法获取到灰度之后的结果

                const img = new Image();
                let blob = new Blob([newUnit8Array], { type: 'image/png' });
                img.src = window.URL.createObjectURL(blob);
                document.querySelector('#target').appendChild(img);
            }
        })
    </script>
</body>
</html>

使用npx http-server --port 3000启动静态服务器，因为webassembly是不支持本地的文件的，下面就是最终效果，先选择一张图片，之后点击灰度就能快速得到一张灰度的图片

WebAssembly初尝试

小结

  • WebAssembly是一个很有意思的技术方向，它为web应用提供了很多可能，图片处理，视频解析、加密等等一些复杂的场景都可以变得更轻便化。

原文链接：https://www.cnblogs.com/aloneMing/p/17318823.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：WebAssembly初尝试 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年4月17日
下一篇 2023年4月17日

相关文章

  • Move.js入门

    Move.js入门攻略 什么是Move.js Move.js是一个轻量级的JavaScript动画库，用于实现Web页面中的动画效果。它支持常用的CSS动画属性以及自定义路径和缓动效果，同时具有跨浏览器兼容性和高性能特点。 安装Move.js 可以通过以下两种方式来安装Move.js： 从官方网站下载move.min.js文件并引入到HTML文件中： &lt…

    JavaScript 2023年6月10日
    00

  • javascript 事件加载与预加载

    JavaScript 事件加载及预加载是前端开发中非常重要的一环。在页面的交互和性能优化方面起着至关重要的作用。接下来，我将为你讲解一下 JavaScript 事件加载与预加载的完整攻略。 什么是 JavaScript 事件加载？ 在简单介绍 JavaScript 事件加载之前，先简单了解一下浏览器渲染页面的过程。 解析 HTML 结构 加载 CSS 加载 …

    JavaScript 2023年6月10日
    00

  • 浅谈js函数中的实例对象、类对象、局部变量(局部函数)

    下面是我为你准备的关于“浅谈js函数中的实例对象、类对象、局部变量(局部函数)”的完整攻略。 什么是实例对象？ 在 JavaScript 中，实例对象指使用 new 关键字创建的对象。当我们用构造函数创建一个新对象时，对象被实例化为该构造函数的一个实例。该实例对象从构造函数继承了属性和方法，可以独立地操作其属性和方法，而不会影响其他实例对象。 下面是一个示例…

    JavaScript 2023年5月27日
    00

  • JavaScript中调用函数的4种方式代码实例

    让我来详细讲解一下“JavaScript中调用函数的4种方式代码实例”。 1. 直接调用函数 直接调用函数指的是使用函数名，后跟一对圆括号，不带任何修饰符或执行环境调用函数。 示例： function sayHello() { console.log("Hello！"); } sayHello(); 上述示例中我们定义了一个函数 sayH…

    JavaScript 2023年5月27日
    00

  • JavaScript 对象创建的3种方法

    JavaScript对象创建一共有3种方式，它们分别是对象字面量、构造函数和Object.create()方法。 对象字面量 对象字面量是用花括号{}创建一个新对象的方式，使用最为广泛，也是最简单的一种。 示例一： // 创建一个对象字面量 const person = { name: "张三", age: 20, gender: &qu…

    JavaScript 2023年5月27日
    00

  • layui表格 返回的数据状态异常的解决方法

    以下是 “layui表格 返回的数据状态异常的解决方法” 的完整攻略。 问题描述 在进行 layui 数据表格的开发时，当接收后端返回的数据时异常，可能会出现以下问题： 列表页面显示空白； 主键无法显示或者是 NaN。 解决办法 当我们使用 layui 数据表格时，通常会涉及到后端返回 JSON 格式的数据。layui 表格在接收后端返回的数据时，必须满足以…

    JavaScript 2023年5月28日
    00

  • 9个JavaScript日常开发小技巧

    当然！以下是“9个JavaScript日常开发小技巧”的完整攻略： 1. 使用console.table()格式化输出数组/对象 在日常开发中，我们常常需要输出数组/对象信息以便于调试。但是，如果直接使用console.log()输出，往往难以看清楚其中结构和数据。这时候，我们可以使用console.table()方法，可以使用表格的形式格式化输出数组/对象…

    JavaScript 2023年5月18日
    00

  • JavaScript中的this基本问题实例小结

    当在JavaScript语言中使用关键字this时，它指向的是当前执行代码的对象。而谁才是当前执行代码的对象，这是本文要探讨的关键问题。 1. 全局上下文中的this 在全局上下文中，this关键字指向的是全局对象。在浏览器中，全局对象是window对象，故在浏览器中，this指向window对象。 console.log(this === window);…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部