Abo
  • Services:
Anzeige
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)

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

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)

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.

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.

Anzeige

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.

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.


eye home zur Startseite
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

opodeldox 14. Jan 2017

Initial wäre es schneller, aber danach hat man viele Technologien am Hals die man alle...



Anzeige

Stellenmarkt
  1. Caritasverband Düsseldorf e.V., Düsseldorf
  2. über Jobware Personalberatung, Raum Mannheim / Ludwigshafen
  3. Zürich Beteiligungs-Aktiengesellschaft, Bonn
  4. Universitätsklinikum Carl Gustav Carus Dresden, Dresden


Anzeige
Spiele-Angebote
  1. 5,99€
  2. 4,99€

Folgen Sie uns
       


  1. Mediacenter-Software

    Warum Kodi DRM unterstützen will

  2. Satelliteninternet

    Apple holt sich Satellitenexperten von Alphabet

  3. Microsoft

    Bis 2020 kein Office-Support mehr für einige Cloud-Dienste

  4. Sonos Playbase vs. Raumfeld Sounddeck

    Wuchtiger Wumms im Wohnzimmer

  5. Regierungspräsidium

    Docmorris muss Automatenapotheke schließen

  6. System-Update

    Android-Malware millionenfach aus Play Store runtergeladen

  7. Internetdienste

    VZBV fordert Kontrolle von Algorithmen

  8. SK Hynix

    Erste Grafikkarte mit GDDR6-Videospeicher erscheint 2018

  9. Internetzugang

    Bei halber Datenrate auch nur halber Preis

  10. Suchmaschinen

    Internet Archive will künftig Robots.txt-Einträge ignorieren



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Linux auf dem Switch: Freiheit kann ganz schön kompliziert sein!
Linux auf dem Switch
Freiheit kann ganz schön kompliziert sein!
  1. Digital Ocean Cloud-Hoster löscht versehentlich Primärdatenbank
  2. Google Cloud Platform für weitere Microsoft-Produkte angepasst
  3. Marktforschung Cloud-Geschäft wächst rasant, Amazon dominiert den Markt

Radeon RX 580 und RX 570 im Test: AMDs Grafikkarten sind schneller und sparsamer
Radeon RX 580 und RX 570 im Test
AMDs Grafikkarten sind schneller und sparsamer
  1. Grafikkarten AMD bringt vier neue alte Radeons für Komplett-PCs
  2. Grafikkarten AMD stellt Radeon RX 560 und Radeon RX 550 vor
  3. Grafikkarte AMDs Radeon RX 580 nutzt einen 8-Pol-Stromanschluss

Galaxy S8 vs. LG G6: Duell der Pflichterfüller
Galaxy S8 vs. LG G6
Duell der Pflichterfüller
  1. Smartphones Es wird eine spezielle Microsoft Edition des Galaxy S8 geben
  2. Galaxy S8 und S8+ im Kurztest Samsung setzt auf langgezogenes Display und Bixby
  3. Smartphones Samsungs Galaxy S8 könnte teuer werden

  1. Re: Völliger Bullshit

    KillerSoftware | 15:18

  2. Re: Google ist dann der nächste

    lestard | 15:17

  3. Re: Ist das Toslink-Problem nicht viel schlimmer?

    psycle | 15:16

  4. Re: Was mir an diesen Systemen gefällt

    chewbacca0815 | 15:16

  5. Re: ab 2007: Kompatibilität für lange Laufzeit

    burzum | 15:15


  1. 13:45

  2. 13:13

  3. 12:30

  4. 12:04

  5. 11:47

  6. 11:00

  7. 10:42

  8. 10:27


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel