Flutter为何无法处理非阻塞进程？异步代码致浏览器冻结疑问

你遇到的核心问题是Dart单线程模型在Web环境下的表现，和async函数的用法无关，本质是代码里的文件处理逻辑属于CPU密集型同步任务，直接阻塞了主线程：

• Dart是单线程执行模型，async/await只是让任务在事件循环里排队调度，并没有开启新线程。如果processFile里的文件处理（比如解析大文件、复杂计算）是同步执行的，哪怕包裹在async函数里，也会持续占用主线程，导致浏览器无法响应用户操作（比如点击「Another Process」按钮）。
• 就算移除sleep模拟代码，只要文件处理本身是同步的CPU密集操作，依然会阻塞主线程——sleep只是模拟耗时，真实的同步文件处理同样会占满主线程时间片。

要避免浏览器冻结，需要把CPU密集型的文件处理逻辑移到Web Worker中执行，Web Worker是浏览器提供的后台线程环境，能在不阻塞主线程的前提下处理耗时任务。

具体实现步骤：

1. 创建单独的Dart文件作为Web Worker脚本，比如file_worker.dart，在其中实现文件处理逻辑。
2. 主应用通过dart:html库的Worker类创建Worker实例，将文件数据发送给Worker。
3. Worker处理完成后，把结果返回主线程，主线程再更新UI。

示例代码片段：

• 主应用代码：

import 'dart:html';
import 'dart:convert';

void main() {
  final fileWorker = Worker('file_worker.dart.js');
  
  // 监听「File Process」按钮点击
  querySelector('#fileProcessBtn')?.onClick.listen((_) {
    final file = (querySelector('#fileInput') as FileInputElement).files?.first;
    if (file != null) {
      file.readAsArrayBuffer().then((buffer) {
        fileWorker.postMessage(buffer);
      });
    }
  });
  
  // 接收Worker返回的处理结果
  fileWorker.onMessage.listen((MessageEvent event) {
    final result = event.data;
    querySelector('#result')?.text = '处理完成: $result';
  });
  
  // 「Another Process」按钮逻辑不受主线程阻塞影响
  querySelector('#anotherProcessBtn')?.onClick.listen((_) {
    print('执行Another Process');
  });
}

• Worker脚本file_worker.dart：

import 'dart:html';
import 'dart:typed_data';

void main() {
  self.onMessage.listen((MessageEvent event) {
    final buffer = event.data as ByteBuffer;
    // 执行CPU密集的文件处理逻辑
    final processedData = processFileData(buffer.asUint8List());
    // 将结果返回主线程
    self.postMessage(processedData);
  });
}

String processFileData(Uint8List data) {
  // 模拟复杂文件解析/计算逻辑
  String result = '';
  for (int i = 0; i < data.length; i++) {
    result += data[i].toString();
  }
  return result;
}

• 注意：Flutter Web中使用Worker需要单独编译脚本，执行命令dart compile js file_worker.dart -o file_worker.dart.js生成Worker的JS文件，确保和主应用放在同一目录。

如果你的文件处理是IO密集型（比如读取本地大文件），可以优先使用Dart的异步IO API，但读取后的CPU密集处理仍需交给Worker。

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