Netflix使用React制作高性能电视用户界面

Netflix一直不断通过开发电视界面以提高用户体验,比如眼球跟踪、视频预览等,他们的电视应用app是包括一个在本地设备安装的SDK,以及可以随时更新的JavaScript应用程序和称为Gibbon的渲染层。 最近他们介绍了在优化JavaScript应用程序性能方面所采用的一些策略:

The Netflix Tech Blog: Crafting a high-performance

在2015年,我们开始对电视UI架构进行批量重写和现代化。 我们决定使用React,因为它对UI开发的单向数据流和声明式方法使得我们的应用程序更容易符合逻辑。

显然,我们还是需要我们自己的React味道,因为那时它只针对DOM。 我们能够创建一个原型Gibbon。 这个原型最终演变成React-Gibbon,我们开始着手构建新的基于React的UI。

React-Gibbon的API对于任何使用React-DOM的人都是非常熟悉的。 主要的区别是,没有div,spans,inputs等,而是单一的“widget”绘图原语,其支持内联样式。


React.createClass({
render() {
return <Widget style={{ text: 'Hello World', textSize: 20 }} />;
}
});

性能是一个关键挑战
我们的应用程序运行在数百种不同的设备上,从最新的游戏机,如PS4 Pro到各种只有有限的内存和处理能力的消费电子设备 。 低端机器通常只有sub-GHz的单核CPU,低内存和有限的图形加速。 为了使事情更具挑战性,我们的JavaScript环境是一个旧的JavaScriptCore的非JIT版本。 这些限制使超级响应60fps体验特别棘手,在驱动React-Gibbon和React-DOM之间就存在许多差异。

测量,测量,测量
在接近性能优化时,重要的是首先确定将用于衡量您努力的成功指标。 我们使用以下指标来衡量整体应用程序性能:

键输入响应性 - 响应按键操作而修改界面呈现所需的时间
互动时间 - 启动应用程序的时间
每秒帧数 - 我们动画的一致性和平滑性
内存使用情况

...

Netflix在文章中介绍了改进关键输入响应性的几个办法。其它提高性能方面:

自定义复合组件 - 为我们的平台进行了超优化
预安装屏幕以提高感知的过渡时间
列表中的组件池
昂贵的计算的记忆

构建可以在各种设备上运行的Netflix TV UI体验是一个有趣的挑战。 Netflix在团队中培养以绩效为导向的文化,并不断努力改善每个人的体验,无论用户使用Xbox One S,智能电视还是流媒体棒等。