精华内容
下载资源
问答
  • WebAssembly

    2021-01-06 18:58:28
    <p>I think it could be useful to compile bcrypt to WebAssembly. Benefits: <ul><li>Combine bcrypt for Node.js and bcryptjs, one universal binary for all popular JS engines</li><li>Remove requirement to...
  • webassembly

    2018-11-11 22:24:00
    为什么需要 WebAssembly 自从 JavaScript 诞生起到现在已经变成最流行的编程语言,这背后正是 Web 的发展所推动的。Web 应用变得更多更复杂,但这也渐渐暴露出了 JavaScript 的问题: 语法太灵活导致开发大型 ...

    为什么需要 WebAssembly

    自从 JavaScript 诞生起到现在已经变成最流行的编程语言,这背后正是 Web 的发展所推动的。Web 应用变得更多更复杂,但这也渐渐暴露出了 JavaScript 的问题:

    • 语法太灵活导致开发大型 Web 项目困难;
    • 性能不能满足一些场景的需要。

    针对以上两点缺陷,近年来出现了一些 JS 的代替语言,例如:

    • 微软的 TypeScript 通过为 JS 加入静态类型检查来改进 JS 松散的语法,提升代码健壮性;
    • 谷歌的 Dart 则是为浏览器引入新的虚拟机去直接运行 Dart 程序以提升性能;
    • 火狐的 asm.js 则是取 JS 的子集,JS 引擎针对 asm.js 做性能优化。

    以上尝试各有优缺点,其中:

    • TypeScript 只是解决了 JS 语法松散的问题,最后还是需要编译成 JS 去运行,对性能没有提升;
    • Dart 只能在 Chrome 预览版中运行,无主流浏览器支持,用 Dart 开发的人不多;
    • asm.js 语法太简单、有很大限制,开发效率低。

    三大浏览器巨头分别提出了自己的解决方案,互不兼容,这违背了 Web 的宗旨; 是技术的规范统一让 Web 走到了今天,因此形成一套新的规范去解决 JS 所面临的问题迫在眉睫。

    于是 WebAssembly 诞生了,WebAssembly 是一种新的字节码格式,主流浏览器都已经支持 WebAssembly。 和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升。 也就是说 WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行, 浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

    WebAssembly 原理

    要搞懂 WebAssembly 的原理,需要先搞懂计算机的运行原理。 电子计算机都是由电子元件组成,为了方便处理电子元件只存在开闭两种状态,对应着 0 和 1,也就是说计算机只认识 0 和 1,数据和逻辑都需要由 0 和 1 表示,也就是可以直接装载到计算机中运行的机器码。 机器码可读性极差,因此人们通过高级语言 C、C++、Rust、Go 等编写再编译成机器码。

    由于不同的计算机 CPU 架构不同,机器码标准也有所差别,常见的 CPU 架构包括 x86、AMD64、ARM, 因此在由高级编程语言编译成可自行代码时需要指定目标架构。

    WebAssembly 字节码是一种抹平了不同 CPU 架构的机器码,WebAssembly 字节码不能直接在任何一种 CPU 架构上运行, 但由于非常接近机器码,可以非常快的被翻译为对应架构的机器码,因此 WebAssembly 运行速度和机器码接近,这听上去非常像 Java 字节码。

    相对于 JS,WebAssembly 有如下优点:

    • 体积小:由于浏览器运行时只加载编译成的字节码,一样的逻辑比用字符串描述的 JS 文件体积要小很多;
    • 加载快:由于文件体积小,再加上无需解释执行,WebAssembly 能更快的加载并实例化,减少运行前的等待时间;
    • 兼容性问题少:WebAssembly 是非常底层的字节码规范,制订好后很少变动,就算以后发生变化,也只需在从高级语言编译成字节码过程中做兼容。可能出现兼容性问题的地方在于 JS 和 WebAssembly 桥接的 JS 接口。

    每个高级语言都去实现源码到不同平台的机器码的转换工作是重复的,高级语言只需要生成底层虚拟机(LLVM)认识的中间语言(LLVM IR),LLVM 能实现:

    • LLVM IR 到不同 CPU 架构机器码的生成;
    • 机器码编译时性能和大小优化。

    除此之外 LLVM 还实现了 LLVM IR 到 WebAssembly 字节码的编译功能,也就是说只要高级语言能转换成 LLVM IR,就能被编译成 WebAssembly 字节码,目前能编译成 WebAssembly 字节码的高级语言有:

    • AssemblyScript:语法和 TypeScript 一致,对前端来说学习成本低,为前端编写 WebAssembly 最佳选择;
    • c\c++:官方推荐的方式,详细使用见文档;
    • Rust:语法复杂、学习成本高,对前端来说可能会不适应。详细使用见文档;
    • Kotlin:语法和 Java、JS 相似,语言学习成本低,详细使用见文档;
    • Golang:语法简单学习成本低。但对 WebAssembly 的支持还处于未正式发布阶段,详细使用见文档

    通常负责把高级语言翻译到 LLVM IR 的部分叫做编译器前端,把 LLVM IR 编译成各架构 CPU 对应机器码的部分叫做编译器后端; 现在越来越多的高级编程语言选择 LLVM 作为后端,高级语言只需专注于如何提供开发效率更高的语法同时保持翻译到 LLVM IR 的程序执行性能。

    编写 WebAssembly

    AssemblyScript 初体验

    接下来详细介绍如何使用 AssemblyScript 来编写 WebAssembly,实现斐波那契序列的计算。 用 TypeScript 实现斐波那契序列计算的模块 f.ts 如下:

    1
    2
    3
    4
    5
    6
    export function f(x: i32): i32 {
        if (x === 1 || x === 2) {
            return 1;
        }
        return f(x - 1) + f(x - 2)
    }

    在按照 AssemblyScript 提供的安装教程成功安装后, 再通过

    asc f.ts -o f.wasm

    就能把以上代码编译成可运行的 WebAssembly 模块。

    为了加载并执行编译出的 f.wasm 模块,需要通过 JS 去加载并调用模块上的 f 函数,为此需要以下 JS 代码:

    1
    2
    3
    4
    5
    6
    fetch('f.wasm') // 网络加载 f.wasm 文件
        .then(res => res.arrayBuffer()) // 转成 ArrayBuffer
        .then(WebAssembly.instantiate) // 编译为当前 CPU 架构的机器码 + 实例化
        .then(mod => { // 调用模块实例上的 f 函数计算
        console.log(mod.instance.f(50));
        });

    以上代码中出现了一个新的内置类型 i32,这是 AssemblyScript 在 TypeScript 的基础上内置的类型。 AssemblyScript 和 TypeScript 有细微区别,AssemblyScript 是 TypeScript 的子集,为了方便编译成 WebAssembly 在 TypeScript 的基础上加了更严格的类型限制, 区别如下:

    • 比 TypeScript 多了很多更细致的内置类型,以优化性能和内存占用,详情文档;
    • 不能使用 any 和 undefined 类型,以及枚举类型;
    • 可空类型的变量必须是引用类型,而不能是基本数据类型如 string、number、boolean;
    • 函数中的可选参数必须提供默认值,函数必须有返回类型,无返回值的函数返回类型需要是 void;
    • 不能使用 JS 环境中的内置函数,只能使用 AssemblyScript 提供的内置函数

    总体来说 AssemblyScript 比 TypeScript 又多了很多限制,编写起来会觉得局限性很大; 用 AssemblyScript 来写 WebAssembly 经常会出现 tsc 编译通过但运行 WebAssembly 时出错的情况,这很可能就是你没有遵守以上限制导致的;但 AssemblyScript 通过修改 TypeScript 编译器默认配置能在编译阶段找出大多错误。

    AssemblyScript 的实现原理其实也借助了 LLVM,它通过 TypeScript 编译器把 TS 源码解析成 AST,再把 AST 翻译成 IR,再通过 LLVM 编译成 WebAssembly 字节码实现; 上面提到的各种限制都是为了方便把 AST 转换成 LLVM IR。

    为什么选 AssemblyScript 作为 WebAssembly 开发语言

    AssemblyScript 相对于 C、Rust 等其它语言去写 WebAssembly 而言,好处除了对前端来说无额外新语言学习成本外,还有对于不支持 WebAssembly 的浏览器,可以通过 TypeScript 编译器编译成可正常执行的 JS 代码,从而实现从 JS 到 WebAssembly 的平滑迁移。

    接入 Webpack 构建

    任何新的 Web 开发技术都少不了构建流程,为了提供一套流畅的 WebAssembly 开发流程,接下来介绍接入 Webpack 具体步骤。

    1. 安装以下依赖,以便让 TS 源码被 AssemblyScript 编译成 WebAssembly。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
      "devDependencies": {
        "assemblyscript": "github:AssemblyScript/assemblyscript",
        "assemblyscript-typescript-loader": "^1.3.2",
        "typescript": "^2.8.1",
        "webpack": "^3.10.0",
        "webpack-dev-server": "^2.10.1"
      }
    }

    2. 修改 webpack.config.js,加入 loader:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    module.exports = {
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    loader: 'assemblyscript-typescript-loader',
                    options: {
                        sourceMap: true,
                    }
                }
            ]
        },
    };

    3. 修改 TypeScript 编译器配置 tsconfig.json,以便让 TypeScript 编译器能支持 AssemblyScript 中引入的内置类型和函数。

    1
    2
    3
    4
    5
    6
    {
      "extends": "../../node_modules/assemblyscript/std/portable.json",
      "include": [
        "./**/*.ts"
      ]
    }

    4. 配置直接继承自 assemblyscript 内置的配置文件。

    WebAssembly 相关文件格式

    前面提到了 WebAssembly 的二进制文件格式 wasm,这种格式的文件人眼无法阅读,为了阅读 WebAssembly 文件的逻辑,还有一种文本格式叫 wast; 以前面讲到的计算斐波那契序列的模块为例,对应的 wast 文件如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    func $src/asm/module/f (param f64) (result f64)
    (local i32)
      get_local 0
      f64.const 1
      f64.eq
      tee_local 1
      if i32
        get_local 1
      else
        get_local 0
        f64.const 2
        f64.eq
      end
      i32.const 1
      i32.and
      if
        f64.const 1
        return
      end
      get_local 0
      f64.const 1
      f64.sub
      call 0
      get_local 0
      f64.const 2
      f64.sub
      call 0
      f64.add
    end

    这和汇编语言非常像,里面的 f64 是数据类型,f64.eq f64.sub f64.add 则是 CPU 指令。

    为了把二进制文件格式 wasm 转换成人眼可见的 wast 文本,需要安装 WebAssembly 二进制工具箱WABT, 在 Mac 系统下可通过 brew install WABT 安装,安装成功后可以通过命令 wasm2wast f.wasm 获得 wast;除此之外还可以通过 wast2wasm f.wast -o f.wasm 逆向转换回去。

    WebAssembly 相关工具

    除了前面提到的 WebAssembly 二进制工具箱,WebAssembly 社区还有以下常用工具:

    • Emscripten: 能把 C、C++代码转换成 wasm、asm.js;
    • Binaryen: 提供更简洁的 IR,把 IR 转换成 wasm,并且提供 wasm 的编译时优化、wasm 虚拟机,wasm 压缩等功能,前面提到的 AssemblyScript 就是基于它。

    WebAssembly JS API

    目前 WebAssembly 只能通过 JS 去加载和执行,但未来在浏览器中可以通过像加载 JS 那样 <script src='f.wasm'></script> 去加载和执行 WebAssembly,下面来详细介绍如何用 JS 调 WebAssembly。

    JS 调 WebAssembly 分为 3 大步:加载字节码 > 编译字节码 > 实例化,获取到 WebAssembly 实例后就可以通过 JS 去调用了,以上 3 步具体的操作是:

    1. 对于浏览器可以通过网络请求去加载字节码,对于 Nodejs 可以通过 fs 模块读取字节码文件;
    2. 在获取到字节码后都需要转换成 ArrayBuffer 后才能被编译,通过 WebAssembly 通过的 JS API WebAssembly.compile 编译后会通过 Promise resolve 一个 WebAssembly.Module,这个 module 是不能直接被调用的需要;
    3. 在获取到 module 后需要通过 WebAssembly.Instance API 去实例化 module,获取到 Instance 后就可以像使用 JS 模块一个调用了。

    其中的第 2、3 步可以合并一步完成,前面提到的 WebAssembly.instantiate 就做了这两个事情。

    1
    2
    3
    WebAssembly.instantiate(bytes).then(mod=>{
      mod.instance.f(50);
    })

    WebAssembly 调 JS

    之前的例子都是用 JS 去调用 WebAssembly 模块,但是在有些场景下可能需要在 WebAssembly 模块中调用浏览器 API,接下来介绍如何在 WebAssembly 中调用 JS。

    WebAssembly.instantiate 函数支持第二个参数 WebAssembly.instantiate(bytes,importObject),这个 importObject 参数的作用就是 JS 向 WebAssembly 传入 WebAssembly 中需要调用 JS 的 JS 模块。举个具体的例子,改造前面的计算斐波那契序列在 WebAssembly 中调用 Web 中的 window.alert 函数把计算结果弹出来,为此需要改造加载 WebAssembly 模块的 JS 代码:

    1
    2
    3
    4
    5
    6
    7
    WebAssembly.instantiate(bytes,{
      window:{
        alert:window.alert
      }
    }).then(mod=>{
      mod.instance.f(50);
    })

    对应的还需要修改 AssemblyScript 编写的源码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 声明从外部导入的模块类型
    declare namespace window {
        export function alert(v: number): void;
    }
     
    function _f(x: number): number {
        if (x == 1 || x == 2) {
            return 1;
        }
        return _f(x - 1) + _f(x - 2)
    }
     
    export function f(x: number): void {
        // 直接调用 JS 模块
        window.alert(_f(x));
    }

    修改以上 AssemblyScript 源码后重新用 asc 通过命令 asc f.ts 编译后输出的 wast 文件比之前多了几行:

    1
    2
    3
    4
    5
    6
    (import "window" "alert" (func $src/asm/module/window.alert (type 0)))
     
    (func $src/asm/module/f (type 0) (param f64)
        get_local 0
        call $src/asm/module/_f
        call $src/asm/module/window.alert)

    多出的这部分 wast 代码就是在 AssemblyScript 中调用 JS 中传入的模块的逻辑。

    除了以上常用的 API 外,WebAssembly 还提供一些 API,你可以通过这个 d.ts 文件去查看所有 WebAssembly JS API 的细节。

    不止于浏览器

    WebAssembly 作为一种底层字节码,除了能在浏览器中运行外,还能在其它环境运行。

    直接执行 wasm 二进制文件

    前面提到的 Binaryen 提供了在命令行中直接执行 wasm 二进制文件的工具,在 Mac 系统下通过 brew install binaryen 安装成功后,通过 wasm-shell f.wasm 文件即可直接运行。

    在 Node.js 中运行

    目前 V8 JS 引擎已经添加了对 WebAssembly 的支持,Chrome 和 Node.js 都采用了 V8 作为引擎,因此 WebAssembly 也可以运行在 Node.js 环境中;

    V8 JS 引擎在运行 WebAssembly 时,WebAssembly 和 JS 是在同一个虚拟机中执行,而不是 WebAssembly 在一个单独的虚拟机中运行,这样方便实现 JS 和 WebAssembly 之间的相互调用。

    要让上面的例子在 Node.js 中运行,可以使用以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    const fs = require('fs');
     
    function toUint8Array(buf) {
        var u = new Uint8Array(buf.length);
        for (var i = 0; i < buf.length; ++i) {
            u[i] = buf[i];
        }
        return u;
    }
     
    function loadWebAssembly(filename, imports) {
        // 读取 wasm 文件,并转换成 byte 数组
        const buffer = toUint8Array(fs.readFileSync(filename));
        // 编译 wasm 字节码到机器码
        return WebAssembly.compile(buffer)
            .then(module => {
                // 实例化模块
                return new WebAssembly.Instance(module, imports)
            })
    }
     
    loadWebAssembly('../temp/assembly/module.wasm')
        .then(instance => {
            // 调用 f 函数计算
            console.log(instance.exports.f(10))
        });

    在 Nodejs 环境中运行 WebAssembly 的意义其实不大,原因在于 Nodejs 支持运行原生模块,而原生模块的性能比 WebAssembly 要好。 如果你是通过 C、Rust 去编写 WebAssembly,你可以直接编译成 Nodejs 可以调用的原生模块。

    WebAssembly 展望

    从上面的内容可见 WebAssembly 主要是为了解决 JS 的性能瓶颈,也就是说 WebAssembly 适合用于需要大量计算的场景,例如:

    • 在浏览器中处理音视频,flv.js 用 WebAssembly 重写后性能会有很大提升;
    • React 的 dom diff 中涉及到大量计算,用 WebAssembly 重写 React 核心模块能提升性能。Safari 浏览器使用的 JS 引擎 JavaScriptCore 也已经支持 WebAssembly,RN 应用性能也能提升;
    • 突破大型 3D 网页游戏性能瓶颈,白鹭引擎已经开始探索用 WebAssembly

    总结

    WebAssembly 标准虽然已经定稿并且得到主流浏览器的实现,但目前还存在以下问题:

    • 浏览器兼容性不好,只有最新版本的浏览器支持,并且不同的浏览器对 JS WebAssembly 互调的 API 支持不一致;
    • 生态工具不完善不成熟,目前还不能找到一门体验流畅的编写 WebAssembly 的语言,都还处于起步阶段;
    • 学习资料太少,还需要更多的人去探索去踩坑。;

    总之现在的 WebAssembly 还不算成熟,如果你的团队没有不可容忍的性能问题,那现在使用 WebAssembly 到产品中还不是时候, 因为这可能会影响到团队的开发效率,或者遇到无法轻易解决的坑而阻塞开发。

    转载原文地址:https://www.ibm.com/developerworks/cn/web/wa-lo-webassembly-status-and-reality/index.html

    转载于:https://www.cnblogs.com/NineKit/p/9943952.html

    展开全文
  • Webassembly

    2016-08-10 14:37:00
    https://linuxstory.org/a-webassembly-milestone/ https://webassembly.github.io/ https://github.com/WebAssembly 转载于:https://my.oschina.net/u/612750/blog/730613

    今天装一个Active控件。哎!总有历史遗留东西。那个烦琐,就不提了。这种就是Windows平台上的Web。 想起过似乎有一个Webassebly的东西,提供统一的存储标准。我想以后没有理由再开发Web中ActiveX了。

    https://linuxstory.org/a-webassembly-milestone/

    https://webassembly.github.io/

    https://github.com/WebAssembly

    转载于:https://my.oschina.net/u/612750/blog/730613

    展开全文
  • Learn WebAssembly

    2018-09-29 10:34:17
    WebAssembly is a brand-new technology that represents a paradigm shift in web development. This book aims to teaches programmers how to leverage this technology to write high- performance applications...
  • webassembly-benchmarks:Libsodium WebAssembly基准测试结果
  • language-webassembly:Atom中的WebAssembly语言支持
  • webassemblyWebAssembly is a very cool ... WebAssembly是当今一个非常酷的话题。 WebAssembly is a new low-level binary format for the web. It’s not a programming language you are going to write, but i...

    webassembly

    WebAssembly is a very cool topic nowadays.

    WebAssembly是当今一个非常酷的话题。

    WebAssembly is a new low-level binary format for the web. It’s not a programming language you are going to write, but instead other higher level languages (at the moment C, Rust and C++) are going to be compiled to WebAssembly to have the opportunity to run in the browser.

    WebAssembly是Web的一种新的低级二进制格式。 它不是您要编写的编程语言,而是将其他高级语言(目前为C,Rust和C ++)编译为WebAssembly,以便有机会在浏览器中运行。

    It’s designed to be fast, memory-safe, and open.

    它被设计为快速,内存安全和开放的。

    You’ll never write code in WebAssembly (also called WASM) but instead WebAssembly is the low level format to which other languages are compiled to.

    您永远不会在WebAssembly(也称为WASM)中编写代码,而WebAssembly是将其他语言编译成的低级格式。

    It’s the second language ever to be understandable by Web Browsers, after the JavaScript introduction in the 90’s.

    这是90年代JavaScript引入之后,Web浏览器可以理解的第二种语言。

    WebAssembly is a standard developed by the W3C WebAssembly Working Group. Today all modern browsers (Chrome, Firefox, Safari, Edge, mobile browsers) and Node.js support it.

    WebAssembly是W3C WebAssembly工作组开发的标准。 如今,所有现代浏览器(Chrome,Firefox,Safari,Edge,移动浏览器)和Node.js都支持它。

    Did I say Node.js? Yes, because WebAssembly was born in the browser, but Node already supports it since version 8 and you can build parts of a Node.js application in any language other than JavaScript.

    我是说Node.js吗? 是的,因为WebAssembly诞生于浏览器中,但是Node从版本8开始已经支持它,并且您可以使用JavaScript以外的任何语言来构建Node.js应用程序的一部分。

    People that dislike JavaScript, or prefer writing in other languages, thanks to WebAssembly will now have the option to write parts of their applications for the Web in languages different than JavaScript.

    借助WebAssembly,不喜欢JavaScript或更喜欢用其他语言编写的人现在可以选择使用不同于JavaScript的语言为Web编写应用程序的一部分。

    Be aware though: WebAssembly is not meant to replace JavaScript, but it’s a way to port programs written in other languages to the browser, to power parts of the application that are either better created in those languages, or pre-existing.

    但是请注意: WebAssembly并不是要替换JavaScript ,而是将用其他语言编写的程序移植到浏览器的一种方法,以增强应用程序中那些用这些语言创建或已存在的部分。

    JavaScript and WebAssembly code interoperate to provide great user experiences on the Web.

    JavaScript和WebAssembly代码可以互操作,以在Web上提供出色的用户体验。

    It’s a win-win for the web, since we can use the flexibility and ease of use of JavaScript and complement it with the power and performance of WebAssembly.

    这是Web上的双赢,因为我们可以利用JavaScript的灵活性和易用性,并通过WebAssembly的功能和性能对其进行补充。

    安全 (Safety)

    WebAssembly code runs in a sandboxed environment, with the same security policy that JavaScript has, and the browser will ensure same-origin and permissions policies.

    WebAssembly代码在沙盒环境中运行,具有与JavaScript相同的安全策略,浏览器将确保同源策略和权限策略。

    If you are interested in the subject I recommend to read Memory in WebAssembly and the Security docs of webassembly.org.

    如果您对该主题感兴趣,建议阅读WebAssembly中的Memorywebassembly.org安全性文档

    性能 (Performance)

    WebAssembly was designed for speed. Its main goal is to be really, really fast. It’s a compiled language, which means programs are going to be transformed to binaries before being executed.

    WebAssembly专为提高速度而设计。 它的主要目标是真正,非常快。 这是一种编译语言,这意味着程序将在执行之前转换为二进制文件。

    It can reach performance that can closely match natively compiled languages like C.

    它可以达到可以与本地编译语言(如C)紧密匹配的性能。

    Compared to JavaScript, which is a dynamic and interpreted programming language, speed cannot be compared. WebAssembly is always going to beat JavaScript performance, because when executing JavaScript the browser must interpret the instructions and perform any optimization it can on the fly.

    与JavaScript(一种动态的解释型编程语言)相比,速度是无法比较的。 WebAssembly总是会击败JavaScript性能,因为执行JavaScript时,浏览器必须解释指令并进行动态优化。

    今天谁在使用WebAssembly? (Who is using WebAssembly today?)

    Is WebAssembly ready for use? Yes! Many companies are already using it to make their products better on the Web.

    WebAssembly可以使用了吗? 是! 许多公司已经在使用它来改善他们在Web上的产品。

    A great example you probably already used is Figma, a design application which I also use to create some of the graphics I use in the day-to-day work. This application runs inside the browser, and it’s really fast.

    您可能已经使用的一个很好的例子是Figma ,这是一个设计应用程序,我还使用它来创建我在日常工作中使用的一些图形。 该应用程序在浏览器中运行,并且速度非常快。

    The app is built using React, but the main part of the app, the graphics editor, is a C++ application compiled to WebAssembly, rendered in a Canvas using WebGL.

    该应用程序是使用React构建的,但该应用程序的主要部分(图形编辑器)是编译为WebAssembly的C ++应用程序,并使用WebGL在Canvas中呈现。

    In early 2018 AutoCAD released its popular design product running inside a Web App, using WebAssembly to render its complex editor, which was built using C++ (and migrated from the desktop client codebase)

    在2018年初,AutoCAD发布了其流行的设计产品,该产品在Web App内运行,使用WebAssembly渲染其复杂的编辑器,该编辑器是使用C ++构建的(并从桌面客户端代码库中迁移过来)

    The Web is not a limiting technology any more for those products that require a very performant piece to their core.

    对于那些需要非常高性能的产品而言,Web不再是一种限制技术。

    您如何使用WebAssembly? (How can you use WebAssembly?)

    C and C++ applications can be ported to WebAssembly using Emscripten, a toolchain that can compile your code to two files:

    可以使用Emscripten将C和C ++应用程序移植到WebAssembly,该工具链可以将您的代码编译为两个文件:

    • a .wasm file

      .wasm文件

    • a .js file

      .js文件

    where the .wasm file contains the actual WASM code, and the .js file contains the glue that will allow the JavaScript code to run the WASM.

    其中.wasm文件包含实际的WASM代码,而.js文件包含将允许JavaScript代码运行WASM的粘合。

    Emscripten will do a lot of work for you, like converting OpenGL calls to WebGL, will provide bindings for the DOM API and other browsers and device APIs, will provide filesystem utilities that you can use inside the browser, and much more. By default those things are not accessible in WebAssembly directly, so it’s a great help.

    Emscripten将为您做很多工作,例如将OpenGL调用转换为WebGL,将为DOM API和其他浏览器和设备API提供绑定,将提供可在浏览器内部使用的文件系统实用程序,等等。 默认情况下,这些东西不能直接在WebAssembly中访问,所以这是一个很大的帮助。

    Rust code is different, as it can be directly compiled to WebAssembly as its output target, and there’s an https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm.

    Rust代码有所不同,因为它可以直接编译为WebAssembly作为其输出目标,并且有一个https://developer.mozilla.org/zh-CN/docs/WebAssembly/Rust_to_wasm

    未来WebAssembly会有什么发展? 它如何发展? (What’s coming for WebAssembly in the future? How is it evolving?)

    WebAssembly is now at version 1.0. It currently officially supports only 3 languages (C, Rust, C++) but many more are coming. Go, Java and C# cannot currently be (officially) compiled to WebAssembly because there is no support for garbage collection yet.

    WebAssembly现在是1.0版。 目前,它仅正式支持3种语言(C,Rust,C ++),但还会有更多语言支持。 Go,Java和C#当前无法(正式)编译为WebAssembly,因为尚不支持垃圾回收。

    When making any call to browser APIs using WebAssembly you currently need to interact with JavaScript first. There is work in progress to make WebAssembly a more first class citizen in the browser and make it able to call DOM, Web Workers or other browser APIs directly.

    当前使用WebAssembly调用浏览器API时,您当前首先需要与JavaScript进行交互。 正在使WebAssembly在浏览器中成为更高级的公民,并使其能够直接调用DOM,Web Workers或其他浏览器API的工作正在进行中。

    Also, there is work in progress to be able to make JavaScript code being able to load WebAssembly modules, through the ES Modules specification.

    另外,正在通过ES模块规范使JavaScript代码能够加载WebAssembly模块的工作正在进行中。

    安装Emscripten (Installing Emscripten)

    Install Emscripten by cloning the emsdk GitHub repo:

    通过克隆emsdk GitHub存储库安装Emscripten:

    git clone https://github.com/juj/emsdk.git

    then

    然后

    dev cd emsdk

    Now, make sure you have an up to date version of Python installed. I had 2.7.10 and this caused a TLS error.

    现在,请确保您已安装最新版本的Python。 我有2.7.10,这导致了TLS错误。

    I had to download the new one (2.7.15) from https://www.python.org/getit/ install it and then run the Install Certificates.command program that comes with the installation.

    我必须从https://www.python.org/getit/下载新版本(2.7.15),然后运行Install Certificates.command随附的Install Certificates.command程序。

    Then

    然后

    ./emsdk install latest

    let it download and install the packages, then run

    让它下载并安装软件包,然后运行

    ./emsdk activate latest

    and add the paths to your shell by running:

    并通过运行以下命令将路径添加到您的shell:

    source ./emsdk_env.sh

    将C程序编译为WebAssembly (Compile a C program to WebAssembly)

    I am going to create a simple C program and I want it to execute inside the browser.

    我将创建一个简单的C程序,并希望它在浏览器中执行。

    This is a pretty standard “Hello World” program:

    这是一个非常标准的“ Hello World”程序:

    #include <stdio.h>
    
    int main(int argc, char ** argv) {
      printf("Hello World\n");
    }

    You could compile it using:

    您可以使用以下命令进行编译:

    gcc -o test test.c

    and running ./test would print “Hello World” to the console.

    并运行./test会将“ Hello World”打印到控制台。

    Let’s compile this program using Emscripten to run it in the browser:

    让我们使用Emscripten编译该程序以在浏览器中运行它:

    emcc test.c -s WASM=1 -o test.html

    Emscripten gave us a html page that already wraps the WebAssembly program compiled, ready to run. You need to open it from a web server though, not from the local filesystem, so start a local web server, for example the http-server global npm package (install it using npm install -g http-server if you don’t have it installed already). Here it is:

    Emscripten给了我们一个HTML页面,该页面已经包装了已编译的WebAssembly程序,可以运行了。 不过,您需要从Web服务器而不是本地文件系统中打开它,因此请启动本地Web服务器,例如http-server全局npm软件包(如果没有,请使用npm install -g http-server进行安装)它已经安装)。 这里是:

    The program running in the browser

    As you can see, the program ran and printed “Hello World” in the console.

    如您所见,该程序已运行并在控制台中打印了“ Hello World”。

    This was one way to run a program compiled to WebAssembly. Another option is to make a program expose a function you are going to call from JavaScript.

    这是运行编译为WebAssembly的程序的一种方法。 另一种选择是使程序公开要从JavaScript调用的函数。

    从JavaScript调用WebAssembly函数 (Call a WebAssembly function from JavaScript)

    Let’s tweak the Hello World defined previously.

    让我们调整之前定义的Hello World。

    Include the emscripten headers:

    包括emscripten标题:

    #include <emscripten/emscripten.h>

    and define an hello function:

    并定义一个hello函数:

    int EMSCRIPTEN_KEEPALIVE hello(int argc, char ** argv) {
      printf("Hello!\n");
      return 8;
    }

    EMSCRIPTEN_KEEPALIVE is needed to preserve the function from being automatically stripped if not called from main() or other code executed at startup (as the compiler would otherwise optimize the resulting compiled code and remove unused functions - but we’re going to call this dynamically from JS, and the compiler does now know this).

    如果不从main()或启动时执行的其他代码中调用该函数,则需要EMSCRIPTEN_KEEPALIVE来防止该函数被自动剥离(因为否则编译器会优化生成的编译后的代码并删除未使用的函数-但我们将从JS,并且编译器现在知道这一点)。

    This little function prints Hello! and returns the number 8.

    这个小功能可以打印Hello! 并返回数字8。

    Now if we compile again using emcc:

    现在,如果我们再次使用emcc编译:

    emcc test.c -s WASM=1 -o test.html -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

    This time we added a EXTRA_EXPORTED_RUNTIME_METHODS flag to tell the compiler to leave the ccall and cwrap functions on the Module object, which we’ll use in JavaScript.

    这次,我们添加了EXTRA_EXPORTED_RUNTIME_METHODS标志,以告知编译器将ccallcwrap函数保留在Module对象上,这将在JavaScript中使用。

    Now we can fire up the Web Server again and once the page is open call Module.ccall('hello', 'number', null, null) in the console, and it will print “Hello!” and return 8:

    现在,我们可以再次启动Web服务器,并在打开页面后在控制台中调用Module.ccall('hello', 'number', null, null) ,它将显示“ Hello!”。 并返回8:

    Calling from JS

    The 4 parameters that Module.ccall takes are the C function name, the return type, the types of the arguments (an array), and the arguments (also an array).

    Module.ccall接受的4个参数是C函数名称,返回类型,参数的类型(数组)和参数(也是数组)。

    If our function accepted 2 strings as parameters, for example, we would have called it like this:

    例如,如果我们的函数接受2个字符串作为参数,则我们将这样调用它:

    Module.ccall('hello', 'number', ['string', 'string'], ['hello', 'world'])

    The types we can use are null, string, number, array, boolean.

    我们可以使用的类型为nullstringnumberarrayboolean

    We can also create a JavaScript wrapper for the hello function by using the Module.cwrap function, so that we can call the function as many times we want by using the JS counterpart:

    我们还可以使用Module.cwrap函数为hello函数创建一个JavaScript包装器,以便我们可以使用JS对应对象多次调用该函数:

    const hello = Module.cwrap('hello', number, null, null)

    Using cwrap

    Here’s the official docs for ccall and cwrap.

    这是ccallcwrap的官方文档

    翻译自: https://flaviocopes.com/webassembly/

    webassembly

    展开全文
  • disable-webassembly:浏览器黑客禁用WebAssembly(WASM)
  • WebAssembly.pdf

    2020-01-13 22:29:21
    WebAssembly 2020-01 最新官文文档(英文)。WebAssembly是一种运行在现代网络浏览器中的新型代码并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如C、C++和Rust等低级源语言提供一个高效的编译...
  • webassembly_wasm_fibonacci webassembly斐波那契wasm python -m http.server 9000
  • Hands-On Game Development with WebAssembly by Rick Battagline Packt Publishing English 2019-05-31 596 pages 5.0/5.0 1 reviews Details Title: Hands-On Game Development with WebAssembly Author: Rick ...
  • WebAssembly入门

    2020-11-30 18:10:27
    WebAssembly WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance ...

    声明:部分文档直接翻自https://developer.mozilla.org/相关模块


    简介

    WebAssembly

    WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.

    webAssembly是一种新型的能够运行在现代web浏览器中运行的代码 —— 这是一种低级的压缩的二进制格式的类汇编语言,能以近乎native的性能运行并且提供将c/c++c#'Rust等高级语言编译为可以运行在web端的目标版本;它也被设计为允许与JavaScript一起运行;

    WebAssembly已经被收录为W3C WebAssembly Community Group的开放标准,使用WebAssembly JavaScript API,你可以通过它们加载WebAssembly模块到一个Web App(node和JavaScript)中并且在两者间共享功能;

    需要注意的是`WebAssembly并不是汇编
    在这里插入图片描述


    WebAssembly目标

    1. 快速、高效、可移植
    2. 可读性和可调试性 —— 虽然Wasm是低级的类汇编语言,但是其有着可读的文本格式,可以进行读、写、debug等;
    3. 保持安全性 —— 运行在一个安全的沙箱环境,遵循同源策略和权限策略;
    4. 不会破坏web —— 可以与web技术共存并且有向后兼容性;

    WebAssembly如何适应web平台

    web平台可以认为由两部分组成:

    1. 运行Web App代码的虚拟机,通常是JavaScript
    2. 一系列能够控制web浏览器或者设备的Web API,如DOMBOMWebGLIndexedDBWebAudio等;

    随着Web应用范围更加广阔(3D游戏、AR/VR、音视频处理、计算机视觉等),功能更加复杂,Javascript加载、解析和执行的性能瓶颈逐渐突出;

    WebAssembly的出现不是为了替代JavaScript,而是一种补充,同时可以与Javascript共同工作,这样web开发者可以结合两者的优势开发;WebAssembly代码的基本单元叫做模块,其与ES2015模块对称;


    WebAssembly核心概念

    1. Module: 与ES2015 module类似,module是无状态的,定义了输入和输出,表示一段由浏览器编译形成的可执行的机器码;
    2. Memory:一个可调整大小的ArrayBuffer,它包含由WebAssembly的低级内存访问指令读写的线性字节数组;
    3. Table:一个可调整大小的类型化数组—— 包含那些原本不能以原始字节存储在内存中(由于安全和可移植性原因)的引用(如函数)
    4. Instance:可以理解为module在实际运行环境中的实例,包括运行时相关的MemoryTable及导入值等;

    JavaScript Api提供了能力用于创建module/memory/table/instance,并且能够完全控制Wasm的加载、编译和执行,因此甚至可以把它当做是一致高性能的JS封装函数;JS实例与wasm实例也可以相互调用;

    未来,Wasm将会支持loadable<script type="module"),这样就可以支持直接加载一个wasm模块;


    emscripten

    根据官网定义:

    Emscripten是一个使用LLVM把C/C++等编译生成WebAssembly的完整的编译器工具链,特别关注速度、大小和Web平台。

    1. 移植性
      编译使用C/C++、或者其他使用LLVM的语言现有项目到浏览器、node、或者wasm运行时
    2. APIs
      Emscripten把OpenGL转为WebGL,并且支持了类似的API如SDL(c语言实现的跨平台的多媒体和游戏开发库,提供了处理声音、图像等相关封装函数)、线程、POSIX、Web APIs及Javascript
    3. 快速
      LLVMEmscriptenBinaryenWebAssembly的共同作用下,输出文件被压缩并且可以以接近原生的速度运行

    LLVM
    LLVM项目是模块化、可重用的编译器以及工具链技术的集合。

    传统编译器架构
    在这里插入图片描述
    就像不同种群的人类讲不同的语言,不同架构的机器也需要不同的机器码才能理解人类需要它做什么;编译器的功能就是将多种高级语言统一转为特定机器可理解的机器码 —— 其中FE主要将各种高级编程语言转为IR,然后BE将IR转为适用于特定架构的汇编码;

    如果每个高级语言对应到不同的架构机器码,这样会庞杂并且不怎么高效;
    在这里插入图片描述
    因此可以设计一个IR,高级语言统一转为IR,然后在不同的系统架构上再将IR转为特定的机器码;
    在这里插入图片描述

    LLVM架构
    在这里插入图片描述
    与Clang关系

    Clang是LLVM项目的一个子项目,基于LLVM架构的C/C++/Objective-C编译器前端。相对gcc的优点包括编译速度快、占用内存小、模块化设计、拓展性强、可读性及可调试性强;
    在这里插入图片描述

    在这里插入图片描述

    Binaryen

    是以c++编写的用于WebAssembly的一个基础库,使用了Binaryen的编译器包括AssemblyScriptwasm2jsGrain等;与clang + LLVM + Emscripten一起作用于c/c++ => wasm的转换过程;

    可以用于读、写或转换wasm;某些情况下可以把Binaryen看做是没有LLVM的编译器后端(支持多核和pipeline);

    整个流程可以描述为下:
    在这里插入图片描述

    WebAssembly与编译器架构

    上面说了,WebAssembly并不是真正的汇编;它与汇编的不同之处在于它并不是对应一个真实的物理机,而是一个概念上的机器,也就是不会做不同架构物理机的特定映射,因此WebAssembly的指令也称作是虚拟指令

    相对JS源码,wasm具有更直接的到机器码的映射(但是不是对应特定的硬件设备的机器码)

    在这里插入图片描述

    为什么WebAssembly比对应的JS运行更快
    在这里插入图片描述


    环境搭建

    以ubuntu环境搭建为`例:

    环境准备
    Emsdk不会在系统中安装任何工具,所有的变更都发生在/emsdk目录下,而Emsdk核心脚本都是python脚本,因此需要单独安装python

    # Install Python
    sudo apt-get install python3
    
    # Install CMake (optional, only needed for tests and building Binaryen or LLVM)
    sudo apt-get install cmake
    
    
    # install git
    sudo aptget install git
    

    拉取镜像

    # Get the emsdk repo
    git clone https://github.com/emscripten-core/emsdk.git
    
    # Enter that directory
    cd emsdk
    

    安装与激活

    更新emsdk版本并安装;激活emsdk并设置环境变量

    # Fetch the latest version of the emsdk (not needed the first time you clone)
    git pull
    
    # Download and install the latest SDK tools.
    ./emsdk install latest
    
    # Make the "latest" SDK "active" for the current user. (writes .emscripten file)
    ./emsdk activate latest
    
    # Activate PATH and other environment variables in the current terminal
    source ./emsdk_env.sh
    

    每次重新登陆或者新建 Shell 窗口,都要执行一次这行命令

    使用Docker镜像搭建环境

    如何在web App应用

    目前,wasm主要有四类入口点:

    1. 使用Emscripten导入C/C++应用
    2. 在汇编层面直接编写和生成wasm
    3. 编写Rust应用并把wasm作为编译目标
    4. 使用AssemblyScript(类似于TypeScript)并且编译成wasm二进制码

    这里仅介绍第一种

    Porting from C/C++

    C/C++导入主要有两种方式:使用线上wasm assember或者Emscripten;在线编译工具有WasmFiddleWasmFiddle++等;

    Emscripten能够把任何的C/C++源码转为三部分:

    • 一个.wasm模块;
    • 一份加载和执行该模块的JS“粘合”代码
    • 显示代码结果的html;

    在这里插入图片描述

    在内核中,该过程如下:

    • EmscriptenC/C++输入到clang + LLVM —— 一套成熟的开源C/C++编译工具链,比如作为OXS中XCode的一部分;
    • Emscriptenclang + LLVM 的编译结果进一步转换为wasm二进制码;
    • 由于目前wasm自身不能直接访问dom等,它只能够调用JS传入整型和浮点型的基本数据类型;因此它同时输出了JS“粘合”代码及html以实现访问 web API

    JS“粘合”代码包括一些库的方法JS实现以及对wasm模块的获取、加载和执行的wasm JavaScript API;
    生成的HTML加载JS“粘合”代码,并将输出置于一个textarea中;

    Note: There are future plans to allow WebAssembly to call Web APIs directly.

    LLVM是构架编译器(compiler)的框架系统,以C++编写而成,用于优化以任意程序语言编写的程序的编译时间(compile-time)、链接时间(link-time)、运行时间(run-time)以及空闲时间(idle-time),对开发者保持开放,并兼容已有脚本。

    LLVM的项目是一个模块化和可重复使用的编译器和工具技术的集合。LLVM是伊利诺伊大学的一个研究项目,提供一个现代化的,基于SSA的编译策略能够同时支持静态和动态的任意编程语言的编译目标

    编译为.wasm

    目前,支持WebAssembly较多的编译器工具链是LLVM,有许多不同的FEs和BEs可以添加到LLVM由于支持WebAssembly

    下图是从C语言编译为.wasm的过程:

    1. clang FE将C转为LLVM IR;
    2. LLVM optimizer对IR进行优化;
    3. BE将IR转为.wasm —— 这里BE一般有两种:LLVM WASM BEEMSCRIPTEN using asm2wasm
    4. wasm转为可以在特定架构上运行的机器码(x86ARM);当然,还有一些库也能实现,比如依赖于indexedDB的文件系统;
      在这里插入图片描述

    在JS中加载.wasm文件

    function fetchAndInstantiate(url, importObject) {
      return fetch(url).then(response =>
        response.arrayBuffer()
      ).then(bytes =>
        WebAssembly.instantiate(bytes, importObject)
      ).then(results =>
        results.instance
      );
    }
    

    WebAssembly模块与JS模块不同,它的入参和返回值只能是整型或者浮点数类型;而对于字符串等其他数据类型,必须要使用WebAssembly模块的memory —— 它模拟了C/C++等语言中的堆概念;

    JavaScript中的内存管理是依赖GC自动管理的;因此在JS中我们需要借助ArrayBuffer实现(数组的索引作为内存地址);

    ArrayBuffer是一个字节数组,用来表示通用的、固定长度的原始二进制数据缓冲区;ArrayBuffer中的内容我们无法直接操作,需要通过DataView对象或者类型化数组对象操作,以此以特定的格式读取缓冲区中的内容;

    在这里插入图片描述

    如果想要在JS和WebAssembly之间传递一个字符串,你需要将字符转换为它们对应的字符码;
    然后你需要将它们写入memory array;由于索引是整数,索引可以传入到WebAssembly函数中;
    之后,字符串的第一个字符的索引将会被作为指针;

    在这里插入图片描述

    开发供web开发人员使用的WebAssembly模块的人很可能会为该模块创建一个包装器。这样,作为模块的使用者,您就不需要了解内存管理。(具体可以参考working with WebAssembly modules


    .wasm的结构

    了解.wasm的结构有助于我们更好地理解整个转换过程;

    int add42(int num) {
      return num + 42;
    }
    

    对应的.wasm如下:

    00 61 73 6D 0D 00 00 00 01 86 80 80 80 00 01 60
    01 7F 01 7F 03 82 80 80 80 00 01 00 04 84 80 80
    80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
    81 80 80 80 00 00 07 96 80 80 80 00 02 06 6D 65
    6D 6F 72 79 02 00 09 5F 5A 35 61 64 64 34 32 69
    00 00 0A 8D 80 80 80 00 01 87 80 80 80 00 00 20
    00 41 2A 6A 0B
    

    其中,“num + 42” 大概是这样子的
    在这里插入图片描述
    代码如何在堆栈机里工作

    在这里插入图片描述
    WebAssembly的工作机制就像堆栈机一样,运算时,运算相关的值在运算前会被一起在栈中排队等待运算执行;比如add操作,只需要两个2个操作数,操作符会直接从栈顶取出2个操作数进行计算;由于不需要SI和DI寄存器,因此.wasm的体积会更小,因此可以节约下载时间;

    尽管WebAssembly是根据堆栈机指定的,但它在物理机上不是这样工作的。当浏览器将WebAssembly转换为运行浏览器的机器的机器码时,它将使用寄存器。由于WebAssembly代码没有指定寄存器,它为浏览器提供了更大的灵活性,可以为该机器使用最佳的寄存器分配。

    Sections of the module

    .wasm文件中,除了add42函数自身外,可以看到还有很多其他组成部分,这里称作sections;它们有一部分是对模块是必须的,有一部分是可选的;

    必选项

    1. Type: 包含此模块中定义的函数和任何导入函数的函数签名
    2. Function: 为此模块中定义的每个函数提供索引
    3. Code: 模块中每个函数的真实函数体

    可选项

    1. Export: 使functions/memories/tables/全局变量在JS其他module可用;这允许分离编译的模块动态地链接在一起;这是一个.dll的WebAssembly版本;
    2. **Import: ** 指定要从其他WebAssembly模块或JavaScript导入的函数、内存、表和全局变量;
    3. Start: 当WebAssembly模块加载时自动运行的函数(基本类似于主函数);
    4. Global: 声明该module的全局变量
    5. Memory: 模块需要使用的内存;
    6. Table: 使得可以映射到WebAssembly模块之外的值,比如JavaScript对象。这对于允许间接函数调用特别有用。
    7. **Data: ** 初始化导入的或本地内存
    8. **Element: ** 初始化导入的或本地Table

    Demo

    首先,新建一个hello.c文件

    #include <stdio.h>
    
    int main() {
        printf('hello world\n');
        return 0;
    }
    

    运行以下命令得到输出产物

    emcc tests/hello.c -o tests/hello.html
    

    在这里插入图片描述

    使用浏览器打开html文件查看效果,这里需要注意的是打开文件是以file协议而不是以http协议;部分浏览器默认不开启WebAssembly,需要手动开启 —— Chrome打开chrome://flags并且开启Experimental WebAssembly,部分FireFox需要在about:config中开启javascript.options.wasm

    运行结果如下图:
    在这里插入图片描述

    如果运行失败,并有以下报错both async and sync fetching of the wasm failed,需要自己搭建本地服务器

    简单解析

    
    

    参考文献

    1. WebAssembly
    2. WebAssembly Concepts
    3. Emscripten官网
    4. asm.js 和 Emscripten 入门教程
    5. asm.js Work Draft
    6. 简述 LLVM 与 Clang 及其关系
    7. Compiling a New C/C++ Module to WebAssembly
    8. mdn/webassembly-examples
    9. asm.js 和 Emscripten 入门教程
    10. 深入浅出让你理解什么是LLVM
    11. WebAssembly 不完全指北
    展开全文
  • WebAssembly 简介

    2019-12-13 10:05:24
    WebAssembly 简介 原文链接 WebAssembly(缩写WASM)是一种安全,便携,低级代码设计用于高效执行和紧凑表示的格式。 它的主要目标是使Web上的高性能应用,不需要针对网络的特定假设或提供特定的定制化的网络...
  • webassemblyby Patrick Ferris 帕特里克·费里斯... WebAssembly的设计 (The Design of WebAssembly) I love the web. It is a modern-day superpower for the dissemination of information and empowerment of...
  • webassembly-lua 通过lua脚本编写和编译为WebAssembly程序。 注意:该项目仍在开发中。 我们需要做更多的改善 要求 (首选使用最新版本) Python 3.6.5以上 为了避免polute您的环境中,我们强烈希望对使用预编译...
  • javascript WebAssembly

    2020-09-18 10:01:39
    文章目录一、WebAssembly二、方法 一、WebAssembly WebAssembly(缩写 Wasm)是基于堆栈虚拟机的二进制指令格式。Wasm为了一个可移植的目标而设计的,可用于编译C/C+/RUST等高级语言,使客户端和服务器应用程序能够...
  • webassembly-examples a storage for learning how to write webassembly code. 存放学习WebAssembly的笔记仓库
  • WebAssembly 小 Demo

    2020-09-15 13:25:00
    WebAssembly 被设计为可以和 JavaScript 一起协同工作 — 通过使用 WebAssembly 的 JavaScript API,你可以把 WebAssembly 模块加载到一个 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 W
  • PSPDFKit 的 WebAssembly 基准测试 WebAssembly (Wasm, WA) 的基准测试,它使用 Standalone。 Standalone 的渲染引擎是用 C/C++ 编写并编译为 Wasm。 在获取您的分数并在我们的了解更多。 先决条件 (使用 npm 或...
  • WebAssembly承诺提供一种全新的网络-为用户提供更佳的性能,并为开发人员提供更大的灵活性。 开发人员可以使用多种语言(C,TypeScript,Rust,Ruby,Python)进行选择,而不必局限于使用JavaScript作为客户端网络...
  • WebAssembly基础

    2021-07-15 10:35:58
    WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。 相关内容: 几张图让你看懂WebAssembly
  • webassembly-示例 MDN WebAssembly文档随附的代码示例-请参阅 。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,201
精华内容 3,680
关键字:

webassembly