WebAssembly 初体验：从零开始重构计算模块

WebAssembly 的概念、意义以及未来带来的性能提升相信已是耳熟能详，笔者在前端每周清单系列中也是经常会推荐 WebAssembly 相关文章。不过笔者也只是了解其概念而未真正付诸实践，本文即是笔者在将我司某个简单项目中的计算模块重构为 WebAssembly 过程中的总结。在简单的实践中笔者个人感觉，WebAssembly 的抽象程度会比 JavaScript 高不少，未来对于大型项目的迁移，对于纯前端工程师而言可能存在的坑也是不少，仿佛又回到了被指针统治的年代。本文笔者使用的案例已经集成到了 React 脚手架 create-react-boilerplate 中 ，可以方便大家快速本地实践。

成都创新互联公司专注于峰峰矿网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供峰峰矿营销型网站建设，峰峰矿网站制作、峰峰矿网页设计、峰峰矿网站官网定制、成都小程序开发服务，打造峰峰矿网络公司原创品牌,更为您提供峰峰矿网站排名全网营销落地服务。

编译环境搭建

我们使用 Emscripten 将 C 代码编译为 wasm 格式，官方推荐的方式是首先下载 Portable Emscripten SDK for Linux and OS X (emsdk-portable.tar.gz) 然后利用 emsdk 进行安装：

 
 
 
 
      
  
  
  
  1. $ ./emsdk update 
    2.   
  
  
  
  2. $ ./emsdk install latest 
    3.   
  
  
  
  3. # 如果出现异常使用 ./emsdk install sdk-1.37.12-64bit 
    4.   
  
  
  
  4. # https://github.com/kripken/emscripten/issues/5272 
    5.

安装完毕后激活响应环境即可以进行编译：

 
 
 
 
      
  
  
  
  1. $ ./emsdk activate latest  
    2.   
  
  
  
  2. $ source ./emsdk_env.sh # you can add this line to your .bashrc 
    3.

笔者在本地执行上述搭建步骤时一直失败，因此改用了 Docker 预先配置好的镜像进行处理：

 
 
 
 
      
  
  
  
  1. # 拉取 Docker 镜像 
    2.   
  
  
  
  2. docker pull 42ua/emsdk 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. # 执行编译操作 
    5.   
  
  
  
  5. docker run --rm -v $(pwd):/home/src 42ua/emsdk emcc hello_world.c 
    6.

对应的 Dockfile 如下所示，我们可以自行修改以适应未来的编译环境：

 
 
 
 
      
  
  
  
  1. FROM ubuntu 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. RUN \ 
    4.   
  
  
  
  4.     apt-get update && apt-get install -y build-essential \ 
    5.   
  
  
  
  5.     cmake python2.7 python nodejs-legacy default-jre git-core curl && \ 
    6.   
  
  
  
  6.     apt-get clean && \ 
    7.   
  
  
  
  7. \ 
    8.   
  
  
  
  8.     cd ~/ && \ 
    9.   
  
  
  
  9.     curl -sL https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portable.tar.gz | tar xz && \ 
    10.   
  
  
  
  10.     cd emsdk-portable/ && \ 
    11.   
  
  
  
  11.     ./emsdk update && \ 
    12.   
  
  
  
  12.     ./emsdk install -j1 latest && \ 
    13.   
  
  
  
  13.     ./emsdk activate latest && \ 
    14.   
  
  
  
  14. \ 
    15.   
  
  
  
  15.     rm -rf ~/emsdk-portable/clang/tag-*/src && \ 
    16.   
  
  
  
  16.     find . -name "*.o" -exec rm {} \; && \ 
    17.   
  
  
  
  17.     find . -name "*.a" -exec rm {} \; && \ 
    18.   
  
  
  
  18.     find . -name "*.tmp" -exec rm {} \; && \ 
    19.   
  
  
  
  19.     find . -type d -name ".git" -prune -exec rm -rf {} \; && \ 
    20.   
  
  
  
  20. \ 
    21.   
  
  
  
  21.     apt-get -y --purge remove curl git-core cmake && \ 
    22.   
  
  
  
  22.     apt-get -y autoremove && apt-get clean 
    23.   
  
  
  
  23.  
    24.   
  
  
  
  24. # http://docs.docker.com/engine/reference/run/#workdir 
    25.   
  
  
  
  25. WORKDIR /home/src 
    26.

到这里基本环境已经配置完毕，我们可以对简单的 counter.c 进行编译，源文件如下：

 
 
 
 
      
  
  
  
  1. int counter = 100; 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. int count() {   
    4.   
  
  
  
  4.     counter += 1; 
    5.   
  
  
  
  5.     return counter; 
    6.   
  
  
  
  6. } 
    7.

编译命令如下所示，如果本地安装好了 emcc 则可以直接使用，否则使用 Docker 环境进行编译：

 
 
 
 
      
  
  
  
  1. $ docker run --rm -v $(pwd):/home/src 42ua/emsdk emcc counter.c -s WASM=1 -s SIDE_MODULE=1 -o counter.wasm 
    2.   
  
  
  
  2. $ emcc counter.c -s WASM=1 -s SIDE_MODULE=1 -o counter.wasm 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. # 如果出现以下错误，则是由如下参数 
    5.   
  
  
  
  5. # WebAssembly Link Error: import object field 'DYNAMICTOP_PTR' is not a Number 
    6.   
  
  
  
  6. emcc counter.c -O1 -s WASM=1 -s SIDE_MODULE=1 -o counter.wasm  
    7.

这样我们就得到了 WebAssembly 代码：

与 JavaScript 集成使用

独立的 .wasm 文件并不能直接使用，我们需要在客户端中使用 JavaScript 代码将其加载进来。最朴素的加载 WebAssembly 的方式就是使用 fetch 抓取然后编译，整个过程可以封装为如下函数：

 
 
 
 
      
  
  
  
  1. // 判断是否支持 WebAssembly 
    2.   
  
  
  
  2.     if (!('WebAssembly' in window)) { 
    3.   
  
  
  
  3.       alert('当前浏览器不支持 WebAssembly！'); 
    4.   
  
  
  
  4.     } 
    5.   
  
  
  
  5.     // Loads a WebAssembly dynamic library, returns a promise. 
    6.   
  
  
  
  6.     // imports is an optional imports object 
    7.   
  
  
  
  7.     function loadWebAssembly(filename, imports) { 
    8.   
  
  
  
  8.       // Fetch the file and compile it 
    9.   
  
  
  
  9.       return fetch(filename) 
    10.   
  
  
  
  10.         .then(response => response.arrayBuffer()) 
    11.   
  
  
  
  11.         .then(buffer => WebAssembly.compile(buffer)) 
    12.   
  
  
  
  12.         .then(module => { 
    13.   
  
  
  
  13.           // Create the imports for the module, including the 
    14.   
  
  
  
  14.           // standard dynamic library imports 
    15.   
  
  
  
  15.           imports = imports || {}; 
    16.   
  
  
  
  16.           imports.env = imports.env || {}; 
    17.   
  
  
  
  17.           imports.env.memoryBase = imports.env.memoryBase || 0; 
    18.   
  
  
  
  18.           imports.env.tableBase = imports.env.tableBase || 0; 
    19.   
  
  
  
  19.           if (!imports.env.memory) { 
    20.   
  
  
  
  20.             imports.env.memory = new WebAssembly.Memory({ initial: 256 }); 
    21.   
  
  
  
  21.           } 
    22.   
  
  
  
  22.           if (!imports.env.table) { 
    23.   
  
  
  
  23.             imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' }); 
    24.   
  
  
  
  24.           } 
    25.   
  
  
  
  25.           // Create the instance. 
    26.   
  
  
  
  26.           return new WebAssembly.Instance(module, imports); 
    27.   
  
  
  
  27.         }); 
    28.   
  
  
  
  28.     } 
    29.

我们可以使用上述工具函数加载 wasm 文件：

 
 
 
 
      
  
  
  
  1. loadWebAssembly('counter.wasm') 
    2.   
  
  
  
  2.      .then(instance => { 
    3.   
  
  
  
  3.        var exports = instance.exports; // the exports of that instance 
    4.   
  
  
  
  4.        var count = exports. _count; // the "_count" function (note "_" prefix) 
    5.   
  
  
  
  5.        // 下面即可以调用 count 函数 
    6.   
  
  
  
  6.      } 
    7.   
  
  
  
  7.    ); 
    8.

而在笔者的脚手架中，使用了 wasm-loader 进行加载，这样可以将 wasm 直接打包在 Bundle 中，然后通过 import 导入：

 
 
 
 
      
  
  
  
  1. import React, { PureComponent } from "react"; 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. import CounterWASM from "./counter.wasm"; 
    4.   
  
  
  
  4. import Button from "antd/es/button/button"; 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. import "./Counter.scss"; 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. /** 
    9.   
  
  
  
  9.  * Description 简单计数器示例 
    10.   
  
  
  
  10.  */ 
    11.   
  
  
  
  11. export default class Counter extends PureComponent { 
    12.   
  
  
  
  12.   state = { 
    13.   
  
  
  
  13.     count: 0 
    14.   
  
  
  
  14.   }; 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.   componentDidMount() { 
    17.   
  
  
  
  17.     this.counter = new CounterWASM({ 
    18.   
  
  
  
  18.       env: { 
    19.   
  
  
  
  19.         memoryBase: 0, 
    20.   
  
  
  
  20.         tableBase: 0, 
    21.   
  
  
  
  21.         memory: new window.WebAssembly.Memory({ initial: 256 }), 
    22.   
  
  
  
  22.         table: new window.WebAssembly.Table({ initial: 0, element: "anyfunc" }) 
    23.   
  
  
  
  23.       } 
    24.   
  
  
  
  24.     }); 
    25.   
  
  
  
  25.     this.setState({ 
    26.   
  
  
  
  26.       count: this.counter.exports._count() 
    27.   
  
  
  
  27.     }); 
    28.   
  
  
  
  28.   } 
    29.   
  
  
  
  29.  
    30.   
  
  
  
  30.   /** 
    31.   
  
  
  
  31.    * Description 默认渲染函数 
    32.   
  
  
  
  32.    */ 
    33.   
  
  
  
  33.   render() { 
    34.   
  
  
  
  34.     const isWASMSupport = "WebAssembly" in window; 
    35.   
  
  
  
  35.  
    36.   
  
  
  
  36.     if (!isWASMSupport) { 
    37.   
  
  
  
  37.       return ( 
    38.   
  
  
  
  38.         
     
    39.   
  
  
  
  39.           浏览器不支持 WASM 
    40.   
  
  
  
  40.         
 
  •       ); 
  •     } 
  •  
  •     return ( 
  •        
  •          
  •           简单计数器示例： 
  •          
  •         {this.state.count} 
  •         
  •           type="primary" 
  •           onClick={() => { 
  •             this.setState({ 
  •               count: this.counter.exports._count() 
  •             }); 
  •           }} 
  •         > 
  •           点击自增 
  •          
  •       
    •  
  •     ); 
  •   } 
  • } 

    • 在使用 wasm-loader 时，其会调用 new WebAssembly.Instance(module, importObject);

    module 即 WebAssembly.Module 实例。

    importObject 即默认的由 wasm-loader 提供的对象。

    简单游戏引擎重构

    上文我们讨论了利用 WebAssembly 重构简单的计数器模块，这里我们以简单的游戏为例，交互式的感受 WebAssembly 带来的性能提升，可以直接查看游戏的在线演示。这里的游戏引擎即是执行部分计算与重新赋值操作，譬如这里的计算下一个位置状态的函数在 C 中实现为：

     
 
 
 
        
  
  
  
    1. EMSCRIPTEN_KEEPALIVE 
      2.   
  
  
  
    2. void computeNextState() 
      3.   
  
  
  
    3. { 
      4.   
  
  
  
    4.   loopCurrentState(); 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.   int neighbors = 0; 
      7.   
  
  
  
    7.   int i_m1, i_p1, i_; 
      8.   
  
  
  
    8.   int j_m1, j_p1; 
      9.   
  
  
  
    9.   int height_limit = height - 1; 
      10.   
  
  
  
    10.   int width_limit = width - 1; 
      11.   
  
  
  
    11.   for (int i = 1; i < height_limit; i++) 
      12.   
  
  
  
    12.   { 
      13.   
  
  
  
    13.     i_m1 = (i - 1) * width; 
      14.   
  
  
  
    14.     i_p1 = (i + 1) * width; 
      15.   
  
  
  
    15.     i_ = i * width; 
      16.   
  
  
  
    16.     for (int j = 1; j < width_limit; j++) 
      17.   
  
  
  
    17.     { 
      18.   
  
  
  
    18.       j_m1 = j - 1; 
      19.   
  
  
  
    19.       j_p1 = j + 1; 
      20.   
  
  
  
    20.       neighbors = current[i_m1 + j_m1]; 
      21.   
  
  
  
    21.       neighbors += current[i_m1 + j]; 
      22.   
  
  
  
    22.       neighbors += current[i_m1 + j_p1]; 
      23.   
  
  
  
    23.       neighbors += current[i_ + j_m1]; 
      24.   
  
  
  
    24.       neighbors += current[i_ + j_p1]; 
      25.   
  
  
  
    25.       neighbors += current[i_p1 + j_m1]; 
      26.   
  
  
  
    26.       neighbors += current[i_p1 + j]; 
      27.   
  
  
  
    27.       neighbors += current[i_p1 + j_p1]; 
      28.   
  
  
  
    28.       if (neighbors == 3) 
      29.   
  
  
  
    29.       { 
      30.   
  
  
  
    30.         next[i_ + j] = 1; 
      31.   
  
  
  
    31.       } 
      32.   
  
  
  
    32.       else if (neighbors == 2) 
      33.   
  
  
  
    33.       { 
      34.   
  
  
  
    34.         next[i_ + j] = current[i_ + j]; 
      35.   
  
  
  
    35.       } 
      36.   
  
  
  
    36.       else 
      37.   
  
  
  
    37.       { 
      38.   
  
  
  
    38.         next[i_ + j] = 0; 
      39.   
  
  
  
    39.       } 
      40.   
  
  
  
    40.     } 
      41.   
  
  
  
    41.   } 
      42.   
  
  
  
    42.   memcpy(current, next, width * height); 
      43.   
  
  
  
    43. } 
      44.

    而对应的 JS 版本引擎的实现为：

     
 
 
 
        
  
  
  
    1. computeNextState() { 
      2.   
  
  
  
    2.   let neighbors, iM1, iP1, i_, jM1, jP1; 
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.   this.loopCurrentState(); 
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.   for (let i = 1; i < this._height - 1; i++) { 
      7.   
  
  
  
    7.     iM1 = (i - 1) * this._width; 
      8.   
  
  
  
    8.     iP1 = (i + 1) * this._width; 
      9.   
  
  
  
    9.     i_ = i * this._width; 
      10.   
  
  
  
    10.     for (let j = 1; j < this._width - 1; j++) { 
      11.   
  
  
  
    11.       jM1 = j - 1; 
      12.   
  
  
  
    12.       jP1 = j + 1; 
      13.   
  
  
  
    13.       neighbors = this._current[iM1 + jM1]; 
      14.   
  
  
  
    14.       neighbors += this._current[iM1 + j]; 
      15.   
  
  
  
    15.       neighbors += this._current[iM1 + jP1]; 
      16.   
  
  
  
    16.       neighbors += this._current[i_ + jM1]; 
      17.   
  
  
  
    17.       neighbors += this._current[i_ + jP1]; 
      18.   
  
  
  
    18.       neighbors += this._current[iP1 + jM1]; 
      19.   
  
  
  
    19.       neighbors += this._current[iP1 + j]; 
      20.   
  
  
  
    20.       neighbors += this._current[iP1 + jP1]; 
      21.   
  
  
  
    21.       if (neighbors === 3) { 
      22.   
  
  
  
    22.         this._next[i_ + j] = 1; 
      23.   
  
  
  
    23.       } else if (neighbors === 2) { 
      24.   
  
  
  
    24.         this._next[i_ + j] = this._current[i_ + j]; 
      25.   
  
  
  
    25.       } else { 
      26.   
  
  
  
    26.         this._next[i_ + j] = 0; 
      27.   
  
  
  
    27.       } 
      28.   
  
  
  
    28.     } 
      29.   
  
  
  
    29.   } 
      30.   
  
  
  
    30.   this._current.set(this._next); 
      31.   
  
  
  
    31. } 
      32.

    本部分的编译依旧是直接将 [engine.c]() 编译为 engine.wasm，不过在导入的时候我们需要动态地向 wasm 中注入外部函数：

     
 
 
 
        
  
  
  
    1. this.module = new EngineWASM({ 
      2.   
  
  
  
    2.       env: { 
      3.   
  
  
  
    3.         memoryBase: 0, 
      4.   
  
  
  
    4.         tableBase: 0, 
      5.   
  
  
  
    5.         memory: new window.WebAssembly.Memory({ initial: 1024 }), 
      6.   
  
  
  
    6.         table: new window.WebAssembly.Table({ initial: 0, element: "anyfunc" }), 
      7.   
  
  
  
    7.         _malloc: size => { 
      8.   
  
  
  
    8.           let buffer = new ArrayBuffer(size); 
      9.   
  
  
  
    9.           return new Uint8Array(buffer); 
      10.   
  
  
  
    10.         }, 
      11.   
  
  
  
    11.         _memcpy: (source, target, size) => { 
      12.   
  
  
  
    12.           let sourceEnd = source.byteLength; 
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14.           let i, j; 
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.           for ( 
      17.   
  
  
  
    17.             (i = 0), (j = 0), (k = new Uint8Array(target)), (l = new Uint8Array( 
      18.   
  
  
  
    18.               source 
      19.   
  
  
  
    19.             )); 
      20.   
  
  
  
    20.             i < sourceEnd; 
      21.   
  
  
  
    21.             ++i, ++j 
      22.   
  
  
  
    22.           ) 
      23.   
  
  
  
    23.             k[j] = l[i]; 
      24.   
  
  
  
    24.         } 
      25.   
  
  
  
    25.       } 
      26.   
  
  
  
    26.     }); 
      27.

    到这里文本告一段落，笔者***需要声明的是因为这只是随手做的实验，***的代码包括对于内存的操作可能存在潜在问题，请读者批评指正。

    【本文是专栏作者“张梓雄 ”的原创文章，如需转载请通过与作者联系】

    戳这里，看该作者更多好文

    当前名称：WebAssembly 初体验：从零开始重构计算模块
    分享路径：http://www.shufengxianlan.com/qtweb/news4/211854.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    标签优化知识

    分类信息网站

    重庆教育培训网站建设　　 　云服务器　　 　成都标志设计　　 　乐山石膏隔墙　　 　营销型网站建设　　 　网站排名　　 　内江服务器托管　　 　网站空间　　 　微信小程序　　 　成都棕数机房　　 　成都网络公司　　 　网络营销　　 　成都网站建设　　 　成都SEO公司　　 　云服务器香港　　 　成都微信开发　　 　成都画册设计　　 　内江网站建设　　 　成都网站推广　　 　成都商城网站建设公司