Instant First-Frame Rendering (IFR)
Lynx supports "Instant First-Frame Rendering", which means that your page can display content directly when it is loaded, without a white screen or other intermediate states.
Remind you of SSR?
This is usually achieved on the Web in a way similar to SSR, but Lynx's innovate dual-thread architecture makes it much easier. Your application code runs in Lynx's JavaScript runtime, and will run simultaneously on two threads: the main thread and the background thread. If the data is ready at the beginning, your application code should be able to render the first screen content directly on the main thread.
"Instant First-Frame Rendering" is not magic, Lynx sometimes cannot achieve "Instant First-Frame Rendering":
- When the Bundle of your page cannot be loaded synchronously, Lynx cannot achieve "Instant First-Frame Rendering" (for example, when using asynchronous file I/O, the main reason for your page to have a white screen is the asynchronous file I/O)
- When the main content of your page needs to be loaded asynchronously, Lynx cannot achieve "Instant First-Frame Rendering" (for example, your page needs to request network data, the main reason for your page to have a white screen is the asynchronous network request)
Basic Example
In the following example, we simulate a complex rendering through an intensive mathematical calculation (calculating the Fibonacci sequence). Although the rendering takes some time (obviously longer than the interval of frames), Lynx completes the rendering synchronously on the main thread, avoiding the UI intermediate state, and achieves "Instant First-Frame Rendering" without any white screen.
Do IFR with Data from Host Platform
Using static or preset data for "Instant First-Frame Rendering" is the simplest way, but it can only be used in scenes such as Showcase or Demo. In actual applications, we usually need to use the data of the host platform for "Instant First-Frame Rendering". Go to Using Data from Host Platform to learn more.
The following code uses initData.mockData, which is the data we set in LynxExplorer in advance to simulate the data of the host platform, so as to show you how to use the data of the host platform for "Instant First-Frame Rendering".
IFR is one of the advantages of Lynx
Your end users may easily notice the difference brought by "Instant First-Frame Rendering", which is one of the advantages of Lynx.
Video below is slowed down to 0.3x speed for better observation.
It can be seen that when there is no "Instant First-Frame Rendering", opening the App will present the change process of "Splash Screen → White Screen → Content", while Lynx's "Instant First-Frame Rendering" makes the transition after the splash screen ends more natural and provides a better user experience.