Netflix使用React製作高效能電視使用者介面

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 class="indent">

效能是一個關鍵挑戰
我們的應用程式執行在數百種不同的裝置上，從最新的遊戲機，如PS4 Pro到各種只有有限的記憶體和處理能力的消費電子裝置 。 低端機器通常只有sub-GHz的單核CPU，低記憶體和有限的圖形加速。 為了使事情更具挑戰性，我們的JavaScript環境是一箇舊的JavaScriptCore的非JIT版本。 這些限制使超級響應60fps體驗特別棘手，在驅動React-Gibbon和React-DOM之間就存在許多差異。

測量，測量，測量
在接近效能最佳化時，重要的是首先確定將用於衡量您努力的成功指標。 我們使用以下指標來衡量整體應用程式效能：

鍵輸入響應性 - 響應按鍵操作而修改介面呈現所需的時間
互動時間 - 啟動應用程式的時間
每秒幀數 - 我們動畫的一致性和平滑性
記憶體使用情況

...

Netflix在文章中介紹了改進關鍵輸入響應性的幾個辦法。其它提高效能方面：

自定義複合元件 - 為我們的平臺進行了超最佳化
預安裝螢幕以提高感知的過渡時間
列表中的元件池
昂貴的計算的記憶

構建可以在各種裝置上執行的Netflix TV UI體驗是一個有趣的挑戰。 Netflix在團隊中培養以績效為導向的文化，並不斷努力改善每個人的體驗，無論使用者使用Xbox One S，智慧電視還是流媒體棒等。