Skip to main content

Summary

Many people have discussed and worked on the main problem that flutter_smooth aims to solve - the jank caused by slow build/layout. Here is a brief summary after I digged into the history, for completeness, just like the "literature review" that everyone needs to do when writing a paper. This list may be incomplete. Feel free to create an issue if you find something is missing, or something needs to be added for deeper understanding of the topic.

@fzyzcjy​

Put myself first since I fail the most times :)

Source​

Mainly this issue.

Main idea​

  • (link) Directly migrate the Fiber from React (JavaScript) into Flutter - failed
  • (link and prototype) Hack the build and layout phase in this prototype repo - failed
  • (link) Let animation be in a new subtree, and run its layout/paint firstly, with other low-priority subtree pauseable - failed
  • (link and link) Based on the idea above, and allow children to be half-baked, and use toPictureSync to avoid problem of half-done children - failed
  • (link) Use yield to make it suspendable, like Redux Saga - failed
  • (link and prototype) Use a new RenderObject which early returns when timeout - failed
  • (link) Dual isolates, using a second isolate to compute animation widgets - failed
  • (link) Experiment to use stackful coroutine or thread mutex to implement it - failed
  • (link) Enhance keframe by running as much as possible before deadline - failed
  • (link) The "preemption" proposal, which later becomes one of the main ideas of this package

@Hixie, @dnfield, ...​

... and @goderbauer, @chunhtai, @gspencergoog (who spoke in the discussions).

Source​

Some discussions starting from here and ending here. Hixie is also said to have tried an experiment (I have not found the details though).

Main idea​

Interruptible layout. "Do as much work as you can but yield after X ms, and resume when I call you back from where you left off" (quoted from here).

@gaaclarke​

Source​

Messages near here, when discussing my proposal.

Main idea​

Slowness of build/layout may be caused by memory locality which will be hard to fix.

@Nayuta403 and Alibaba​

Source​

A few sources:

  • The blogs (this and this) from @Nayuta403.
  • This blog from Alibaba (also quoted by @Nayuta403 in the blogs above).
  • Also having some discussions here and here among @Nayuta403 and Flutter team.

Main idea​

Separate frame. The heavy job is separated into multiple smaller jobs, and each frame only process one (by @Nayuta403) or a predetermined number (by Alibaba) of the jobs.

React Fiber​

Source​

N/A (It is an official release, not a discussion or experiment)

Main idea​

When the browser needs to do rendering work, JS suspends the current work to let the JavaScript thread be idle, and continue later.

@xanahopper, ...​

... and probably @Nayuta403, @JsouLiang, @wangying3426 since they seem to be the same team.

Sources​

  • Discussions such as this and a few after it.

Main idea​

  • Use multiple isolates instead of one
  • Use structure like React Fiber such as threaded tree, and convert a tree of widgets to a chain list, so that it can be suspended at any iteration of traversal (similar to React Fiber spirit).