解决Flutter Web解析大Uri时的UI卡顿问题（不使用compute函数）

方案1：直接构造Uri实例，跳过Uri.parse解析 #

Uri.parse需要对超长字符串做完整解析，这是卡顿的核心原因。既然你已经明确Data URI的固定格式，完全可以直接通过Uri的构造函数创建实例，省去解析开销：

Uri _encodeDataUrl(String base64Data, String mimeType) => Uri(
      scheme: 'data',
      path: '$mimeType;base64,$base64Data',
    );

这个方法直接绕开了字符串解析步骤，性能提升明显，且代码改动极小，优先尝试该方案。

方案2：通过JS Web Worker处理字符串拼接（若方案1仍有卡顿） #

如果直接构造Uri还是存在性能瓶颈，可以借助Web Worker在后台线程完成字符串拼接操作，彻底避免阻塞UI线程：

步骤1：创建Web Worker JS文件（示例命名为data_uri_worker.js） #

self.onmessage = function(e) {
  const { mimeType, base64Data } = e.data;
  const dataUri = `data:${mimeType};base64,${base64Data}`;
  self.postMessage(dataUri);
};

步骤2：在Dart代码中调用Worker #

通过dart:js包实现与JS Worker的交互：

import 'dart:js' as js;
import 'dart:async';

Future<Uri> _encodeDataUrlInWorker(String base64Data, String mimeType) async {
  final completer = Completer<Uri>();
  
  // 创建Worker实例
  final worker = js.JsObject(js.context['Worker'], ['data_uri_worker.js']);
  
  // 监听Worker返回结果
  worker.callMethod('addEventListener', ['message', (js.JsObject event) {
    final dataUri = event['data'] as String;
    completer.complete(Uri.parse(dataUri)); // 此时字符串已在后台处理完成，解析开销极小
    worker.callMethod('terminate'); // 终止Worker释放资源
  }]);
  
  // 发送数据到Worker
  worker.callMethod('postMessage', [js.JsObject.jsify({
    'mimeType': mimeType,
    'base64Data': base64Data,
  })]);
  
  return completer.future;
}

使用时需在异步环境调用，避免阻塞UI：

// 示例：在UI逻辑中异步获取Uri并对接just_audio
final uri = await _encodeDataUrlInWorker(longBase64Data, 'audio/mpeg');
await audioPlayer.setAudioSource(AudioSource.uri(uri));

补充提示 #

• 可以测试just_audio是否支持直接传入Data URI字符串作为源，若支持则无需再调用Uri.parse，进一步减少开销。
• 如果你的base64数据是从原始二进制转换而来，编码操作也应放到Worker中完成，避免占用UI线程资源。

内容的提问来源于stack exchange，提问作者NovicePython127