个人中心
gpt4 book ai didi

dart - 几页深后，页面转换变得非常缓慢

转载 作者：IT王子 更新时间：2023-10-29 07:07:04 24 4
gpt4 key购买 nike

我正在使用 Flutter 构建一个简单的维基百科浏览器。由于没有原生的 Flutter Webview，我必须手动解析 HTML 片段并将其转换为等效的 Flutter 小部件。我设法做到了，但是在深入浏览了几页之后(通过单击蓝色链接)，页面转换动画变得极其缓慢。

重现步骤:

添加如下依赖

dependencies:
  flutter:
    sdk: flutter
  fluro: "^1.1.0"
  html: "^0.13.2"

粘贴并运行以下代码(在 Release模式下以便更清楚地观察)。

import 'dart:async';
import 'dart:convert';

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:fluro/fluro.dart';
import 'package:html/dom.dart' as DOM;
import 'package:html/parser.dart' show parse;

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final router = new Router(); // Fluro router

  @override
  void initState() {
    super.initState();
    router.define(
      '/wiki',
      handler: new Handler(
        handlerFunc: (_, params) => new WikiPage(title: params['q'])
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: router.generator, // delegate to Fluro
      routes: {
        '/': (BuildContext context) => new WikiPage(title: 'Firefox')
      },
    );
  }
}

class WikiPage extends StatefulWidget {
  WikiPage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _WikiPageState createState() => new _WikiPageState();
}

class _WikiPageState extends State<WikiPage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(widget.title)),
      body: new FutureBuilder<String>(
        future: getPage(widget.title),
        builder: (context, snapshot) {
          if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
          if (snapshot.hasData) {
            if (snapshot.data.isEmpty) return new Container(); // empty result

            // parse HTML
            DOM.Document document = parse(snapshot.data);
            document.querySelector('.infobox')?.remove(); // remove the infobox table
            List<DOM.Element> paragraphs = document.getElementsByTagName('p');

            // convert HTML tree to Flutter widgets
            return new ListView(
              padding: const EdgeInsets.all(16.0),
              children: paragraphs.map((paragraph) =>
                new RichText(
                  text: new TextSpan(
                    text: '',
                    style: DefaultTextStyle.of(context).style,
                    children: paragraph.nodes.map((node) {
                      if (node.toString() == '<html a>') { // HTML <a> tag
                        String href = node.attributes['href'];
                        return new TextSpan( // as blue link
                          text: node.text,
                          style: Theme.of(context).textTheme.body1.copyWith(
                            color: Colors.blue
                          ),
                          recognizer: new TapGestureRecognizer()
                            ..onTap = () => Navigator.of(context).pushNamed(
                              '/wiki?q=${href.split('/')[2]}'
                            )
                        );
                      } else {
                        return new TextSpan(text: node.text);
                      }
                    }).toList()
                  )
                )
              ).toList()
            );

          } else { // waiting for data
            return new Center(child: new CircularProgressIndicator());
          }
        },
      )
    );
  }

  Future<String> getPage(String title) async {
    final String url = 'https://en.wikipedia.org/w/api.php?' +
    'action=mobileview&format=json&sections=0&noimages=1&noheadings=1' +
    '&formatversion=2&page=${Uri.encodeComponent(title)}';

    final response = await http.get(url);
    final json = JSON.decode(response.body);
    return json['mobileview']['sections'][0]['text']; // retrieve HTML string
  }
}
  1. 点击任何蓝色维基百科链接进行导航。最初页面转换动画(前 2-3 页)是平滑的。新页面从底部滑入(Android 平台)。
  2. 但是每次导航时页面转换都会变得不稳定，直到它只是卡住一段时间(自下而上的页面转换完全消失了)。

可能是什么问题？垃圾收集器问题？感谢您的帮助。

[√] Flutter (on Microsoft Windows [Version 10.0.15063], locale en-US, channel master)
    • Flutter at C:\Users\tzm\Downloads\flutter_sdk
    • Framework revision 6655074b37 (2 days ago), 2017-07-28 15:44:38 -0700
    • Engine revision 232f4636e5
    • Tools Dart version 1.25.0-dev.7.0

最佳答案

我找到了解决方案。诀窍是

  • 使用 Dart Isolate 将昂贵的 HTML 解析卸载到单独的线程。
  • 将 MaterialPageRoute 中的 maintainState 设置为 false，以便始终从内存中丢弃之前的计算。缺点是我们需要在从当前页面弹出时重新生成以前访问过的页面。

关于dart - 几页深后，页面转换变得非常缓慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45399495/

24 4 0
文章推荐： dart - 调用对象字段作为 ListTile 属性
文章推荐： ruby - 在 Ubuntu 14.04 上使用 RVM 安装 Ruby 2.2.2 时出错
文章推荐： ruby - RVM Gemsets 和 Ruby Gemfile 混淆
文章推荐： firebase - 如何正确配置我的 IDE 以查找导入包？
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com