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

HTML5 Mobile: doesn't have to suck.

Dave Arel
July 10, 2014
44

HTML5 Mobile: doesn't have to suck.

Talk from QCon NY in June 2014 and DevCon5 in July 2014

Dave Arel

July 10, 2014
Tweet

Transcript

  1. The Problem • Deploying took time and money • Innovation

    Slowed • Bugs could kill all activity
  2. “Mercante” (HTML5) • Deploy New Versions in minutes • Develop

    multiple versions for A/B and multivariate testing • User Events
  3. The Struggle is Real, Ya’ll • Tooling • Rendering (CPU/GPU)

    • Memory Management • DOM (Repaints/Reflows)
  4. HTML5 Mobile Apps Don’t Have To Suck @davearel Painting: The

    visual representation in memory. Drawing: Casting the visual representation onto the screen.
  5. HTML5 Mobile Apps Don’t Have To Suck @davearel Reasons for

    compositing • Layer has 3D or perspective transform CSS properties • <video> and <canvas> elements • CSS animations • Layer uses accelerated CSS filters • Layer with a composited descendant has information that needs to be in the composited layer tree, such as a clip or reflection • Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer) http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
  6. HTML5 Mobile Apps Don’t Have To Suck @davearel Tips •

    Keep composite layers small • Composite elements that are updated often (not just animated) • Compositing layers off screen allows you to buffer / pre-render • Avoid several texture uploads • Use Chrome/Safari (or others) to monitor compositing
  7. HTML5 Mobile Apps Don’t Have To Suck @davearel will-change The

    future of compositing http://www.w3.org/TR/2014/WD-css-will-change-1-20140429/