Strategies to improve performance

[mark8044]

Sorry, this is more of a question that would belong in a 'discussions' area, but since we don't have one I'm putting this here, feel free to close this if you don't think its appropriate:

Ive customized my implementation and I'm at the point that I'm getting overall happy with your project and how it fits into my app.

EXCEPT for the performance/jank which is getting worse as I make my implementation more complex

My implementation is as follows

• What I have here is a large listvew.builder, and each listitem has a few native flutter widgets, and then a piece of HTML which I'm rendering using this package (located where the second short white line with the purple text FlutterHTMLcore)

• the HTML I'm rendering is of variable size and can be very short or quite long

• The HTML uses widgetFactory to render other small widgets, render images and render YouTube videos

• Each screen therefore is a list of 20 or more separate instances of the HtmlWidget on the same screen

• Im doing everything in flutter_widget_from_html_core: ^0.7.0-0

• For YouTube videos I've made my own widget using youtube_player_flutter package which is placed into tree using BuildOp <-- this is easily the most damaging to my performance and introduces significant amount of lag

        meta.register(BuildOp(
          onWidgets: (meta, widgets) => listOrNull(
            buildColumnPlaceholder(meta, widgets)?.wrapWith(
                  (_, child) =>
                  _youtubeWidget(videoId: youtubeCode!, fullURL: meta.element.text),
            ),
          ),
        ));

• For images I've made my own _imgWidget via buildImage (you helped me tremendously in implementing that in the past!). <-- This is the second most damaging to performance and introduces a little bit of jank

As more and more elements are getting rendered, there comes in some noticeable jank and sluggishness when scrolling

Question

1. Given the layout I described, are there any good general strategies I could implement to help improve my performance?
   • I was never clear if all this HTML is getting rendered as flutter widgets or within a web view? Would it be better to render all this one way or another?
2. Would it be wiser to simply render 1 giant htmlwidget that contains all of the smaller pieces and my native flutter UI elements as one large sheet of html code. I would have to convert all my native flutter UI and their onTap actions to some kind of html and they run it through the parser. Very difficult to do, but I would be willing to spend that time if it would improve performance

[daohoangson]

Have you done any kind of benchmark? E.g. what is the initial fps? Then scrolling fps? How complex is your HTML?

It's best if you can provide a sample screen with, say, 20 items in a list view. I have to troubleshoot further to find out the root cause.

Generally, things will become slower if you put other things on top of them. Rendering items separately is probably better than using a single HtmlWidget, and make sure you use ListView.builder. The HTML itself may also affect performance, a deep DOM tree will take more time than a flat one.

[daohoangson]

What makes you suspect the YouTube / image widget is causing it?

If possible, try to replace them with a simple SizedBox.shrink() to see if performance improves significantly. If it does improve, we should focus the optimization effort into those widgets.

[mark8044]

Have you done any kind of benchmark? E.g. what is the initial fps? Then scrolling fps? How complex is your HTML?

It's best if you can provide a sample screen with, say, 20 items in a list view. I have to troubleshoot further to find out the root cause.

Generally, things will become slower if you put other things on top of them. Rendering items separately is probably better than using a single HtmlWidget, and make sure you use ListView.builder. The HTML itself may also affect performance, a deep DOM tree will take more time than a flat one.

Im going to figure out how to properly benchmark and get you some FPS soon, once I figure out how to do it. For now my benchmarking is just from my own use and feeling how it scrolls

[mark8044]

What makes you suspect the YouTube / image widget is causing it?

If possible, try to replace them with a simple SizedBox.shrink() to see if performance improves significantly. If it does improve, we should focus the optimization effort into those widgets.

I know my Youtube widget is adding significant lag because as soon as a YouTube video scrolls on screen it gets very very laggy

class _u2bWidget extends StatefulWidget{
  late final String videoId;
  final String fullURL;
  _u2bWidget({this.videoId = '', this.fullURL = ''});

  @override
  __u2bWidgetState createState() => __u2bWidgetState();
}

class __u2bWidgetState extends State<_u2bWidget> {

  late YoutubePlayerController _controller;
  var _finalu2b;


  @override
  void initState(){

    _controller = YoutubePlayerController(
      initialVideoId: widget.videoId,
      flags: YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
      ),
    );

    _finalu2b = YoutubePlayerBuilder(
        player: YoutubePlayer(
          controller: _controller,
        ),
        builder: (context, player) {
          return player;
        }
    );

  }

  @override
  Widget build(BuildContext context) {

    String _nVideoId;

    if (widget.videoId == '')
    {
      //_nVideoId = YoutubePlayer.convertUrlToId(widget.fullURL)!;
    }

    return
      _finalu2b;


  }
}

I actually just for fun switched to your flutter_widget_from_html using the YouTube you have built into it using webview:true and its faster then that BuildOp widget I showed above. But its still laggy-- but an improvement

[daohoangson]

That doesn't sound good. The default implementation uses a web view to render YouTube player, which is as slow as it gets because Flutter platform view is slow and the web view is the worst. You need to check your player code to see why it's slower than a web view.

You don't need any fancy benchmarking, just turn on the performance overlay and scroll around.

[mark8044]

That doesn't sound good. The default implementation uses a web view to render YouTube player, which is as slow as it gets because Flutter platform view is slow and the web view is the worst. You need to check your player code to see why it's slower than a web view.

You don't need any fancy benchmarking, just turn on the performance overlay and scroll around.

Ok this is what I came up with (running on a pixel4a)
Scrolling around I get between 40-60FPS, passing the video areas with the noticeable lag gets me the 40FPS

Whats most striking is the frame rendering time is really bad in those same areas with videos where its just a red bar that shoots straight to the top of the graph.

• For all the text areas its below 16ms and the scroll speed is very nice and acceptable.
• When images are on screen or coming up soon (I assume its building the listview item just before its coming into view) the frame rendering hovers around 16ms, either slightly above or slightly below
• When videos are just about to come and on screen its solid red bars all the way at the top

I'll keep my code separated into multiple htmlwidget as you suggested

Do you have any ideas on strategies on what I'm doing wrong here?

[daohoangson]

Do you have a reproducible sample yet? I think some custom widget is slowing it down. If I can take a closer look, I may be able to suggest some thing.

[mark8044]

Do you have a reproducible sample yet? I think some custom widget is slowing it down. If I can take a closer look, I may be able to suggest some thing.

My code is massive and depends on remote json data and multiple providers, so it would not be a simple thing to demonstrate

But I've come up with 2 sources of the problem:

• gifs can cause jank and high cpu usage  flutter/flutter#88858 this problem with gifs which is out of our control
• Scrolling through a YouTube video widget or any non-gif image widget adds significant amounts of lag

Now as I mentioned, its hard to show my code, its very huge at this point with a lot of dependencies, providers and remote data. I tried to strip a lot of the fluff out to post here, this will obviously not run for you off the bat, but maybe you can see/understand my logic

I put the widgets in order they are being used from the initial screen opening to the HtmlWidget, sorry that its so long but I tried my best to cut it down.

I tried to also use your tinhte demo you sent me previously as a sort of model

class OpenScreen extends ConsumerStatefulWidget {
  OpenScreen({ Key? key}) : super(key: key);

  @override
  _OpenScreenState createState() => _OpenScreenState();

}

class _OpenScreenState extends ConsumerState<OpenScreen>
    with SingleTickerProviderStateMixin {

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

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


  @override
  Widget build(BuildContext context) {
    return CupertinoScaffold(
      body: Scaffold(
          appBar: AppBar(
            elevation: 0,
          ),
          body: Stack(
            children: [
              Container(
                child: Center(
                  child: Container(
                      margin: EdgeInsets.zero,
                      child: NotificationListener<ScrollNotification>(
                        onNotification: (scrollNotification) {},
                        child: ScreenBuilder(),
                      )
                  ),
                ),
              ),
            ],
          )
      ),
    );
  }

}



class ScreenBuilder extends ConsumerStatefulWidget {
  ScreenBuilder({ Key? key}) : super(key:key);

  @override
  _ScreenBuilderState createState() => _ScreenBuilderState();

}


class _ScreenBuilderState extends ConsumerState<ScreenBuilder> {

  final ItemScrollController itemScrollController = ItemScrollController();
  final ItemPositionsListener itemPositionsListener = ItemPositionsListener.create();


  @override
  void initState(){

  }

  @override
  Widget build(BuildContext context) {

    var data = ref.watch(dataprovider);

    return ScrollablePositionedList.builder(
      itemScrollController: itemScrollController,
      itemPositionsListener: itemPositionsListener,
      itemCount: data.length,
      itemBuilder: (context, index) {

          return DataCard(map: data.map[index]);

      },
    );


  }
}




class DataCard extends StatelessWidget{
  const DataCard({ Key? key, required this.map}) : super(key:key);
  final Map<String, dynamic> map;


  @override
  Widget build(BuildContext context) {

    return
      Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MarkLayoutHeader(map),
              MarkLayoutBody(map),
              MarkLayoutFooter(map),
            ],
          )
      );


  }
}




class MarkLayoutBody extends ConsumerWidget {
  final Map<String, dynamic> map;

  const MarkLayoutBody(this.map);


  @override
  Widget build(BuildContext context, WidgetRef ref) {


    var mainPostTextHTML = MyBase64Decode(map['textdecoded']).toString();


    return
      Center(
        child: Container(
            child:
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MyHTMLParse(text: mainPostTextHTML).parse(),
              ],
            )

        ),
      );



  }

}




class MyHTMLParse {
  late String text;
  late int postid;
  late double textPadding;

  MyHTMLParse({text, postid, textPadding}) {
    this.text = text;
    this.postid = postid;
    this.textPadding = (textPadding ?? 27.0) as double;
  }

  var _baseFontSize = 15.6;

  @override
  Widget parse() {

    return HtmlWidget(
      text,
      textStyle: TextStyle(
        color:Color.fromRGBO(0, 0, 0, 1),
        fontSize:_baseFontSize+2,
        letterSpacing: -0.25,
        height: 1.5,
      ),
      factoryBuilder: () =>
          _newWidgetFactory(
            textPadding: textPadding,
          ),
      onTapUrl: (url) => _URLhandler(url),
      customStylesBuilder: (element) {

        return null;
      },

      customWidgetBuilder: (element) {
        return null;
      },


    );

  }


}

_URLhandler(String url) {
  debugPrint(url);
}


class _quoteWidget extends StatelessWidget{
  final Widget child;
  _quoteWidget(this.child);


  @override
  Widget build(BuildContext context) {

    return
      Center(
          child: Container(
            padding: EdgeInsets.fromLTRB(4, 1, 1, 1),
            child: Container(
                width:double.infinity,
                decoration: BoxDecoration(
                    color: Colors.green
                ),
                padding: EdgeInsets.fromLTRB(13, 16, 16, 16),
                child:child
            ),
          ));

  }
}


class imgWidget extends ConsumerStatefulWidget{
  imgWidget(this.imgsrc);
  String imgsrc;

  @override
  _imgWidgetState createState() => _imgWidgetState();
}

class _imgWidgetState extends ConsumerState<imgWidget> {


  @override
  Widget build(BuildContext context) {

    return
      Container(
          child:
          MyImage(widget.imgsrc)  // Just a cachednetworkimage
      );
  }
}



class _u2bWidget extends StatefulWidget{
  late final String videoId;
  final String fullURL;
  _u2bWidget({this.videoId = '', this.fullURL = ''});

  @override
  __u2bWidgetState createState() => __u2bWidgetState();
}

class __u2bWidgetState extends State<_u2bWidget> {

  late YoutubePlayerController _controller;
  var _finalu2b;


  @override
  void initState(){

    _controller = YoutubePlayerController(
      initialVideoId: widget.videoId,
      flags: YoutubePlayerFlags(
        autoPlay: false,
        mute: false,
      ),
    );

    _finalu2b = YoutubePlayerBuilder(
        player: YoutubePlayer(
          controller: _controller,
        ),
        builder: (context, player) {
          return player;
        }
    );

  }

  @override
  Widget build(BuildContext context) {

    return
      _finalu2b;

  }
}




class _linkWidget extends StatelessWidget{
  late final String text;
  late final String url;
  _linkWidget({this.text = '', this.url = ''});


  @override
  Widget build(BuildContext context) {

    var _hostname = Uri.parse(url);

    return
      (...)

  }
}



class _newWidgetFactory extends WidgetFactory {

  final double textPadding;


  _newWidgetFactory({
    required this.textPadding,
  });


  @override
  Widget buildImage(BuildMetadata meta, ImageMetadata data) {

    if (meta.element.className == 'smiley')
    {

      ///smilies
      var _smilieName = meta.element.attributes["src"].toString();
      _smilieName = _smilieName.substring(0, _smilieName.indexOf('.'));
      _smilieName = _smilieName.substring(1, _smilieName.length);

      _smilieName = 'images/smilies/'+_smilieName+'.gif';

      return Image.asset(_smilieName);

    }
    else
    {
      return Container();
    }



  }


  @override
  Widget? buildText(BuildMetadata meta, TextStyleHtml tsh, InlineSpan text) {
    var built = super.buildText(meta, tsh, text);


    if (built != null) {

      if (!meta.element.classes.contains('quote_body'))
      {
        built = _TextPadding(built, textPadding);
      }

    }

    return built;
  }




  @override
  void parse(BuildMetadata meta) {

    final attrs = meta.element.attributes;
    final classes = meta.element.classes;

    if (meta.element.classes.contains('myimage')) {

      meta.register(BuildOp(
        onWidgets: (meta, widgets) => listOrNull(
          buildColumnPlaceholder(meta, widgets)?.wrapWith(
                  (_, child) =>
                  imgWidget(meta.element.text.toString(), postid)
          ),
        ),
      ));


    }


    if (meta.element.classes.contains('quote')) {

      meta.register(BuildOp(
        onWidgets: (meta, widgets) => listOrNull(
          buildColumnPlaceholder(meta, widgets)?.wrapWith(
                  (_, child) {

                if (meta.element.parent == null)
                {
                  return _TextPadding(_quoteWidget(child), textPadding-4);   // first quote
                }
                else
                {
                  return _quoteWidget(child);    //nested quotes (no text padding)
                }

              }
          ),
        ),
      ));
    }


    if (meta.element.classes.contains('quote_head')) {
      meta.register(BuildOp(
        onWidgets: (meta, widgets) => listOrNull(
          buildColumnPlaceholder(meta, widgets)?.wrapWith(
                (_, child) =>
                _quoteHeader(quoteheadertext: meta.element.text),
          ),
        ),
      ));
    }



    if (meta.element.localName == 'a') {

      ///CHEK FOR YOUTUBE
      RegExp regExp = new RegExp(
        r'.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*',
        caseSensitive: false,
        multiLine: false,
      );

      final match = regExp.firstMatch(meta.element.text); // <- This is the fix
      //print('$url -> $match');

      if (match != null)
      {

        /// YOUTUBE VIDEO
        var youtubeCode = match.group(1);

        meta.register(BuildOp(
          onWidgets: (meta, widgets) => listOrNull(
            buildColumnPlaceholder(meta, widgets)?.wrapWith(
                  (_, child) =>
                  _u2bWidget(videoId: youtubeCode!, fullURL: meta.element.text),
            ),
          ),
        ));



      }
      else
      {
        ///NOT YOUTUBE
        ///REGULAR LINK
        ///

        meta.register(BuildOp(
          onTree: (meta, tree) {
            tree.replaceWith(WidgetBit.inline(tree, _linkWidget(text:meta.element.text, url:meta.element.attributes['href'].toString())));
          },
        ));



      }

    }


    return super.parse(meta);
  }

}




class _TextPadding extends StatelessWidget {
  final Widget child;
  final double padding;

  const _TextPadding(this.child, this.padding, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext _) =>
      Padding(child: Container(width: double.infinity, child: child),
          padding: EdgeInsets.symmetric(horizontal: padding));


}

[daohoangson]

I have been able to adapt your sample code to run. Do you mind sharing some HTML too? A zip of 5 to 10 items should be enough to test the scrolling.

I also noticed a few scroll listener in the code, do you do anything expensive in the callback?