Flutter如何抓取网页中JavaScript渲染的数据？

• 优化webview_flutter的使用效率

  • 提前初始化并复用WebViewController：不要每次抓取都新建实例，全局缓存一个控制器，后续直接加载目标URL，能把初始化耗时降到最低
  • 开启缓存策略：设置CacheMode.LOAD_CACHE_ELSE_NETWORK，重复请求时优先用本地缓存，减少网络和渲染开销
  • 关闭非必要功能：比如禁用图片加载、关闭JS弹窗等，减少页面渲染的资源消耗

• 用JS引擎配合HTML解析包手动渲染

  • 先用http或dio拉取页面原始HTML，再用quickjs_dart这类轻量JS引擎执行页面中的JavaScript代码，手动生成渲染后的内容
  • 简单示例：

    import 'package:http/http.dart' as http;
    import 'package:quickjs_dart/quickjs_dart.dart';
    
    Future<String> getRenderedHtml(String targetUrl) async {
      final resp = await http.get(Uri.parse(targetUrl));
      final jsRuntime = QuickJsRuntime();
      // 模拟基础的浏览器DOM环境
      jsRuntime.evaluate('''
        window = { document: { innerHTML: "${resp.body.replaceAll('"', '\\"')}" } };
        // 这里替换成页面实际的渲染JS逻辑
        ${extractRenderJs(resp.body)}
      ''');
      final result = jsRuntime.evaluate('document.innerHTML');
      jsRuntime.dispose();
      return result.toString();
    }
    

  • 注意：需要手动适配页面的JS依赖，复杂页面可能需要模拟更多DOM API，但整体速度远快于WebView

• 直接调用目标站点的后端API

  • 用浏览器开发者工具分析页面的网络请求，找到动态数据对应的XHR/fetch接口，直接请求这些接口获取JSON格式的数据，这是效率最高的方案
  • 操作方式：打开Chrome DevTools的Network面板，筛选XHR类型，找到返回目标数据的请求，复制请求头和参数后用dio或http直接调用

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