Run webassemly c program only way js

Here is not science webassemly role and the benefits of, your own Baidu.

So, how js run by way of a browser program it in c, which works as follows:

Another may be more detailed map:

1. Install emscripten

Documentation Address: https://emscripten.org/docs/getting_started/downloads.html

The following steps macOs the command:

step1: cloning project ------------ git clone https://github.com/emscripten-core/emsdk.git

step2: into the project directory -------- cd emsdk

step3: install the latest tools ---./emsdk install latest emsdk

step4: activate ---------------./emsdk activate latest

step5: add batch execution environment variable source ./emsdk_env.sh

Already installed, look at the version:

2. Write a c file (test.c) and converted .wasm

#include <emscripten/emscripten.h>

int EMSCRIPTEN_KEEPALIVE add(int a, int b) {
   return a + b;
}

int EMSCRIPTEN_KEEPALIVE fibonacci(int n) {
    if (n <= 1) {
        return n;
    } else {
        return fibonacci(n - 1) + fibonacci(n - 2);
    }
}

Note that red must, it is a different place compared to conventional c file.

Conversion command:

emcc test.c -Os -s WASM=1 -s SIDE_MODULE=1 -o test.wasm

Then you get a test.wasm file in the same directory.

3. By introducing .wasm and execute the function js

I am here to introduce a package of utility functions .wasm file, the code is as follows:

const importObj = {
    global: {},
    env: {
        'memory': new WebAssembly.Memory({initial: 256, maximum: 256}),
        '__memory_base': 0,
        'tableBase': 0,
        'table': new WebAssembly.Table({initial: 10, element: 'anyfunc'}),
        abort:alert
    }
};
 
export async function addModule(url,callback){
    fetch(url).then(response =>
        response.arrayBuffer()
    ).then(bytes => WebAssembly.instantiate(bytes,importObj)).then(results => {
        var instance = results.instance;
        var module = instance.exports;
        callback(module);
    });
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebAssemblyLearning</title>
</head>
<body>
    
</body>

<script type="module">
    import {addModule} from './utils/wasm.js ' ;
     var NUM = 42 is ; 
    function getDuring (FUNC, type) { 
        const Start = Date.now (); 
        FUNC (NUM); 
        the console.log (type + ' that performs conveyance Fibonacci number columns consumption time: ' + (Date.now () - Start) + "MS \ n- ' ); 
    }; 
    AddModule ( ' ./add.wasm ' , function (Module1) { 
        getDuring ( module._fibonacci , ' C program ' ); 
    }); 
    function Fibonacci (n-) { 
        IF (n-<= . 1) {
            return n;
        } else {
            return fibonacci(n - 1) + fibonacci(n - 2);
        };
    };
    console.error('递归次数:'+ num);
    getDuring(fibonacci,'JavaScript')
</script>

</html>

We see above a recursive implementation of the number of times that the number of deed Fibonacci 42 column summing function in two different ways, compare the performance of the two:

So for the pursuit of performance for web applications, webassemly it would be a good choice.

Run webassemly c program only way js

Guess you like