WebKit in you r living room Matt Seeley, Net fl ix UI Engineer 

‘Yes’ I do watch movies all day long* * Actually, ‘no.’ Just after a big lunch. @innerhtml 

Native + Web 

450+ devices in 40+ countries * As of Q4 2011 

CPU GPU Main memory Video memory Graphics driver CPU architecture Memory bus speed Network stack Devices capabilities vary 

CPU GPU Main memory Video memory Graphics driver CPU architecture Memory bus speed Network stack Devices capabilities vary 

• Device performance tip s • WebKit rendering basics • Accelerated compositing Topics: 

Respond to user input 

No content

Gallery 

Bob 

Video Input comes at various speeds 

Video Sometimes input can come too fast 

• Recycling of previous ro w • Load data or retrieve from cach e • XMLHttpReques t • JSON.parse( ) • DOM access for each bo x • Paint the row Activating a row could b e expensive, defer it 

Video Defer & stagger activation 

var activateTimeout; // @private function activateSync (/* id1 [, ..., idN]*/) { // perform greedy operation } // @public function activate (ids) { if (cfg.delay) { clearTimeout(activateTimeout); activateTimeout = setTimeout(function () { activateSync.apply(null, ids.splice(0, cfg.size)); if (ids.length) { activate(ids); } }, cfg.delay); // increase delay to stagger } else { activateSync.apply(null, ids); } } Work deferral & chunking 

Fast Slow JSON.pars e XMLHttpReques t document. * element.* Cross this divide with care mostEverythingElse 

Minding our memory 

Total memory - Host processes - Netflix SDK - WebKit - Network buffer - Video buffer UI budget Understand the memory requirements of your components 

Video memory contain s uncompressed images 1920 x 1080 8.3 MB 1280 x 720 3.7 MB 

Memory saving techniques • Avoid unbounded growt h • Minimize number of throwaway object s • display:none; may clear video memor y • Pool elements and objects 

Video Reuse instead of allocate & destroy 

All that glitters... 

Don’t do i n software what can b e handled by hardware. 

-webkit-gradien t -webkit-box-shado w background-positio n background-repea t border Static images render faste r than CSS effects 

No content

Use CSS effects for all transitions • Only use transitions on capable device s • Declarative, easy, supports multiple transform s • Rendering engine may optimiz e • Animations which don’t require repaints are hardware accelerated, ie: 
 -webkit-transition-property: 
 opacity, -webkit-transform; 

Open sourced,  hackable, port-able 

Browser or Toolkit Networking, Graphics, Threading , Memory management, Disk access, etc... WebCore JavascriptCore 

WebCore DOM tree construction Painting of render tree Parsing Parsing Render tree construction Layout o f render tree Render fl ow (abbreviated) 

Toolkit or Browser port RenderLayer Layout & Paint GraphicsContext RenderLayer, one or more RenderObjects RenderObject sub-class 

Accelerated compositing 1 

Compositing laye r RenderLayer(s) fl attened into a single backing surface (bitmap); sometimes mapped to a GPU texture 

Re d A compositing layer; number tracks number of recalculations . Yello w A container layer; no backing surface - children are layers . Cya n Overflow box; no backing surface - debugging tool . Gree n Tiled layer; created when layer width or height is > 1024px. Safari’s visual hints 

defaults write com.apple.Safari \ IncludeInternalDebugMenu 1 Enable Safari’s Debug menu 

Enable compositing border s in Chrome 

• opacity • overflow • -webkit-transform • z-index • positio n • Element’s box overlaps a compositing layer Layer creation triggers 

virtual bool requiresLayer() const { return isRoot() || isPositioned() || isRelPositioned() || isTransparent() || hasOverflowClip() || hasTransform() || hasMask() || hasReflection() || style()->specifiesColumns() ; } WebCore/rendering/RenderBoxModelObject.h Explicit layer creation 

WebCore/rendering/RenderLayerCompositor.cpp Implicit layer creation bool RenderLayerCompositor::needsToBeComposited(const RenderLayer* layer) const { // edited.. . return requiresCompositingLayer(layer) || layer->mustOverlapCompositedLayers() || (inCompositingMode() && layer->isRootLayer()) ; } bool RenderLayerCompositor::requiresCompositingLayer(const RenderLayer* layer) const { RenderObject* renderer = layer->renderer() ; // edited... return requiresCompositingForTransform(renderer) || requiresCompositingForTransformingForVideo(renderer) || requiresCompositingForCanvas(renderer) || requiresCompositingForPlugin(renderer) || requiresCompositingForFrame(renderer) || (canRender3DTransforms() && /* edited */) || clipsCompositingDescendants(layer) || requiresCompositingForAnimation(renderer) || requiresCompositingForFullScreen(renderer) ; } 

A (short) tale of two layers Animated gif with translateZ(0); Static gif wit h keyframes animation 

translateZ(0)  ==  zoom:1 

• Change opacity • Change -webkit-transform • Hide layer offscreen • Change conten t • Change CSS box propertie s • Hide text content using text-indent • Hide layer with display* Safe Caution * May release video memory 

Up & down layer composition 

1 container laye r 2 compositing layers Up & down layer composition 

2 container layer s 7+ compositing layers Left & right layer composition 

.listRow { -webkit-transform: translateZ(0); } .listTitle { -webkit-transform: translateZ(0); } .listItems { -webkit-transform: translate(0, 30px); } .ct-seq0 { -webkit-transform: translateX(60px); } .listRow-animate-lr .ct-seq0 { /* Use Z to punch .ct-seq# into layers */ -webkit-transform: translateX(60px) translateZ(0); } 

• Reduce the quantity of layer s • Keep layers as small as possibl e • Update layers infrequentl y • Tailor layer composition to purpos e • Trial and error; testing is important Accelerated compositing tips 

mseeley@net fl ix @innerhtml