netflix webkit-based ui for tv devices
DESCRIPTION
Slide deck for a presentation at OSCON 2011 about why Netflix uses web technology for TV user interfaces and how we maximize performance for a broad range of devices.TRANSCRIPT
![Page 1: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/1.jpg)
Netflix Webkit-Based UIfor TV Devices
Matt McCarthy & Kim Trott
Netflix
July 29, 2011
![Page 2: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/2.jpg)
These slides were originally designed for a presentation. They’ll make much more sense if you read the speaker notes.
(On Slideshare, as of 8/11, speaker notes appear beneath the slide show.)
README
![Page 3: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/3.jpg)
1. What is Webkit TV UI?
2. Why web?
3. Engineering for UI variation
4. Performance for TV devices
Topics
![Page 4: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/4.jpg)
WEBKIT TV UIwhat’s the big deal?
![Page 5: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/5.jpg)
2’ UI vs. 10’ UI
2’ UI
10’ UI
![Page 6: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/6.jpg)
Some Netflix Webkit TV UI devices
…and many more
![Page 7: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/7.jpg)
I’m an open web. I’m a WebKit.
User Agent
![Page 8: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/8.jpg)
WHY WEB?we did think this through
![Page 9: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/9.jpg)
Dynamic Updates
![Page 10: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/10.jpg)
Common Technology
![Page 11: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/11.jpg)
Dynamically Add Locale Support
![Page 12: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/12.jpg)
A/B Testing
![Page 13: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/13.jpg)
HOW WE SUPPORT VAST VARIATION
not just “very carefully”
![Page 14: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/14.jpg)
Example: “Special” UI
![Page 15: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/15.jpg)
1. Which component handles the next keystroke?
2. How & where do we model navigation between components?
3. …And also, these components should be reusable between completely different UIs
Solve These
![Page 16: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/16.jpg)
• Tight coupling
• Mediator pattern
• DOM focus & events
Solutions We’ve Tried & Abandoned
![Page 17: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/17.jpg)
• States as the C in MVC–Can drive state transitions
• States are event handling contexts–User input–Programmatic events
Current Solution: State Transition System
![Page 18: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/18.jpg)
Search ResultsState
Search InputState
Search InputState
Search Compound
State
![Page 19: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/19.jpg)
Search ResultsState
Search ResultsState
Search InputState
Search Compound
State
![Page 20: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/20.jpg)
• Events
• Dependency injection
Loose Coupling
![Page 21: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/21.jpg)
PERFORMANCE AND MEMORY
building a lean, mean content browsing machine
![Page 22: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/22.jpg)
• Single-page, long-lived application
• High volume of data & images
• Require high performance
• Range of device capabilities
Why do we worry?
![Page 23: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/23.jpg)
Device Ecosystem
Video Memory
CPU GPU
Main Memory
CPU Architecture
Graphics driver
Network stack
Memory bus speed
![Page 24: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/24.jpg)
Device Ecosystem
CPU: 3.2 GHzGPU: 550 MHzMemory: 512 MB
CPU: 600 MHz 3.2 GHzMemory: 88 MB 512 MB
![Page 25: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/25.jpg)
Memory Budget
Total Memory- Operating System
- Webkit- Netflix SDK
- Network/Video Buffer
UI Budget
![Page 26: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/26.jpg)
Progressive enhancement
Animations
Request throttling
Cache sizes
Data pre-fetching
None enabled
5 concurrent
Small
Delayed,Small batches
All enabled
20 concurrent
Large
Frequent,Larger batches
Baseline Enhanced
![Page 27: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/27.jpg)
0.1 second: Feeling of instantaneous response
1.0 second: Keeps flow of thought seamless
10 seconds: Keeps the user’s attention
Perceived Performance
Nielsen 2010, 1993; Miller 1968; Card et al. 1991
![Page 28: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/28.jpg)
• Provide immediate feedback on user input
• Split up long running process
• Mask and reduce perceived wait times
• Background work and anticipate common requests
Ways to Improve Responsiveness
![Page 29: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/29.jpg)
• Wait until the user settles for expensive operations or paints
• Avoid DOM changes at the beginning of / during animations
• Tune delays to find the sweet spot
Ways to Improve Responsiveness
![Page 30: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/30.jpg)
Provide Visual Cues
![Page 31: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/31.jpg)
4
3
2
1
5
6
Naïve implementation• Progressively inserted new DOM
nodes• Animated very large DOM parent• Height ever-growing of DOM parent
Bad: Performance degraded as you scrolled
Performance Evolution: Scrolling Rows
![Page 32: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/32.jpg)
4
3
2
1
5
6
7
Naïve implementation• Progressively inserted new DOM
nodes• Animated very large DOM parent• Height ever-growing of DOM parent
Bad: Performance degraded as you scrolled
Performance Evolution: Scrolling Rows
![Page 33: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/33.jpg)
215
4
1
2
3
Optimized implementation• Recycle DOM nodes• Animate each row individually• Delaying modifying row until comes
into viewport or the user settles
Good: Performance consistent regardless of location
Performance Evolution: Scrolling Rows
![Page 34: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/34.jpg)
4
5
2
1
Optimized implementation• Recycle DOM nodes• Animate each row individually• Delaying modifying row until comes
into viewport or the user settles
Good: Performance consistent regardless of location
Performance Evolution: Scrolling Rows
3
![Page 35: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/35.jpg)
Software (CPU) = slowerHardware (GPU) = faster
![Page 36: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/36.jpg)
• Avoid CSS gradients, boxshot shadows–Use images instead
• Example: Full-screen CSS radial gradient–Paints were 13 times faster without it
CSS = SoftwareImage = Hardware
![Page 37: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/37.jpg)
Eliminate paints
![Page 38: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/38.jpg)
• Enables GPU acceleration of compositing parts of the page
• Greatly benefits CSS animations
Accelerated Compositing
![Page 39: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/39.jpg)
DOM Tree -> Render Tree -> RenderLayer Tree
Software path• Changes to a render layer require repainting all
overlapping layers
Hardware path• Some render layers paint to their own backing
surface (compositing layer)• Changes to a layer only repaint the contents of
that layer
Accelerated Compositing
![Page 40: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/40.jpg)
• 3D transforms
• Opacity changes
• Accidental– Overlapping a layer– Render engine
Several ways to create layers
![Page 41: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/41.jpg)
• Safe CSS properties–Transforms–Opacity
• Un-safe–Any other CSS properties–DOM manipulation
Leveraging layers
![Page 42: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/42.jpg)
• Keep layers small–Don’t inadvertently create gigantic layers–Memory consumption = width x height x 4
(bit depth)
• Animate smaller areas rather than large parts of the screen
• Trial and error, testing important
Tips
![Page 43: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/43.jpg)
Show Compositing Borders
![Page 44: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/44.jpg)
• Avoid unbounded growth
• Minimize the number of throwaway objects
• Use closures sparingly & only where necessary
• Dynamically load and unload code
Memory
![Page 45: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/45.jpg)
WHAT’S NEXT?i was led to believe there would be flying cars
![Page 46: Netflix Webkit-Based UI for TV Devices](https://reader031.vdocument.in/reader031/viewer/2022013003/548153f7b4af9fea158b5eda/html5/thumbnails/46.jpg)
QUESTIONS?
Matt McCarthy – @dnl2ba
Kim Trott – @ktrott00