WebAssembly与Java协同工作：在浏览器中运行Java代码

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

```html

引言：为什么在WebAssembly中使用Java？

WebAssembly (WASM) 是一种低级二进制指令格式，旨在以接近原生的性能在浏览器中执行。长期以来，Java 因其虚拟机 (JVM) 而一直游离于该生态系统之外。然而，现代工具如 TeaVM 和 CheerpJ 允许将 Java 代码编译为 WebAssembly，为 Web 开发开辟了新的可能性。

在本文中，我们将分析 Java + WebAssembly 组合的工作原理，研究实际示例并评估其性能。您将了解如何将现有 Java 代码迁移到浏览器，而无需用 JavaScript 重写。

集成 Java 和 WebAssembly 的主要方法

在 WebAssembly 中运行 Java 代码主要有两种方式：

将字节码编译为 WASM — 使用 TeaVM，它将 Java 字节码转换为 WebAssembly。
在浏览器中运行 JVM — CheerpJ 在 WebAssembly 中模拟 JVM，从而允许运行未经修改的 Java 应用程序。

对于新项目，第一种方法更可取，因为它能生成更小的包体积并提供更好的性能。第二种方法适用于移植遗留应用程序。

使用 TeaVM 配置项目

要开始使用 TeaVM，请在 pom.xml (Maven) 中添加依赖项：

<dependency>
    <groupId>org.teavm</groupId>
    <artifactId>teavm-classlib</artifactId>
    <version>0.9.0</version>
</dependency>

创建一个用于编译的简单 Java 类：

import org.teavm.jso.JSBody;
import org.teavm.jso.JSExport;

public class Calculator {
    
    @JSExport
    public static int add(int a, int b) {
        return a + b;
    }
    
    @JSExport
    public static int factorial(int n) {
        if (n <= 1) return 1;
        return n * factorial(n - 1);
    }
}

@JSExport 注解使这些方法可以从 JavaScript 中访问。编译后，您将获得一个 WASM 模块和一个 JavaScript 包装器。

实际示例：编译并从 JavaScript 调用

让我们来看看从编译到在浏览器中调用的完整流程。首先，使用 TeaVM 插件编译 Java 代码：

<plugin>
    <groupId>org.teavm</groupId>
    <artifactId>teavm-maven-plugin</artifactId>
    <version>0.9.0</version>
    <configuration>
        <targetType>WEBASSEMBLY</targetType>
        <mainClass>com.example.Calculator</mainClass>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>

构建后（mvn package），target 文件夹中将出现以下文件：calculator.wasm 和 calculator.js。现在，创建一个 HTML 页面：

<!DOCTYPE html>
<html>
<head>
    <title>Java + WebAssembly Demo</title>
</head>
<body>
    <h1>基于Java的WASM计算器</h1>
    <p>结果: <span id="result"></span></p>
    
    <script src="calculator.js"></script>
    <script>
        // WASM加载完成后的回调函数
        teavmMain().then(function(api) {
            var sum = api.com.example.Calculator.add(15, 27);
            var fact = api.com.example.Calculator.factorial(5);
            document.getElementById('result').innerHTML = 
                '15 + 27 = ' + sum + '<br>' +
                '5! = ' + fact;
        });
    </script>
</body>
</html>

打开页面

```