close

Вход

Забыли?

вход по аккаунту

?

Netflix Webkit-Based UI for TV Devices Presentation

код для вставкиСкачать
Netflix Webkit-Based UI
for TV Devices
Matt McCarthy & Kim Trott
Netflix
July 29, 2011
Topics
1.
2.
3.
4.
5.
What is Webkit TV UI?
Why web?
A/B testing
Engineering for UI variation
Performance for TV devices
what’s the big deal?
WEBKIT TV UI
2’ UI vs. 10’ UI
2’ UI
10’ UI
Some Netflix Webkit TV UI devices
…and many more
User Agent
I’m an open web.
I’m a WebKit.
we did think this through
WHY WEB?
Dynamic Updates
Common Technology
Dynamically Add Locale Support
A/B Testing
because you don’t know until you try
A/B TESTING
2007
Little Iteration in Native UI
2009
Rapid Iteration in Web UI
2010
2010
2010
2010
Core Metrics
• Retention
• Streaming hours
Which UI led to the most streaming?
Special
57.1%
56.3%
Navigator
Plus
58.5%
Secondary Metrics
• Application launch count
• Hotkey engagement count
• Discovery source (e.g. browsing, search,
similar)
• Which TV/movie category
• Etc.
What else does Netflix test?
•
Navigation schemes
•
Visual designs
•
Major UI concepts
•
Minor UI variations
•
Emphasis on movies vs. TV
•
Taste preference input (stars, survey…)
•
Presentation & explanation of recommendations
•
Movie discovery sources & algorithms (Queue, similar titles, genres, personalized genres…)
•
Recommendation algorithms
•
Movie list length, selection, & quantity
•
Website button placement, size & behavior
•
Website page load time
•
Box art size
•
Link/button labels
•
Streaming encoding quality
•
Streaming startup time
•
Sign-up design
•
Sign-up wizard flow
•
Almost every new feature
…And a lot of other stuff over the last 10 years
not just “very carefully”
HOW WE SUPPORT
VAST VARIATION
Loose Coupling
• Events
• Dependency injection
Example: Special
Solve These
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
Solutions We’ve Tried & Abandoned
• Tight coupling
• Mediator pattern
• DOM focus & events
Current Solution: State Transition System
• States as the C in MVC
–Can drive state transitions
• States are event handling contexts
–User input
–Programmatic events
Search
Input
State
Search
Compound
State
Search
Results
State
building a lean, mean content browsing machine
PERFORMANCE AND
MEMORY
Why do we worry?
• Single-page, long-lived application
• High volume of data & images
• Require high performance
• Range of device capabilities
Device Ecosystem
Video
Memory
CPU
Main
Memory
Memory
bus speed
GPU
CPU
Architecture
Graphics
driver
Network
stack
Device Ecosystem
CPU: 3.2 GHz
GPU: 550 MHz
Memory: 512 MB
CPU: 600 MHz пѓ 3.2 GHz
Memory: 88 MB пѓ 512 MB
Memory Budget
Total Memory
- Operating System
- Webkit
- Netflix SDK
- Network/Video Buffer
UI Budget
Progressive enhancement
Baseline
Enhanced
Animations
None enabled
All enabled
Request throttling
5 concurrent
20 concurrent
Cache sizes
Small
Large
Data pre-fetching
Delayed,
Small batches
Frequent,
Larger batches
Perceived Performance
0.1 second: Feeling of instantaneous response
1.0 second: Keeps flow of thought seamless
10 seconds: Keeps the user’s attention
Nielsen 2010, 1993; Miller 1968; Card et al. 1991
Ways to Improve Responsiveness
• 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
• 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
Provide Visual Cues
Performance Evolution: Scrolling Rows
NaГЇve implementation
• Progressively inserted new DOM
nodes
• Animated very large DOM parent
• Height ever-growing of DOM parent
1
2
3
4
5
6
Bad: Performance degraded as you
scrolled
Performance Evolution: Scrolling Rows
Optimized
implementation
1
2
• Recycle DOM nodes
• Animate each row individually
• Delaying modifying row until comes
into viewport or the user settles
3
4
5
1
2
Good: Performance consistent
regardless of location
Software (CPU) = slower
Hardware (GPU) = faster
CSS = Software
Image = Hardware
• Avoid CSS gradients, boxshot shadows
– Use images instead
• Example: Full-screen CSS radial gradient
– Paints were 13 times faster without it
Eliminate paints
Accelerated Compositing
• Enables GPU acceleration of compositing
parts of the page
• Greatly benefits CSS animations
Accelerated Compositing
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
Several ways to create layers
• 3D transforms
• Opacity changes
• Accidental
– Overlapping a layer
– Render engine
Leveraging layers
• Safe CSS properties
– Transforms
– Opacity
• Un-safe
– Any other CSS properties
– DOM manipulation
Tips
• 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
Show Compositing Borders
Memory
• Avoid unbounded growth
• Minimize the number of throwaway objects
• Use closures sparingly & only where
necessary
• Dynamically load and unload code
i was led to believe there would be flying cars
WHAT’S NEXT?
Matt McCarthy – [email protected] – @dnl2ba
Kim Trott – [email protected] – @ktrott00
QUESTIONS?
Документ
Категория
Без категории
Просмотров
6
Размер файла
11 199 Кб
Теги
1/--страниц
Пожаловаться на содержимое документа