WebAssembly在前端的应用——高性能Web应用构建

// WebAssembly 模块的基本加载和使用
class WASMBasicExample {
  constructor() {
    this.module = null;
    this.instance = null;
  }

  // 从二进制文件加载 WASM 模块
  async loadWASM(wasmUrl) {
    const response = await fetch(wasmUrl);
    const bytes = await response.arrayBuffer();

    this.module = await WebAssembly.compile(bytes);
    this.instance = await WebAssembly.instantiate(this.module, {
      // 导入对象 - 用于 WASM 调用 JS 函数
      env: {
        abort: () => console.error('WASM Abort called'),
        console_log: (ptr) => {
          const memory = this.instance.exports.memory;
          const buffer = new Uint8Array(memory.buffer, ptr);
          let str = '';
          for (let i = 0; buffer[i] !== 0; i++) {
            str += String.fromCharCode(buffer[i]);
          }
          console.log(str);
        }
      }
    });

    return this.instance;
  }

  // 编译和实例化 WASM 代码
  async instantiateWASM(wasmBytes, imports = {}) {
    const wasmModule = await WebAssembly.instantiate(wasmBytes, imports);
    return wasmModule.instance;
  }

  // 创建一个简单的 WASM 模块 (使用文本格式演示)
  createSimpleWASM() {
    // 这是一个简单的加法函数示例
    const wasmText = `
    (module
      (func $add (param $a i32) (param $b i32) (result i32)
        local.get $a
        local.get $b
        i32.add)
      (export "add" (func $add)))
    `;

    // 注意：实际项目中不会直接使用文本格式
    // 这里仅用于演示概念
    return WebAssembly.compileStreaming(fetch('/path/to/module.wasm'));
  }
}

// 使用示例
const wasmExample = new WASMBasicExample();

wasmExample.loadWASM('/simple-calculator.wasm')
  .then(instance => {
    // 调用 WASM 导出的函数
    const result = instance.exports.add(10, 20);
    console.log('Result:', result); // 输出: 30
  })
  .catch(error => {
    console.error('WASM loading failed:', error);
  });

// WebAssembly 内存管理示例
class WASMMemoryManager {
  constructor() {
    this.memory = new WebAssembly.Memory({ initial: 256, maximum: 1024 }); // 16MB初始，64MB最大
    this.uint8Array = new Uint8Array(this.memory.buffer);
    this.int32Array = new Int32Array(this.memory.buffer);
    this.float64Array = new Float64Array(this.memory.buffer);
  }

  // 分配内存
  allocate(size) {
    const ptr = this.instance.exports.malloc(size);
    return ptr;
  }

  // 释放内存
  deallocate(ptr) {
    this.instance.exports.free(ptr);
  }

  // 向 WASM 内存写入字符串
  writeString(str, ptr) {
    const strBytes = new TextEncoder().encode(str);
    this.uint8Array.set(strBytes, ptr);
    this.uint8Array[ptr + strBytes.length] = 0; // null终止符
    return strBytes.length;
  }

  // 从 WASM 内存读取字符串
  readString(ptr) {
    let str = '';
    let i = ptr;
    while (this.uint8Array[i] !== 0) {
      str += String.fromCharCode(this.uint8Array[i]);
      i++;
    }
    return str;
  }

  // 读取整数数组
  readIntArray(ptr, length) {
    const array = new Int32Array(length);
    for (let i = 0; i < length; i++) {
      array[i] = this.int32Array[(ptr >> 2) + i]; // >> 2 相当于 / 4 (32位整数)
    }
    return array;
  }

  // 写入整数数组
  writeIntArray(ptr, array) {
    for (let i = 0; i < array.length; i++) {
      this.int32Array[(ptr >> 2) + i] = array[i];
    }
  }

  // 扩展内存
  growMemory(pages) {
    const result = this.memory.grow(pages);
    if (result !== -1) {
      // 更新视图以反映新的内存大小
      this.uint8Array = new Uint8Array(this.memory.buffer);
      this.int32Array = new Int32Array(this.memory.buffer);
      this.float64Array = new Float64Array(this.memory.buffer);
      return true;
    }
    return false;
  }
}

// 高性能数学计算 - 矩阵运算
class WASMMathComputing {
  constructor() {
    this.wasmModule = null;
    this.memoryManager = new WASMMemoryManager();
  }

  async initialize() {
    this.wasmModule = await this.loadMathWASM();
  }

  async loadMathWASM() {
    // 加载包含数学运算函数的 WASM 模块
    const response = await fetch('/math-computing.wasm');
    const bytes = await response.arrayBuffer();

    return await WebAssembly.instantiate(bytes, {
      env: {
        memory: this.memoryManager.memory,
        console_log: (ptr) => {
          console.log(this.memoryManager.readString(ptr));
        }
      }
    });
  }

  // 矩阵乘法运算
  async matrixMultiply(matrixA, matrixB) {
    if (matrixA[0].length !== matrixB.length) {
      throw new Error('Matrix dimensions incompatible for multiplication');
    }

    const rowsA = matrixA.length;
    const colsA = matrixA[0].length;
    const colsB = matrixB[0].length;

    // 将矩阵数据写入 WASM 内存
    const ptrA = this.allocateMatrix(matrixA);
    const ptrB = this.allocateMatrix(matrixB);

    // 分配结果矩阵内存
    const ptrResult = this.memoryManager.allocate(rowsA * colsB * 4); // 4字节每个浮点数

    // 调用 WASM 中的矩阵乘法函数
    this.wasmModule.instance.exports.matrixMultiply(
      ptrA, rowsA, colsA,
      ptrB, colsA, colsB,
      ptrResult
    );

    // 读取结果
    const result = this.readMatrix(ptrResult, rowsA, colsB);

    // 清理内存
    this.memoryManager.deallocate(ptrA);
    this.memoryManager.deallocate(ptrB);
    this.memoryManager.deallocate(ptrResult);

    return result;
  }

  // 向 WASM 内存写入矩阵
  allocateMatrix(matrix) {
    const rows = matrix.length;
    const cols = matrix[0].length;
    const ptr = this.memoryManager.allocate(rows * cols * 4); // 4字节每个浮点数

    for (let i = 0; i < rows; i++) {
      for (let j = 0; j < cols; j++) {
        this.memoryManager.float64Array[(ptr >> 2) + (i * cols + j)] = matrix[i][j];
      }
    }

    return ptr;
  }

  // 从 WASM 内存读取矩阵
  readMatrix(ptr, rows, cols) {
    const matrix = [];
    for (let i = 0; i < rows; i++) {
      const row = [];
      for (let j = 0; j < cols; j++) {
        row.push(this.memoryManager.float64Array[(ptr >> 2) + (i * cols + j)]);
      }
      matrix.push(row);
    }
    return matrix;
  }

  // 数学函数优化 - FFT 计算
  async fftCompute(signal) {
    const length = signal.length;
    const ptrSignal = this.memoryManager.allocate(length * 8); // 8字节每个复数
    const ptrResult = this.memoryManager.allocate(length * 8);

    // 写入信号数据
    for (let i = 0; i < length; i++) {
      this.memoryManager.float64Array[(ptrSignal >> 3) + i] = signal[i]; // 实部
    }

    // 调用 FFT 计算
    this.wasmModule.instance.exports.fft(
      ptrSignal,
      ptrResult,
      length
    );

    // 读取结果
    const result = [];
    for (let i = 0; i < length; i++) {
      result.push({
        real: this.memoryManager.float64Array[(ptrResult >> 3) + i],
        imaginary: 0 // 简化示例
      });
    }

    // 清理内存
    this.memoryManager.deallocate(ptrSignal);
    this.memoryManager.deallocate(ptrResult);

    return result;
  }
}

// WASM 图像处理示例
class WASMImageProcessing {
  constructor() {
    this.wasmModule = null;
    this.canvas = null;
    this.ctx = null;
  }

  async initialize(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.wasmModule = await this.loadImageProcessingWASM();
  }

  async loadImageProcessingWASM() {
    const response = await fetch('/image-processing.wasm');
    const bytes = await response.arrayBuffer();

    return await WebAssembly.instantiate(bytes, {
      env: {
        memory: new WebAssembly.Memory({ initial: 256 })
      }
    });
  }

  // 高性能图像滤镜处理
  async applyFilter(imageData, filterType) {
    const { width, height, data } = imageData;
    const pixelCount = width * height;
    const byteLength = pixelCount * 4; // RGBA

    // 获取 WASM 内存
    const memory = this.wasmModule.instance.exports.memory;
    const uint8Array = new Uint8Array(memory.buffer);

    // 将图像数据复制到 WASM 内存
    const inputPtr = this.wasmModule.instance.exports.malloc(byteLength);
    uint8Array.set(data, inputPtr);

    // 分配输出缓冲区
    const outputPtr = this.wasmModule.instance.exports.malloc(byteLength);

    // 应用滤镜
    switch (filterType) {
      case 'grayscale':
        this.wasmModule.instance.exports.grayscaleFilter(
          inputPtr, outputPtr, width, height
        );
        break;
      case 'sepia':
        this.wasmModule.instance.exports.sepiaFilter(
          inputPtr, outputPtr, width, height
        );
        break;
      case 'edge-detection':
        this.wasmModule.instance.exports.edgeDetectionFilter(
          inputPtr, outputPtr, width, height
        );
        break;
      case 'gaussian-blur':
        this.wasmModule.instance.exports.gaussianBlurFilter(
          inputPtr, outputPtr, width, height
        );
        break;
      default:
        throw new Error(`Unknown filter type: ${filterType}`);
    }

    // 从 WASM 内存读取处理后的数据
    const resultData = new Uint8ClampedArray(
      memory.buffer.slice(outputPtr, outputPtr + byteLength)
    );

    // 创建新的 ImageData 对象
    const resultImageData = new ImageData(resultData, width, height);

    // 清理内存
    this.wasmModule.instance.exports.free(inputPtr);
    this.wasmModule.instance.exports.free(outputPtr);

    return resultImageData;
  }

  // 实时视频滤镜处理
  async processVideoFrame(videoElement, filterType) {
    // 从视频帧创建 ImageData
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = videoElement.videoWidth;
    tempCanvas.height = videoElement.videoHeight;
    const tempCtx = tempCanvas.getContext('2d');

    tempCtx.drawImage(videoElement, 0, 0);
    const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);

    // 应用滤镜
    const processedData = await this.applyFilter(imageData, filterType);

    // 绘制到目标画布
    this.ctx.putImageData(processedData, 0, 0);
  }

  // 批量图像处理
  async batchProcessImages(images, filterType) {
    const results = [];

    for (const image of images) {
      const imageData = this.getImageDataFromImage(image);
      const processedData = await this.applyFilter(imageData, filterType);

      results.push({
        original: image,
        processed: processedData,
        processingTime: Date.now() // 简化时间记录
      });
    }

    return results;
  }

  getImageDataFromImage(image) {
    const canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    return ctx.getImageData(0, 0, canvas.width, canvas.height);
  }

  // 高级图像处理 - 特征检测
  async detectFeatures(imageData, algorithm = 'fast') {
    const { width, height, data } = imageData;
    const pixelCount = width * height;
    const byteLength = pixelCount * 4;

    const memory = this.wasmModule.instance.exports.memory;
    const uint8Array = new Uint8Array(memory.buffer);

    const inputPtr = this.wasmModule.instance.exports.malloc(byteLength);
    uint8Array.set(data, inputPtr);

    // 为特征点分配内存 (假设最多1000个特征点)
    const featuresPtr = this.wasmModule.instance.exports.malloc(1000 * 8); // 2个double坐标

    // 调用特征检测算法
    const featureCount = this.wasmModule.instance.exports[`${algorithm}Detection`](
      inputPtr, featuresPtr, width, height
    );

    // 读取特征点数据
    const float64Array = new Float64Array(memory.buffer);
    const features = [];
    for (let i = 0; i < featureCount; i++) {
      features.push({
        x: float64Array[(featuresPtr >> 3) + (i * 2)],
        y: float64Array[(featuresPtr >> 3) + (i * 2 + 1)]
      });
    }

    // 清理内存
    this.wasmModule.instance.exports.free(inputPtr);
    this.wasmModule.instance.exports.free(featuresPtr);

    return features;
  }
}

// WASM 游戏引擎示例
class WASMGameEngine {
  constructor() {
    this.wasmModule = null;
    this.gameObjects = [];
    this.running = false;
    this.lastTime = 0;
  }

  async initialize() {
    this.wasmModule = await this.loadGameEngineWASM();
    this.setupPhysicsEngine();
    this.setupRenderingPipeline();
  }

  async loadGameEngineWASM() {
    const response = await fetch('/game-engine.wasm');
    const bytes = await response.arrayBuffer();

    return await WebAssembly.instantiate(bytes, {
      env: {
        memory: new WebAssembly.Memory({ initial: 1024 }), // 64MB
        // JavaScript导入函数
        js_set_timeout: (callback, delay) => {
          setTimeout(() => {
            this.wasmModule.instance.exports[callback]();
          }, delay);
        },
        js_random: () => Math.random(),
        js_get_timestamp: () => performance.now()
      }
    });
  }

  setupPhysicsEngine() {
    // 初始化物理引擎
    this.wasmModule.instance.exports.initPhysics(
      9.81,  // 重力
      0.016  // 时间步长 (60 FPS)
    );
  }

  setupRenderingPipeline() {
    // 设置渲染管线
    this.canvas = document.getElementById('game-canvas');
    this.gl = this.canvas.getContext('webgl2');
  }

  // 创建游戏对象
  createGameObject(type, x, y, properties = {}) {
    const id = this.wasmModule.instance.exports.createObject(
      type,
      x, y,
      properties.mass || 1,
      properties.velocityX || 0,
      properties.velocityY || 0
    );

    const gameObject = {
      id,
      type,
      x,
      y,
      properties,
      lastUpdate: performance.now()
    };

    this.gameObjects.push(gameObject);
    return gameObject;
  }

  // 游戏主循环
  gameLoop(currentTime) {
    if (!this.running) return;

    const deltaTime = currentTime - this.lastTime;
    this.lastTime = currentTime;

    // 更新物理引擎
    this.wasmModule.instance.exports.updatePhysics(deltaTime);

    // 更新游戏逻辑
    this.updateGameObjects(deltaTime);

    // 渲染
    this.render();

    // 继续循环
    requestAnimationFrame(this.gameLoop.bind(this));
  }

  updateGameObjects(deltaTime) {
    // 使用 WASM 更新游戏对象
    for (const obj of this.gameObjects) {
      this.wasmModule.instance.exports.updateObject(
        obj.id,
        deltaTime
      );
    }
  }

  render() {
    // 清除画布
    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);

    // 从 WASM 获取渲染数据
    const renderDataPtr = this.wasmModule.instance.exports.getRenderData();
    const renderDataSize = this.wasmModule.instance.exports.getRenderDataSize();

    const memory = this.wasmModule.instance.exports.memory;
    const uint32Array = new Uint32Array(memory.buffer, renderDataPtr, renderDataSize >> 2);

    // 渲染游戏对象
    for (let i = 0; i < renderDataSize; i += 8) { // 每个对象8个float
      const x = uint32Array[i >> 2];
      const y = uint32Array[(i >> 2) + 1];
      const rotation = uint32Array[(i >> 2) + 2];
      const scaleX = uint32Array[(i >> 2) + 3];
      const scaleY = uint32Array[(i >> 2) + 4];
      // ... 渲染逻辑
    }
  }

  // 高性能碰撞检测
  checkCollisions() {
    // 调用 WASM 中的碰撞检测算法
    const collisionCount = this.wasmModule.instance.exports.checkCollisions();
    const collisionsPtr = this.wasmModule.instance.exports.getCollisions();

    const memory = this.wasmModule.instance.exports.memory;
    const uint32Array = new Uint32Array(memory.buffer, collisionsPtr, collisionCount * 2);

    const collisions = [];
    for (let i = 0; i < collisionCount * 2; i += 2) {
      collisions.push({
        object1: uint32Array[i],
        object2: uint32Array[i + 1]
      });
    }

    return collisions;
  }

  // 音频处理 (如果 WASM 模块支持)
  playAudio(audioData, frequency, duration) {
    return this.wasmModule.instance.exports.playSound(
      audioData, frequency, duration
    );
  }

  start() {
    this.running = true;
    this.lastTime = performance.now();
    this.gameLoop(this.lastTime);
  }

  stop() {
    this.running = false;
  }
}

// React 组件中的 WASM 集成
import React, { useState, useEffect, useRef, useCallback } from 'react';

// WASM 图像处理组件
const WASMImageProcessor = ({ imageUrl, filter, onProcess }) => {
  const [isProcessing, setIsProcessing] = useState(false);
  const [processedImage, setProcessedImage] = useState(null);
  const [wasmModule, setWasmModule] = useState(null);
  const canvasRef = useRef(null);
  const imageRef = useRef(null);

  // 初始化 WASM 模块
  useEffect(() => {
    const initWASM = async () => {
      try {
        const response = await fetch('/image-processing.wasm');
        const bytes = await response.arrayBuffer();

        const module = await WebAssembly.instantiate(bytes, {
          env: {
            memory: new WebAssembly.Memory({ initial: 256 })
          }
        });

        setWasmModule(module);
      } catch (error) {
        console.error('Failed to initialize WASM:', error);
      }
    };

    initWASM();
  }, []);

  // 处理图像
  const processImage = useCallback(async (image) => {
    if (!wasmModule || !image) return;

    setIsProcessing(true);

    try {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');

      // 设置画布尺寸
      canvas.width = image.width;
      canvas.height = image.height;

      // 绘制原始图像
      ctx.drawImage(image, 0, 0);

      // 获取图像数据
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

      // 在 Worker 中处理图像以避免阻塞主线程
      const worker = new Worker('/wasm-image-processor-worker.js');

      worker.postMessage({
        imageData,
        filter,
        wasmBytes: await (await fetch('/image-processing.wasm')).arrayBuffer()
      });

      worker.onmessage = (event) => {
        const { processedImageData } = event.data;

        // 在主线程中创建新的 ImageData 并更新状态
        const processedCanvas = document.createElement('canvas');
        processedCanvas.width = processedImageData.width;
        processedCanvas.height = processedImageData.height;
        const processedCtx = processedCanvas.getContext('2d');
        processedCtx.putImageData(processedImageData, 0, 0);

        setProcessedImage(processedCanvas.toDataURL());
        setIsProcessing(false);

        if (onProcess) {
          onProcess(processedCanvas.toDataURL());
        }
      };
    } catch (error) {
      console.error('Image processing failed:', error);
      setIsProcessing(false);
    }
  }, [wasmModule, filter, onProcess]);

  // 加载图像
  useEffect(() => {
    if (!imageUrl) return;

    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      imageRef.current = img;
      processImage(img);
    };
    img.src = imageUrl;
  }, [imageUrl, processImage]);

  return (
    <div className="wasm-image-processor">
      {isProcessing && <div className="processing-indicator">Processing...</div>}

      {processedImage ? (
        <img src={processedImage} alt="Processed" className="processed-image" />
      ) : (
        <canvas ref={canvasRef} className="hidden" />
      )}
    </div>
  );
};

// WASM Worker 代码 (wasm-image-processor-worker.js)
self.onmessage = async function(event) {
  const { imageData, filter, wasmBytes } = event.data;

  // 编译 WASM 模块
  const wasmModule = await WebAssembly.instantiate(wasmBytes, {
    env: {
      memory: new WebAssembly.Memory({ initial: 256 })
    }
  });

  // 获取内存视图
  const memory = wasmModule.instance.exports.memory;
  const uint8Array = new Uint8Array(memory.buffer);

  // 将图像数据写入 WASM 内存
  const inputPtr = wasmModule.instance.exports.malloc(imageData.data.length);
  uint8Array.set(imageData.data, inputPtr);

  // 分配输出缓冲区
  const outputPtr = wasmModule.instance.exports.malloc(imageData.data.length);

  // 应用滤镜
  switch (filter) {
    case 'grayscale':
      wasmModule.instance.exports.grayscaleFilter(
        inputPtr, outputPtr, imageData.width, imageData.height
      );
      break;
    case 'blur':
      wasmModule.instance.exports.gaussianBlurFilter(
        inputPtr, outputPtr, imageData.width, imageData.height
      );
      break;
  }

  // 读取处理后的数据
  const processedData = new Uint8ClampedArray(
    memory.buffer.slice(outputPtr, outputPtr + imageData.data.length)
  );

  // 创建新的 ImageData 对象
  const processedImageData = new ImageData(
    processedData, imageData.width, imageData.height
  );

  // 返回结果
  self.postMessage({ processedImageData });

  // 清理内存
  wasmModule.instance.exports.free(inputPtr);
  wasmModule.instance.exports.free(outputPtr);
};

export default WASMImageProcessor;

<template>
  <div class="wasm-vue-component">
    <h3>WASM 数据处理</h3>

    <div class="controls">
      <input
        v-model="inputValue"
        @input="processData"
        placeholder="输入数据"
      />

      <div v-if="isLoading" class="loading">处理中...</div>

      <div v-if="result" class="result">
        <h4>处理结果:</h4>
        <pre>{{ JSON.stringify(result, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WASMProcessor',
  data() {
    return {
      wasmModule: null,
      inputValue: '',
      result: null,
      isLoading: false
    }
  },

  async mounted() {
    await this.initializeWASM();
  },

  methods: {
    async initializeWASM() {
      try {
        const response = await fetch('/data-processing.wasm');
        const bytes = await response.arrayBuffer();

        this.wasmModule = await WebAssembly.instantiate(bytes, {
          env: {
            memory: new WebAssembly.Memory({ initial: 256 }),
            console_log: (ptr) => {
              const memory = this.wasmModule.instance.exports.memory;
              const decoder = new TextDecoder();
              const str = decoder.decode(memory.buffer.slice(ptr, ptr + 1000));
              console.log(str);
            }
          }
        });
      } catch (error) {
        console.error('WASM initialization failed:', error);
      }
    },

    async processData() {
      if (!this.wasmModule || !this.inputValue) {
        this.result = null;
        return;
      }

      this.isLoading = true;

      try {
        // 将输入数据转换为 WASM 可处理的格式
        const inputData = new TextEncoder().encode(this.inputValue);
        const inputPtr = this.wasmModule.instance.exports.malloc(inputData.length);

        const memory = this.wasmModule.instance.exports.memory;
        const uint8Array = new Uint8Array(memory.buffer);
        uint8Array.set(inputData, inputPtr);

        // 调用 WASM 处理函数
        const outputPtr = this.wasmModule.instance.exports.processData(
          inputPtr,
          inputData.length
        );

        // 读取处理结果
        const outputLength = this.wasmModule.instance.exports.getDataLength(outputPtr);
        const outputData = new Uint8Array(
          memory.buffer,
          outputPtr,
          outputLength
        ).slice();

        const resultStr = new TextDecoder().decode(outputData);
        this.result = JSON.parse(resultStr);

        // 清理内存
        this.wasmModule.instance.exports.free(inputPtr);
        this.wasmModule.instance.exports.free(outputPtr);
      } catch (error) {
        console.error('Data processing failed:', error);
      } finally {
        this.isLoading = false;
      }
    }
  }
}
</script>

<style scoped>
.wasm-vue-component {
  padding: 20px;
}

.controls {
  margin-top: 20px;
}

.loading {
  color: #007bff;
  font-weight: bold;
}

.result {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}
</style>

// WASM 内存优化管理器
class WASMMemoryOptimizer {
  constructor(initialPages = 256) {
    this.memory = new WebAssembly.Memory({ initial: initialPages, maximum: 1024 });
    this.memoryManager = new DynamicMemoryManager(this.memory);
    this.allocationTracker = new AllocationTracker();
  }

  // 智能内存分配
  allocate(size, alignment = 16) {
    const alignedSize = this.alignSize(size, alignment);
    const ptr = this.memoryManager.allocate(alignedSize);

    this.allocationTracker.trackAllocation(ptr, alignedSize);
    return ptr;
  }

  // 批量内存分配优化
  allocateBatch(sizes, alignment = 16) {
    const totalSize = sizes.reduce((sum, size) => sum + this.alignSize(size, alignment), 0);
    const basePtr = this.memoryManager.allocate(totalSize);

    const allocations = [];
    let currentOffset = 0;

    for (const size of sizes) {
      const alignedSize = this.alignSize(size, alignment);
      allocations.push(basePtr + currentOffset);
      currentOffset += alignedSize;
    }

    this.allocationTracker.trackBatchAllocation(basePtr, totalSize, allocations);
    return allocations;
  }

  alignSize(size, alignment) {
    return Math.ceil(size / alignment) * alignment;
  }

  // 内存池管理
  createMemoryPool(poolSize) {
    return new WASMMemoryPool(this.memory, poolSize);
  }

  // 内存使用分析
  getMemoryUsage() {
    return {
      allocated: this.allocationTracker.getAllocatedBytes(),
      available: this.memory.buffer.byteLength - this.allocationTracker.getAllocatedBytes(),
      utilization: this.allocationTracker.getUtilization()
    };
  }

  // 垃圾回收（WASM内存清理）
  garbageCollect() {
    this.memoryManager.compact();
    this.allocationTracker.cleanup();
  }
}

// 动态内存管理器
class DynamicMemoryManager {
  constructor(memory) {
    this.memory = memory;
    this.freeBlocks = [{ start: 0, size: memory.buffer.byteLength }];
    this.usedBlocks = new Map();
    this.alignment = 16;
  }

  allocate(size) {
    // 确保对齐
    const alignedSize = Math.ceil(size / this.alignment) * this.alignment;

    // 查找合适的空闲块
    for (let i = 0; i < this.freeBlocks.length; i++) {
      const block = this.freeBlocks[i];

      if (block.size >= alignedSize) {
        // 使用该块
        const ptr = block.start;

        // 更新空闲块列表
        if (block.size > alignedSize) {
          this.freeBlocks[i] = {
            start: block.start + alignedSize,
            size: block.size - alignedSize
          };
        } else {
          // 移除完全使用的块
          this.freeBlocks.splice(i, 1);
        }

        // 记录已使用块
        this.usedBlocks.set(ptr, alignedSize);

        return ptr;
      }
    }

    // 如果没有足够空间，尝试扩容
    return this.expandAndAllocate(alignedSize);
  }

  expandAndAllocate(size) {
    const neededPages = Math.ceil(size / 65536); // 64KB per page
    const result = this.memory.grow(neededPages);

    if (result !== -1) {
      // 更新空闲块
      const newSize = neededPages * 65536;
      this.freeBlocks.push({
        start: this.memory.buffer.byteLength - newSize,
        size: newSize
      });

      return this.allocate(size);
    }

    throw new Error('Unable to allocate WASM memory');
  }

  free(ptr) {
    const size = this.usedBlocks.get(ptr);
    if (size) {
      // 添加到空闲块
      this.freeBlocks.push({ start: ptr, size });
      this.usedBlocks.delete(ptr);

      // 合并相邻的空闲块
      this.mergeFreeBlocks();
    }
  }

  mergeFreeBlocks() {
    this.freeBlocks.sort((a, b) => a.start - b.start);

    for (let i = 0; i < this.freeBlocks.length - 1; i++) {
      const current = this.freeBlocks[i];
      const next = this.freeBlocks[i + 1];

      if (current.start + current.size === next.start) {
        // 合并相邻块
        current.size += next.size;
        this.freeBlocks.splice(i + 1, 1);
        i--; // 重新检查当前位置
      }
    }
  }

  compact() {
    // 简单的内存整理实现
    // 在实际应用中，这会更复杂
  }
}

// 分配追踪器
class AllocationTracker {
  constructor() {
    this.allocations = new Map();
    this.batchAllocations = new Map();
  }

  trackAllocation(ptr, size) {
    this.allocations.set(ptr, {
      size,
      timestamp: Date.now(),
      stack: new Error().stack
    });
  }

  trackBatchAllocation(basePtr, totalSize, individualPtrs) {
    this.batchAllocations.set(basePtr, {
      totalSize,
      individualPtrs,
      timestamp: Date.now()
    });
  }

  getAllocatedBytes() {
    let total = 0;
    for (const alloc of this.allocations.values()) {
      total += alloc.size;
    }
    return total;
  }

  getUtilization() {
    // 这里应该根据实际内存大小计算利用率
    return this.getAllocatedBytes() / (64 * 1024 * 1024); // 假设64MB总内存
  }

  cleanup() {
    // 清理过期的分配记录
    const now = Date.now();
    for (const [ptr, alloc] of this.allocations) {
      if (now - alloc.timestamp > 300000) { // 5分钟过期
        this.allocations.delete(ptr);
      }
    }
  }
}

// WASM 性能监控器
class WASMPerformanceMonitor {
  constructor() {
    this.metrics = {
      executionTime: [],
      memoryUsage: [],
      functionCalls: new Map(),
      errorRate: 0
    };
    this.startTime = Date.now();
  }

  // 监控函数执行时间
  async monitorFunction(fn, ...args) {
    const start = performance.now();
    const startMemory = this.getCurrentMemoryUsage();

    try {
      const result = await fn(...args);

      const end = performance.now();
      const endMemory = this.getCurrentMemoryUsage();

      this.recordExecutionTime(end - start);
      this.recordMemoryChange(endMemory - startMemory);

      return result;
    } catch (error) {
      this.incrementErrorRate();
      throw error;
    }
  }

  // 用装饰器模式监控函数
  monitor(wrappedFn, functionName) {
    return async (...args) => {
      const start = performance.now();

      try {
        const result = await wrappedFn(...args);

        const end = performance.now();
        this.recordFunctionCall(functionName, end - start);

        return result;
      } catch (error) {
        this.recordFunctionError(functionName);
        throw error;
      }
    };
  }

  recordExecutionTime(duration) {
    this.metrics.executionTime.push({
      duration,
      timestamp: Date.now()
    });

    // 保持最近1000个测量值
    if (this.metrics.executionTime.length > 1000) {
      this.metrics.executionTime.shift();
    }
  }

  recordFunctionCall(functionName, duration) {
    if (!this.metrics.functionCalls.has(functionName)) {
      this.metrics.functionCalls.set(functionName, {
        calls: 0,
        totalDuration: 0,
        avgDuration: 0,
        maxDuration: 0,
        minDuration: Infinity
      });
    }

    const stats = this.metrics.functionCalls.get(functionName);
    stats.calls++;
    stats.totalDuration += duration;
    stats.avgDuration = stats.totalDuration / stats.calls;
    stats.maxDuration = Math.max(stats.maxDuration, duration);
    stats.minDuration = Math.min(stats.minDuration, duration);
  }

  recordFunctionError(functionName) {
    this.incrementErrorRate();
  }

  incrementErrorRate() {
    this.metrics.errorRate += 1;
  }

  getCurrentMemoryUsage() {
    // 获取当前内存使用情况
    return performance.memory ? performance.memory.usedJSHeapSize : 0;
  }

  recordMemoryChange(change) {
    this.metrics.memoryUsage.push({
      change,
      timestamp: Date.now()
    });
  }

  // 生成性能报告
  generateReport() {
    return {
      executionTime: this.calculateExecutionStats(),
      memoryUsage: this.calculateMemoryStats(),
      functionPerformance: this.getFunctionPerformance(),
      errorRate: this.getErrorRate(),
      uptime: Date.now() - this.startTime
    };
  }

  calculateExecutionStats() {
    if (this.metrics.executionTime.length === 0) return null;

    const durations = this.metrics.executionTime.map(t => t.duration);
    const sum = durations.reduce((a, b) => a + b, 0);

    return {
      count: durations.length,
      avg: sum / durations.length,
      min: Math.min(...durations),
      max: Math.max(...durations),
      p95: this.percentile(durations, 95),
      p99: this.percentile(durations, 99)
    };
  }

  calculateMemoryStats() {
    if (this.metrics.memoryUsage.length === 0) return null;

    const changes = this.metrics.memoryUsage.map(m => m.change);
    const positiveChanges = changes.filter(c => c > 0);
    const negativeChanges = changes.filter(c => c < 0);

    return {
      totalPositive: positiveChanges.reduce((sum, c) => sum + c, 0),
      totalNegative: negativeChanges.reduce((sum, c) => sum + c, 0),
      avgChange: changes.reduce((sum, c) => sum + c, 0) / changes.length
    };
  }

  getFunctionPerformance() {
    const performance = {};

    for (const [fnName, stats] of this.metrics.functionCalls) {
      performance[fnName] = {
        calls: stats.calls,
        avgDuration: stats.avgDuration,
        maxDuration: stats.maxDuration,
        minDuration: stats.minDuration
      };
    }

    return performance;
  }

  getErrorRate() {
    const totalTime = Date.now() - this.startTime;
    return this.metrics.errorRate / (totalTime / 1000); // 错误/秒
  }

  percentile(sortedArray, percentile) {
    const index = Math.ceil(percentile / 100 * sortedArray.length) - 1;
    return sortedArray[Math.max(0, index)];
  }
}