WebAssembly-techShare/index.html at master · polikesen123/WebAssembly-techShare · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>AssemblyScript isPrime demo</title>
</head>
<script src="./js/index.js"></script>

<body>
    <h4>
        第<input type="number" onchange="compuWA(event)" placeholder="1-45">项斐波那契数列
    </h4>
    <h4>
        第<input type="number" onchange="compuWA2(event)" placeholder="1-10000">个素数
    </h4>
    <div>
        <h4>
            使用WebAssembly
        </h4>
        <div id="comgetfibwa">

        </div>
    </div>
    <div>
        <h4>
            不用WebAssembly
        </h4>
        <div id="comgetfib">

        </div>
    </div>

</body>
<script>
    (async () => {
        const importObject = {
            env: {
                abort(_msg, _file, line, column) {
                    console.error("abort called at index.ts:" + line + ":" + column);
                }
            }
        };
        console.log(WebAssembly)
        const module = await WebAssembly.instantiateStreaming(
            fetch("./build/optimized.wasm"),
            importObject
        );

        getFibWA = module.instance.exports.getFib;
        getPrimeWA = module.instance.exports.getPrime;
    })();

    async function comGetFibWA(index) {
        comgetfibwa.innerText = `第${index}项斐波那契数列...`;
        return new Promise((res, rej) => {
            setTimeout(() => {
                let start = new Date();
                let num = getFibWA(index);
                comgetfibwa.innerText = `第${index}项斐波那契数列:${num};耗时:${new Date()-start}ms`;
                res();
            },100);
        });
    }

    async function comGetFib(index) {
        comgetfib.innerText = `第${index}项斐波那契数列...`;
        return new Promise((res, rej) => {
            setTimeout(() => {
                let start = new Date();
                let num = getFib(index);
                comgetfib.innerText = `第${index}项斐波那契数列:${num};耗时:${new Date()-start}ms`;
                res();
            },100);
        });
    }

    async function comGetPrimeWA(index) {
        comgetfibwa.innerText = `第${index}个素数...`;
        return new Promise((res, rej) => {
            setTimeout(() => {
                let start = new Date();
                let num = getPrimeWA(index);
                comgetfibwa.innerText = `第${index}个素数:${num};耗时:${new Date()-start}ms`;
                res();
            },100);
        });
    }

    async function comGetPrime(index) {
        comgetfib.innerText = `第${index}个素数...`;
        return new Promise((res, rej) => {
            setTimeout(() => {
                let start = new Date();
                let num = getPrime(index);
                comgetfib.innerText = `第${index}个素数:${num};耗时:${new Date()-start}ms`;
                res();
            },100);
        });
    }


    async function compuWA(event) {
        let num = event.target.value * 1;
        await comGetFibWA(num);
        await comGetFib(num);
    }

    async function compuWA2(event) {
        let num = event.target.value * 1;
        await comGetPrimeWA(num);
        await comGetPrime(num);
    }
</script>

</html>