Netflix uses react to make high performance TV user interface

Jiedao jdon 2021-05-04 16:50:43
netflix uses react make high

Netflix We have been developing TV interfaces to improve the user experience , Like eye tracking 、 Video preview, etc , Their TV applications app It includes a device installed locally SDK, And can be updated at any time JavaScript Applications and applications are called Gibbon The rendering layer of . Recently they talked about optimizing JavaScript Some strategies for application performance :

The Netflix Tech Blog: Crafting a high-performance

stay 2015 year , We started to talk about TV UI Architecture for batch rewriting and modernization . We decided to use React, Because it's good for UI The one-way data flow and declarative methods developed make our applications more logical .

obviously , We still need our own React taste , Because at that time it was only for DOM. We can create a prototype Gibbon. This prototype eventually evolved into React-Gibbon, We're starting to build new ones based on React Of UI.

React-Gibbon Of API For any use React-DOM All of you are very familiar with . The main difference is , No, div,spans,inputs etc. , It's a single “widget” Drawing primitive , It supports inline styles .

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

Performance is a key challenge

Our applications run on hundreds of different devices , From the latest game console , Such as PS4 Pro To all kinds of consumer electronic devices with limited memory and processing power . Low end machines usually only have sub-GHz The mononuclear CPU, Low memory and limited graphics acceleration . To make things more challenging , our JavaScript The environment is an old JavaScriptCore Non - JIT edition . These limits make super responsive 60fps The experience is particularly tricky , Driving React-Gibbon and React-DOM There are many differences between them .

measurement , measurement , measurement

Near performance optimization , It's important to first identify the success indicators that will be used to measure your efforts . We use the following metrics to measure overall application performance :

Key input responsiveness - The time required to modify the interface presentation in response to key operation

Interaction time - Time to start the application

Frames per second - The consistency and smoothness of our animation

Memory usage


Netflix In this paper, several ways to improve the responsiveness of key inputs are introduced . Other ways to improve performance :

Custom composite components - Super optimized for our platform

Pre install the screen to improve the transition time of perception

Component pools in the list

Expensive computing memory

Build things that can run on a variety of devices Netflix TV UI Experience is an interesting challenge . Netflix Develop a performance oriented culture in the team , And constantly strive to improve everyone's experience , No matter the user uses Xbox One S, Smart TV or streaming media, etc .

本文为[Jiedao jdon]所创,转载请带上原文链接,感谢

  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