美文网首页
WebAssembly 学习笔记

WebAssembly 学习笔记

作者: Daniels_Cai | 来源:发表于2018-02-23 14:26 被阅读709次

    WebAssembley 是什么

    面向Web的通用二进制和文本格式

    官网 http://webassembly.org/
    从名称中,可以看到他是一个 Web字节码技术。 现在运行在web上的动态语言代码,都是 JavaScript ,我们可以轻松看到 网站的源代码。

    WebAssembly 又称为 wasm

    教程

    这是一篇非常好的 WebAssemably 教程
    https://segmentfault.com/a/1190000008402872

    本文是对这篇教程的实践笔记, 是一个流水账

    运行 wasm

    首先需要一个支持wasm的浏览器, 我使用的是 黄色 Chrome (Chrome Canary)
    https://www.google.com/chrome/browser/canary.html

    快速体验 WebAssembly

    WebAssembly.compile(new Uint8Array(`
      00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01
      7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
      64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
      08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
      0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
    )).then(module => {
      const instance = new WebAssembly.Instance(module)
      const { add, square } = instance.exports
    
      console.log('2 + 4 =', add(2, 4))
      console.log('3^2 =', square(3))
      console.log('(2 + 5)^2 =', square(add(2 + 5)))
    
    })
    

    运行结果如下, 这一串二进制代码, 就是编译好的 WebAssembly 二进制源码了


    image.png

    这段二进制代码, 导出了两个函数, add 和 square 我们在js 代码中调用这两个函数。

    从这段代码中,有如下几个推论

    1. 可以加密web 代码了。web代码不再像以前js 代码那样,以源代码形式直接暴露出来了。
    2. WebAssembly 代码可以作为 js 的类库引用
    3. WebAssembly 是二进制代码, 执行效率肯定比 js 源代码高
    4. WebAssembly 不是为了取代 js , 而是为了增强 js 运行效率, 是js 的一个强有力的补充

    如何编写WebAssembly

    编写语言, 支持 C/C++

    以C 语言为例,

    // math.c
    
    int add (int x, int y) {
      return x + y;
    }
    
    int square (int x) {
      return x * x;
    }
    

    然后执行 emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm 就可以生成 wasm 文件了。 也就是我们在上面看到的一串二进制代码。

    这里,我有几个推论

    1. WebAssebmly 目前只能用 JavaScript 调用
    2. 不能使用JavaScript编写 (这意味着写 WebAssebly 需要至少懂2门语言)

    还有几个疑惑

    1. 需要两门语言, 门槛略高
    2. 编译的工具链还非常底层, 步骤多而杂。

    初步结论

    1. WebAssembly 不是一门语言, 是一个编译工具
    2. 经过WebAssebly 编译的二进制代码,可以运行在 浏览器中, 并使用JavaScript 进行调用
    3. 编写 WebAssembly 的语言, 目前有 C/C++, 以后可能会有更多 (目前还没有找到其他语言的范例)
    4. WebAssembly 有一定程度的Web代码加密作用
    5. WebAssebly 还处在初期开发阶段, 非常的不成熟,在最新的测试版浏览器中才有支持,工具链使用也相当繁琐。

    参考资料

    http://www.infoq.com/cn/news/2015/06/webassembly-wasm
    http://www.infoq.com/cn/news/2017/07/WebAssembly-solve-JavaScript

    相关文章

      网友评论

          本文标题:WebAssembly 学习笔记

          本文链接:https://www.haomeiwen.com/subject/ozlxxftx.html