Flutter_widget_from_html: Preload to improve performance

[orestesgaolin]

When navigating to a page that has HtmlWidget I encounter the lag.

For instance the ripple on the button on the previous page stops and few frames are dropped during page transition.

Is there a way to preload the content of the HtmlWidget?

[daohoangson]

Currently no. The widget does cache the built tree after the initial build though.

How big is your HTML? Are you running on a real device in release/profile mode or are you still testing in debug? I would like to receive the HTML and tweak the code for better performance if possible.

[orestesgaolin]

Currently no. The widget does cache the built tree after the initial build though.

How big is your HTML? Are you running on a real device in release/profile mode or are you still testing in debug? I would like to receive the HTML and tweak the code for better performance if possible.

Sure, I can send you the html privately. It's relatively large file and unfortunately it's generated by MS Word.

The issue occurs even in release mode.

[daohoangson]

Ah, Word generates incredibly complicated HTML. Please send the HTML to daohoangson at gmail dot com. I'll take a look, thank you.

[daohoangson]

I have tested your 18KB file and it shows up pretty fast on my test app (release mode). Probably it is slower in your app because of all the real business logic etc. The performance also depends on the device (e.g. powerful device will be faster).

Anyway, I have a working PR that will render the HTML asynchronously. All heavy work is put on a different thread to avoid blocking the Flutter main thread. Are you comfortable with changing pubspec to a git branch and rebuild the app to test? I'll give detailed instruction if you want do try this new work-in-progress version.

[orestesgaolin]

Sure, would love to test it!

Pozdrawiam,
Dominik Roszkowski

wt., 7 kwi 2020, 05:45 użytkownik Đào Hoàng Sơn [e-mail]
napisał:

I have tested your 18KB file and it shows up pretty fast on my test app
(release mode). Probably it is slower in your app because of all the real
business logic etc. The performance also depends on the device (e.g.
powerful device will be faster).

Anyway, I have a working PR that will render the HTML asynchronously. All
heavy work is put on a different thread to avoid blocking the Flutter main
thread. Are you comfortable with changing pubspec to a git branch and
rebuild the app to test? I'll give detailed instruction if you want do try
this new work-in-progress version.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/daohoangson/flutter_widget_from_html/issues/152#issuecomment-610155917,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEASZX6YUHJO2V57WU64TY3RLKOWHANCNFSM4MCKQD5A
.

[daohoangson]

Well, I have published a rc version for easy testing. Just update your pubspec.yaml:

  flutter_widget_from_html: ^0.4.0-rc.2020040701

[orestesgaolin]

Thanks, I can see a loader now and the navigation is much smoother. Is there any way to provide custom loader?

[orestesgaolin]

Ok, I've just found that I can provide my own buildAsyncBuilder:

(BuildContext _, AsyncSnapshot<Widget> snapshot) =>
    snapshot.hasData
        ? snapshot.data
        : const Center(
            child: Padding(
            padding: EdgeInsets.all(8),
            child: CircularProgressIndicator(),
          ))

[daohoangson]

Yes, that's the one 😆

[ercadev]

What's status on this one?
I'm rendering pretty light html except for an iframe in every page. I experience that the UI freezes for a short second before the content is showing.

[orestesgaolin]

I recommend to try newest prerelease. It works just fine in my app.

[daohoangson]

@ercadev: the async build feature is pretty solid, it has been released in the 0.4.0 rc. Howerver, the UI freeze caused by web view is unrelated. It is slow because Flutter must use a platform view for that.

[ercadev]

@orestesgaolin @daohoangson
Thank you I'll try it.
Can i please have documentation as mentioned earlier in this thread? Or how do I implement this?

I'll give detailed instruction if you want do try this new work-in-progress version.

update: it was pretty clear how to use it. Don't need any help

[daohoangson]

update: it was pretty clear how to use it. Don't need any help

Yes, if you use the 0.4.0 rc, it will kick in automatically if the html is huge. But as I said, it won't make a difference in your use case because the web view is slow by itself...