Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebKit In Your Living Room

Matt
October 24, 2011
33

WebKit In Your Living Room

From 2011, describes development challenges and approaches faced while building high quality user interfaces on embedded devices.

Video: https://vimeo.com/85376597

Matt

October 24, 2011
Tweet

Transcript

  1. ‘Yes’ I do watch movies all day long* * Actually,

    ‘no.’ Just after a big lunch. @innerhtml
  2. CPU GPU Main memory Video memory Graphics driver CPU architecture

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

    Memory bus speed Network stack Devices capabilities vary
  4. Bob

  5. • 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
  6. 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
  7. Total memory - Host processes - Netflix SDK - WebKit

    - Network buffer - Video buffer UI budget Understand the memory requirements of your components
  8. Memory saving techniques • Avoid unbounded growt h • Minimize

    number of throwaway object s • display:none; may clear video memor y • Pool elements and objects
  9. 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;
  10. WebCore DOM tree construction Painting of render tree Parsing Parsing

    Render tree construction Layout o f render tree Render fl ow (abbreviated)
  11. Compositing laye r RenderLayer(s) fl attened into a single backing

    surface (bitmap); sometimes mapped to a GPU texture
  12. 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
  13. • opacity • overflow • -webkit-transform • z-index • positio

    n • Element’s box overlaps a compositing layer Layer creation triggers
  14. virtual bool requiresLayer() const { return isRoot() || isPositioned() ||

    isRelPositioned() || isTransparent() || hasOverflowClip() || hasTransform() || hasMask() || hasReflection() || style()->specifiesColumns() ; } WebCore/rendering/RenderBoxModelObject.h Explicit layer creation
  15. 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) ; }
  16. • 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
  17. .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); }
  18. • 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