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

解道jdon 2021-05-04 16:49:14
react 使用 高性能 制作 netflix


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 }} />;
}
});
<p>

性能是一个关键挑战

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

测量,测量,测量

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

键输入响应性 - 响应按键操作而修改界面呈现所需的时间

互动时间 - 启动应用程序的时间

每秒帧数 - 我们动画的一致性和平滑性

内存使用情况

...

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

自定义复合组件 - 为我们的平台进行了超优化

预安装屏幕以提高感知的过渡时间

列表中的组件池

昂贵的计算的记忆

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

版权声明
本文为[解道jdon]所创,转载请带上原文链接,感谢
https://www.jdon.com/48662

  1. Two way linked list: I'm no longer one-way driving
  2. Vue event and form processing
  3. Reactive TraderCloud实时外汇开源交易平台
  4. Reactive tradercloud real time foreign exchange open source trading platform
  5. Node.js REST API的10个最佳实践
  6. Ten best practices of node.js rest API
  7. Fiddler advanced usage
  8. Process from Vue template to render
  9. Promise up (asynchronous or synchronous)
  10. Principle and implementation of promise
  11. Vs code plug in sharing - run code
  12. Vue practical notes (1) introduction of Ant Design
  13. Vue actual combat notes (2) introduction of element plus
  14. Introduction to webpack
  15. Webpack construction process
  16. Vue notes
  17. The experience and lessons of moving from ruby megalith architecture to go microservice
  18. Using leancloud to add artitalk module to hexo blog
  19. Implementation of chrome request filtering extension
  20. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]
  21. Gallop workflow engine design series 01 process element design
  22. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  23. Vue Mobile Music App learning [16]: player lyrics display development
  24. jquery cookie
  25. jquery cookie
  26. 体面编码之JavaScript
  27. JavaScript for decent coding
  28. React17 系统精讲 结合TS打造旅游电商平台
  29. React17 system combined with TS to build tourism e-commerce platform
  30. 2021-05-04 hot news
  31. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  32. gRPC-Web:替代REST的gRPC的Javascript库包
  33. The relationship between httpsession object and cooike and the construction of cookie object
  34. Grpc Web: a JavaScript library package to replace rest grpc
  35. Building reactive rest API with Java - kalpa Senanayake
  36. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  37. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  38. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  39. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  40. Vue.js比jQuery更容易学习
  41. Node.js的Reactor模式 与异步编程
  42. Vue. JS is easier to learn than jQuery
  43. Reactor mode of node.js and asynchronous programming
  44. 详解JavaScript中的正则表达式
  45. Explain regular expressions in JavaScript
  46. 详解JavaScript中的正则表达式
  47. Explain regular expressions in JavaScript
  48. JS: closure
  49. Write your own promise in promises / A + specification
  50. Analysis of the core mechanism of webpack from loader, plugin to egg
  51. On the import and export of webpack
  52. Interpretation of lodash source code (2)
  53. Hexo series (5) writing articles
  54. 有人用过JMeter或用HttpUnit写过测试吗????
  55. Has anyone ever used JMeter or written tests in httpUnit????
  56. JavaScript异步编程4——Promise错误处理
  57. Leetcode 1846. Reduce and rearrange the largest element of an array
  58. JavaScript asynchronous programming 4 -- promise error handling
  59. SQLite是一种经典的无服务器Serverless
  60. 通过Spring Boot Webflux实现Reactor Kafka