TV-Oberfläche: Wie Netflix seine Renderzeiten massiv drückt

Damit die Netflix-App für TV-Geräte schnell reagiert, hat sich das Team viel einfallen lassen. So läuft die Javascript-Anwendung nicht im Browser, nutzt einen eigenen Renderer und das React-Framework ist mit Funktionen aufgebohrt worden, vor deren Einsatz das Team selbst warnt.

Artikel veröffentlicht am ,
Damit Netflix auf dem Fernseher nicht ruckelt, betreiben die Entwickler einen enormen Aufwand.
Damit Netflix auf dem Fernseher nicht ruckelt, betreiben die Entwickler einen enormen Aufwand. (Bild: Netflix)

Seit 2015 nutzt der Videostreaming-Anbieter Netflix das Javascript-Framework React für die Oberfläche seiner App auf Smart-TVs. Das große Problem für Netflix besteht dabei darin, auch auf vergleichsweise leistungsschwachen Geräten eine flüssige Darstellung der App zu liefern. In seinem Techblog erklärt das Unternehmen, dass insbesondere React dafür deutlich angepasst worden ist und das zuständige Team auch ungewöhnliche Wege gegangen ist.

Stellenmarkt
  1. Software-Entwickler (m/w/d) in PHP
    artvera GmbH & Co. KG, Berlin-Charlottenburg,Berlin
  2. Software Engineer (m/w/d) Identity und Access Management (IAM)
    Porsche AG, Zuffenhausen
Detailsuche

So ist zwar zum Beispiel das UI selbst in Javascript geschrieben, zum Rendern wird aber keine Browserengine genutzt, sondern eine eigene Renderschicht mit dem Namen Gibbon. Dies führt allerdings dazu, dass Netflix das React-Framework an Gibbon anpassen musste. Die neue API verhalte sich ähnlich zu React, das in das DOM rendert. Statt HTML-Elementen wie divs, spans und inputs gebe es aber lediglich ein Widget, das das Inlining von Style-Informationen unterstütze.

Inlining und tiefgreifendes Javascript zur Beschleunigung

Das Inlining wird darüber hinaus für viele weitere Bestandteile des Codes genutzt, allen voran für das Ergebnis des Funktionsaufrufes create.Element, das zur Build-Zeit Inline-ersetzt wird. Damit das Inling auch überall im Code genutzt werden kann, haben die Entwickler zusätzlich dazu ihre interne API so gestaltet, dass vollständig auf die Verwendung des Ref-Attributs verzichtet werden kann.

Explizit nicht zur Nachahmung von Netflix empfohlen ist die Vorgehensweise, verschiedene Props mehrerer Components zusammenzuführen, da diese viele Dinge völlig unerwartet kaputt machen könnte. Netflix nutzt hierzu die Prototypenkette statt einer Iteration, was wiederum aber zum Einfrieren eines Objekts führen könne. In extremen Testfällen habe die Renderzeit damit aber von 500 ms auf nur 60 ms reduziert werden können.

Golem Karrierewelt
  1. Blender Grundkurs: virtueller Drei-Tage-Workshop
    12.-14.12.2022, Virtuell
  2. Automatisierung (RPA) mit Python: virtueller Zwei-Tage-Workshop
    02./03.03.2023, Virtuell
Weitere IT-Trainings

Darüber hinaus ist das Team in der Lage, die Werte von Style-Elementen eines Widgets zu memoisieren, die sich bei einem Rendervorgang nicht ändern. So muss nur die tatsächlich aufgetretene Änderung berechnet werden. Mittels statischer Code-Analyse kann eine mögliche Änderung vorhergesagt werden. Der dafür nötige Code beschleunige die Anwendung zwar weiter, der zu verteilende Code werde dadurch jedoch wesentlich größer.

Derartiger Aufwand rechne sich aber letztlich für Netflix, immerhin sei die Leistung der App das wohl wichtigste Merkmal für die Nutzer.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Bizzi 16. Jan 2017

Ich glaube, die bauen eher auf JS, um Plattformunabhängiger zu sein. Auf meinem SmartTV...

Andre_af 15. Jan 2017

Das ist jetzt aber Äpfel mit Birnen vergleichen. Wenn du die "Alles ohne Mehrkosten...

omtr 14. Jan 2017

tatsächlich war mein erster eindruck, nachdem ich mir seit einigen jahren amazon prime...

Jesper 14. Jan 2017

In den Accounteinstellungen gibt's Punkte für Sound- und Untertitelpräferenzen



Aktuell auf der Startseite von Golem.de
Viertes Mobilfunknetz
1&1 lässt laut Bericht Verkauf des Unternehmens durchrechnen

Fast keine eigenen Antennenstandorte, schwaches Open RAN, steigende Zinsen und Energiekosten: Ralph Dommermuth soll den Ausstieg bei 1&1 prüfen lassen. Das Unternehmen dementiert dies klar.

Viertes Mobilfunknetz: 1&1 lässt laut Bericht Verkauf des Unternehmens durchrechnen
Artikel
  1. App-Store-Rauswurfdrohung: Musk attackiert Apple
    App-Store-Rauswurfdrohung
    Musk attackiert Apple

    Apple hat angeblich seine Werbeaktivitäten auf Twitter weitgehend eingestellt und mit einem App-Store-Rauswurf gedroht.

  2. Verkehrsunternehmen: 49-Euro-Ticket kommt wohl erst im Mai
    Verkehrsunternehmen
    49-Euro-Ticket kommt wohl erst im Mai

    Das 49-Euro-Ticket sollte Anfang 2023 erscheinen, doch Verkehrsunternehmen erwarten den Start erst im Mai 2023. Kommunen drohen gar mit Blockade.

  3. Prozessor-Bug: Wie Intel einen Bug im ersten x86-Prozessor fixte
    Prozessor-Bug
    Wie Intel einen Bug im ersten x86-Prozessor fixte

    Der Prozessor tut nicht ganz, was er soll? Heute löst das oft eine neue Firmware, vor 40 Jahren musste neues Silizium her.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • PS5 bestellbar • Samsung Cyber Week • Top-TVs (2022) LG & Samsung über 40% günstiger • AOC Curved 34" WQHD 389€ • Palit RTX 4080 1.499€ • Astro A50 Gaming-Headset PS4/PS5/PC günstiger • Gigabyte RX 6900 XT 799€ • Thrustmaster Flight Sticks günstiger [Werbung]
    •  /