自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

WebAssembly 初體驗(yàn)：從零開(kāi)始重構(gòu)計(jì)算模塊

作者：佚名
開(kāi)發(fā) 開(kāi)發(fā)工具
WebAssembly 的概念、意義以及未來(lái)帶來(lái)的性能提升相信已是耳熟能詳，筆者在前端每周清單系列中也是經(jīng)常會(huì)推薦 WebAssembly 相關(guān)文章。不過(guò)筆者也只是了解其概念而未真正付諸實(shí)踐，本文即是筆者在將我司某個(gè)簡(jiǎn)單項(xiàng)目中的計(jì)算模塊重構(gòu)為 WebAssembly 過(guò)程中的總結(jié)。

[[194126]]

WebAssembly 的概念、意義以及未來(lái)帶來(lái)的性能提升相信已是耳熟能詳，筆者在前端每周清單系列中也是經(jīng)常會(huì)推薦 WebAssembly 相關(guān)文章。不過(guò)筆者也只是了解其概念而未真正付諸實(shí)踐，本文即是筆者在將我司某個(gè)簡(jiǎn)單項(xiàng)目中的計(jì)算模塊重構(gòu)為 WebAssembly 過(guò)程中的總結(jié)。在簡(jiǎn)單的實(shí)踐中筆者個(gè)人感覺(jué)，WebAssembly 的抽象程度會(huì)比 JavaScript 高不少，未來(lái)對(duì)于大型項(xiàng)目的遷移，對(duì)于純前端工程師而言可能存在的坑也是不少，仿佛又回到了被指針統(tǒng)治的年代。本文筆者使用的案例已經(jīng)集成到了 React 腳手架 create-react-boilerplate 中 ，可以方便大家快速本地實(shí)踐。

編譯環(huán)境搭建

我們使用 Emscripten 將 C 代碼編譯為 wasm 格式，官方推薦的方式是首先下載 Portable Emscripten SDK for Linux and OS X (emsdk-portable.tar.gz) 然后利用 emsdk 進(jìn)行安裝：

  1. $ ./emsdk update 
  2. $ ./emsdk install latest 
  3. # 如果出現(xiàn)異常使用 ./emsdk install sdk-1.37.12-64bit 
  4. # https://github.com/kripken/emscripten/issues/5272 

安裝完畢后激活響應(yīng)環(huán)境即可以進(jìn)行編譯：

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

筆者在本地執(zhí)行上述搭建步驟時(shí)一直失敗，因此改用了 Docker 預(yù)先配置好的鏡像進(jìn)行處理：

  1. # 拉取 Docker 鏡像 
  2. docker pull 42ua/emsdk 
  3.  
  4. # 執(zhí)行編譯操作 
  5. docker run --rm -v $(pwd):/home/src 42ua/emsdk emcc hello_world.c 

對(duì)應(yīng)的 Dockfile 如下所示，我們可以自行修改以適應(yīng)未來(lái)的編譯環(huán)境：

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

到這里基本環(huán)境已經(jīng)配置完畢，我們可以對(duì)簡(jiǎn)單的 counter.c 進(jìn)行編譯，源文件如下：

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

編譯命令如下所示，如果本地安裝好了 emcc 則可以直接使用，否則使用 Docker 環(huán)境進(jìn)行編譯：

  1. $ docker run --rm -v $(pwd):/home/src 42ua/emsdk emcc counter.c -s WASM=1 -s SIDE_MODULE=1 -o counter.wasm 
  2. $ emcc counter.c -s WASM=1 -s SIDE_MODULE=1 -o counter.wasm 
  3.  
  4. # 如果出現(xiàn)以下錯(cuò)誤，則是由如下參數(shù) 
  5. # WebAssembly Link Error: import object field 'DYNAMICTOP_PTR' is not a Number 
  6. emcc counter.c -O1 -s WASM=1 -s SIDE_MODULE=1 -o counter.wasm  

這樣我們就得到了 WebAssembly 代碼：

與 JavaScript 集成使用

獨(dú)立的 .wasm 文件并不能直接使用，我們需要在客戶(hù)端中使用 JavaScript 代碼將其加載進(jìn)來(lái)。最樸素的加載 WebAssembly 的方式就是使用 fetch 抓取然后編譯，整個(gè)過(guò)程可以封裝為如下函數(shù)：

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

我們可以使用上述工具函數(shù)加載 wasm 文件：

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

而在筆者的腳手架中，使用了 wasm-loader 進(jìn)行加載，這樣可以將 wasm 直接打包在 Bundle 中，然后通過(guò) import 導(dǎo)入：

  1. import React, { PureComponent } from "react"; 
  2.  
  3. import CounterWASM from "./counter.wasm"; 
  4. import Button from "antd/es/button/button"; 
  5.  
  6. import "./Counter.scss"; 
  7.  
  8. /** 
  9.  * Description 簡(jiǎn)單計(jì)數(shù)器示例 
  10.  */ 
  11. export default class Counter extends PureComponent { 
  12.   state = { 
  13.     count: 0 
  14.   }; 
  15.  
  16.   componentDidMount() { 
  17.     this.counter = new CounterWASM({ 
  18.       env: { 
  19.         memoryBase: 0, 
  20.         tableBase: 0, 
  21.         memory: new window.WebAssembly.Memory({ initial: 256 }), 
  22.         table: new window.WebAssembly.Table({ initial: 0, element: "anyfunc" }) 
  23.       } 
  24.     }); 
  25.     this.setState({ 
  26.       count: this.counter.exports._count() 
  27.     }); 
  28.   } 
  29.  
  30.   /** 
  31.    * Description 默認(rèn)渲染函數(shù) 
  32.    */ 
  33.   render() { 
  34.     const isWASMSupport = "WebAssembly" in window; 
  35.  
  36.     if (!isWASMSupport) { 
  37.       return ( 
  38.         <div> 
  39.           瀏覽器不支持 WASM 
  40.         </div> 
  41.       ); 
  42.     } 
  43.  
  44.     return ( 
  45.       <div className="Counter__container"> 
  46.         <span> 
  47.           簡(jiǎn)單計(jì)數(shù)器示例： 
  48.         </span> 
  49.         <span>{this.state.count}</span> 
  50.         <Button 
  51.           type="primary" 
  52.           onClick={() => { 
  53.             this.setState({ 
  54.               count: this.counter.exports._count() 
  55.             }); 
  56.           }} 
  57.         > 
  58.           點(diǎn)擊自增 
  59.         </Button> 
  60.       </div> 
  61.     ); 
  62.   } 
  63. } 

在使用 wasm-loader 時(shí)，其會(huì)調(diào)用 new WebAssembly.Instance(module, importObject);

module 即 WebAssembly.Module 實(shí)例。

importObject 即默認(rèn)的由 wasm-loader 提供的對(duì)象。

簡(jiǎn)單游戲引擎重構(gòu)

上文我們討論了利用 WebAssembly 重構(gòu)簡(jiǎn)單的計(jì)數(shù)器模塊，這里我們以簡(jiǎn)單的游戲?yàn)槔换ナ降母惺?WebAssembly 帶來(lái)的性能提升，可以直接查看游戲的在線演示。這里的游戲引擎即是執(zhí)行部分計(jì)算與重新賦值操作，譬如這里的計(jì)算下一個(gè)位置狀態(tài)的函數(shù)在 C 中實(shí)現(xiàn)為：

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

而對(duì)應(yīng)的 JS 版本引擎的實(shí)現(xiàn)為：

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

本部分的編譯依舊是直接將 [engine.c]() 編譯為 engine.wasm，不過(guò)在導(dǎo)入的時(shí)候我們需要?jiǎng)討B(tài)地向 wasm 中注入外部函數(shù)：

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

到這里文本告一段落，筆者***需要聲明的是因?yàn)檫@只是隨手做的實(shí)驗(yàn)，***的代碼包括對(duì)于內(nèi)存的操作可能存在潛在問(wèn)題，請(qǐng)讀者批評(píng)指正。

【本文是51CTO專(zhuān)欄作者“張梓雄 ”的原創(chuàng)文章，如需轉(zhuǎn)載請(qǐng)通過(guò)51CTO與作者聯(lián)系】

戳這里，看該作者更多好文

責(zé)任編輯：武曉燕 來(lái)源： 51CTO專(zhuān)欄
WebAssembly計(jì)算模塊
相關(guān)推薦

2018-09-14 17:16:22

云計(jì)算軟件計(jì)算機(jī)網(wǎng)絡(luò)

2022-04-01 08:09:03

操作系統(tǒng)嵌入式重構(gòu)

2015-11-17 16:11:07

Code Review

2018-04-18 07:01:59

Docker容器虛擬機(jī)

2019-01-18 12:39:45

云計(jì)算PaaS公有云

2020-07-02 15:32:23

Kubernetes容器架構(gòu)

2024-12-06 17:02:26

2010-05-26 17:35:08

配置Xcode SVN

2024-05-15 14:29:45

2023-11-16 08:53:05

NumPy庫(kù)Python

2024-11-28 10:35:47

2024-04-10 07:48:41

搜索引擎場(chǎng)景

2015-10-15 14:16:24

2011-04-06 15:55:50

開(kāi)發(fā)webOS程序webOS

2017-02-10 09:30:33

數(shù)據(jù)化運(yùn)營(yíng)流量

2010-02-22 09:39:52

HTML 5Web

2011-05-24 13:37:16

jQueryAjax

2015-09-18 10:09:05

Swift

2019-08-12 09:36:49

2018-08-20 08:15:50

編程語(yǔ)言Go語(yǔ)言切片
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)