前端用AES加密大文件时页面卡顿怎么办？

const workerCode = () => {

  self.onmessage = function (e) {

    const { key, iv, chunk } = e.data;

    crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, chunk)

      .then(encrypted => self.postMessage({ result: encrypted }))

      .catch(err => self.postMessage({ error: err.toString() }));

  };

};



// 主线程里动态创建worker

const createWorker = () => {

  const blob = new Blob(['(', workerCode.toString(), ')()'], { type: 'application/javascript' });

  return new Worker(URL.createObjectURL(blob));

};



let worker = createWorker();

let chunks = []; // 存储分块加密后的结果



function encryptFile(file, key, iv) {

  let reader = new FileReader();

  reader.onload = () => {

    let buffer = reader.result;

    let chunkSize = 1 * 1024 * 1024; // 每块1MB

    for (let i = 0; i < buffer.byteLength; i += chunkSize) {

      let chunk = buffer.slice(i, i + chunkSize);

      worker.postMessage({ key, iv, chunk });

    }

  };

  reader.readAsArrayBuffer(file);



  worker.onmessage = (e) => {

    if (e.data.error) console.error('加密失败:', e.data.error);

    else chunks.push(e.data.result);

    // 这里可以根据需要合并chunks或者直接上传

  };

}

// encryption-worker.js

self.onmessage = async function(event) {

    const { data, key } = event.data;

    const encryptedChunks = [];

    const chunkSize = 4 * 1024 * 1024; // 4MB 分块



    for (let i = 0; i < data.length; i += chunkSize) {

        const chunk = data.slice(i, i + chunkSize);

        const encryptedChunk = await crypto.subtle.encrypt(

            { name: "AES-GCM", iv: new Uint8Array(12) }, // 注意 IV 需要安全生成

            key,

            chunk

        );

        encryptedChunks.push(encryptedChunk);

    }

    self.postMessage(encryptedChunks);

};

const worker = new Worker('encryption-worker.js');

worker.postMessage({ data: fileData, key: encryptionKey });



worker.onmessage = function(event) {

    const encryptedChunks = event.data;

    // 合并加密后的数据

    const finalResult = mergeChunks(encryptedChunks); // 自己实现合并逻辑

    console.log('加密完成:', finalResult);

};