当前位置：首页 > 文章列表 > Golang > Go问答 > WebAssembly / Go （tinygo）的函数执行速度非常慢

WebAssembly / Go （tinygo）的函数执行速度非常慢

来源：stackoverflow 2024-02-06 23:00:25 0浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《WebAssembly / Go （tinygo）的函数执行速度非常慢》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

问题内容

我使用tinygo将go代码编译到webassembly，但我不明白为什么该函数需要17分钟才能执行，而javascript中的相同函数只需要4000毫秒。我做错了什么？也可以修改 go 中的函数，这样我就不必使用“syscall/js”？我尝试使用函数导出，但无法将不同类型的数组返回给 javascript。

这是我的go代码：

package main

import (
    "fmt"
    "math"
    "syscall/js"
)

type p struct {
    x float64
    y float64
}
type z struct {
    x float64
    y float64
}

func mandelbrottinygo(_ js.value, args []js.value) interface{} {

    maxiteration := args[0].int()
    var newz = z{0, 0}
    var newp = p{0, 0}
    n := 0
    cx := args[1].float()
    cy := args[2].float()
    d := 0.0

    for {
        newp = p{math.pow(newz.x, 2) - math.pow(newz.y, 2), 2 * newz.x * newz.y}
        newz = z{newp.x + cx, newp.y + cy}
        d = 0.5 * (math.pow(newz.x, 2) + math.pow(newz.y, 2))
        n += 1
        if d >= 2 || maxiteration <= n {
            break
        }
    }

    arr := []interface{}{n, d <= 2}

    return arr

}

func main() {
    fmt.println("tinygo")

    js.global().set("mandelbrottinygo", js.funcof(mandelbrottinygo))

    <-make(chan bool)
}

编译：

tinygo build -o tinygo.wasm -target wasm ./main.go

javascript 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="wasm_exec.js"></script>

    <script>

        const go = new Go();
        const WASM_URL = 'tinygo.wasm';

        var wasm;

        if ('instantiateStreaming' in WebAssembly) {
            WebAssembly.instantiateStreaming(fetch(WASM_URL), go.importObject).then(function (obj) {
                wasm = obj.instance;
                go.run(wasm);
            })
        } else {
            fetch(WASM_URL).then(resp =>
                resp.arrayBuffer()
            ).then(bytes =>
                WebAssembly.instantiate(bytes, go.importObject).then(function (obj) {
                    wasm = obj.instance;
                    go.run(wasm);
                })
            )
        }

    </script>
</head>
<body>

<button id="btnDraw">Draw</button>
<canvas id="myCanvas" style="display: block; margin-left: auto;margin-right: auto;">
</canvas>

<script>

    const MAX_ITERATION = 80

    var canvas = document.getElementById('myCanvas')
    var ctx = canvas.getContext('2d')

    const WIDTH = window.innerWidth
    const HEIGHT = window.innerHeight
    ctx.canvas.width = WIDTH
    ctx.canvas.height = HEIGHT

    const REAL_SET = { start: -2, end: 1 }
    const IMAGINARY_SET = { start: -1, end: 1 }

    const colors = new Array(16).fill(0).map((_, i) => i === 0 ? '#000' : '#' + Math.random().toString(16).substr(2, 6))

    function draw() {
        for (let i = 0; i < WIDTH; i++) {
            for (let j = 0; j < HEIGHT; j++) {
                complex = {
                    x: REAL_SET.start + (i / WIDTH) * (REAL_SET.end - REAL_SET.start),
                    y: IMAGINARY_SET.start + (j / HEIGHT) * (IMAGINARY_SET.end - IMAGINARY_SET.start)
                }

                //Call the JS function
                //const [m, isMandelbrotSet] = mandelbrot(complex)

                //Call the WebAssembly/tinyGo function
                const [m, isMandelbrotSet] = mandelbrotTinyGo(MAX_ITERATION, complex.x, complex.y)
                ctx.fillStyle = colors[isMandelbrotSet ? 0 : (m % colors.length - 1) + 1]
                ctx.fillRect(i, j, 1, 1)
            }
        }
    }

    function mandelbrot(c) {
        let z = { x: 0, y: 0 }, n = 0, p, d;
        do {
            p = {
                x: Math.pow(z.x, 2) - Math.pow(z.y, 2),
                y: 2 * z.x * z.y
            }
            z = {
                x: p.x + c.x,
                y: p.y + c.y
            }
            d = Math.sqrt(Math.pow(z.x, 2) + Math.pow(z.y, 2))
            n += 1
        } while (d <= 2 && n < MAX_ITERATION)
        return [n, d <= 2]
    }

    function start(){
        let startTime = performance.now()
        draw()
        let endTime = performance.now()
        console.log(`Call to doSomething took ${endTime - startTime} milliseconds`)
    }

    myButton = document.getElementById("btnDraw");

    myButton.addEventListener("click", function() {
        start();
    });
</script>

</body>
</html>

必须从 ..\tinygo\0.25.0\targets\ 目录复制文件 wasm_exec.js

tinygo版本0.25.0 windows/amd64（使用go版本go1.19.1和llvm版本14.0.0）