首帧直出 (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 的 "首帧直出" 在启动画面结束之后的过渡更为自然,用户体验更佳。