首帧直出 (IFR)
Lynx 支持 "首帧直出",这意味着你的页面可以在被加载时直接展示内容,而不会产生白屏或其他中间状态。
联想到了 SSR?
这在 Web 上一般是通过类似 SSR 的方式实现的,但 Lynx 独创的双线程架构使得这一切变得更加简单。 你的应用代码运行在 Lynx 的 JavaScript 运行环境 中, 并会在主线程和后台线程两个线程上同时运行。 如果数据一开始就准备好,那么你的应用代码应该可以在主线程上直接渲染出首屏内容。
没有魔法
"首帧直出" 不是什么魔法,Lynx 有时无法实现 "首帧直出":
- 当你页面的 Bundle 无法同步加载时,Lynx 无法实现 "首帧直出"(例如使用异步的文件 I/O,此时导致你页面产生白屏的主要原因是文件 I/O 的异步)
- 当你页面的主要内容需要异步加载时,Lynx 无法实现 "首帧直出"(例如你的页面需要请求网络数据,此时导致你页面产生白屏的主要原因是网络请求的异步)
基本示例
在下面这个例子中,我们通过一个密集的数学计算(计算斐波那契数列)来模拟一次复杂的渲染。 虽然渲染耗时较多,但是 Lynx 在主线程同步完成了渲染,避免了 UI 中间状态,仍然可以做到 "首帧直出",而没有任何白屏。
使用宿主平台的数据进行 "首帧直出"
使用静态或者预设数据进行 "首帧直出" 是最简单的方式,但是也只能用于 Showcase 或者 Demo 等场景。 在实际应用中,我们通常需要使用宿主平台的数据进行 "首帧直出"。前往使用宿主平台数据了解更多。
Info
下面的代码使用了 initData.mockData,此数据是我们预先在 LynxExplorer 中设置的,用于模拟宿主平台的数据,以便于向你展示如何使用宿主平台的数据进行 "首帧直出"。
"首帧直出" 是 Lynx 的优势之一
你的终端用户可能很容易就能察觉到 "首帧直出" 带来的不同,这是 Lynx 的优势之一。
Info
下面的视频被放慢到 0.3x 速度以便于观察。
其他跨平台解决方案(无 "首帧直出")
Lynx(首帧直出)
可以看出,无 "首帧直出" 时,打开 App 会呈现 "启动画面(Splash Screen)→ 白屏 → 页面内容" 的变化过程,而 Lynx 的 "首帧直出" 在启动画面结束之后的过渡更为自然,用户体验更佳。