Mobile CSS3:
Pointers and Pitfalls in the mobile space

Part 2

Slides: estelle.github.com/mobilecss/index2.html
Name: Estelle Weyl
Blog: standardista.com
Twitter: @estellevw

Web Performance Optimization

  • Eliminate unnecessary reflows
  • Reduce the number of DOM elements
  • Defer parsing of JavaScript
  • Make fewer HTTP requests

Mobile UI Performance

Both get you where you need to go,
but they do it differently, and
have a different purpose

What happens on the device is as important as
what happens over the air

Anti-pattern: Embedded CSS & JS

  • On first page only
  • Save in LocalStorage
  • No re-fetch: use Cookies

m.bing.com: One HTTP request

203.70KB on first load to 15.29KB for subsequent pages

Embedded CSS & JS with data-*

Data URI's for images

Automated Data URI creation: github.com/nzakas/embed

LocalStorage & Cookies

Naughty but Nice

  • Embed CSS & JS for 1st page load
  • Extract & put in LocalStorage
  • Set Cookies with script names
  • Next GET: cookies checked
  • Only embed new scripts
  • Load localStorage resources on load

Single http request for html, css, js & images

Memory

High memory usage causes a slow UI

When you are out of memory, you are out of memory

Browser crashes to free up memory

Not enough to GZip

Rendered media are still the same size.

  • Reduce File Size
  • Reduce Image Size
  • Use Data URIs

Video, Audio, Images and Text can be compressed to save bandwidth, but they're uncompressed in the browser.

Reduce File Size

images alpha saving 64% file size

Image Alpha

Reduce Image Size

Don't send big images to small screens?
Images 1024px or bigger are too big for memory

  • http://i.tinysrc.mobi/http://mysite.com/myimage.png
  • http://src.sencha.io/http://mysite.com/myimage.png
  • http://src.sencha.io/320/480/http://mysite.com/myimage.png

CSS Masking

jpeg plus framemask less than transparent png
88KB + 4KB < 551KB 

div {
  background-image:url(images/frame.jpg);
  -webkit-mask: url(images/framemask.png);
}

Is CSS3 the Solution?

CSS3 Can save the day (! or ?)

  • rounded Corners
  • box-shadow
  • text-shadow
  • background-position
  • background-repeat
  • multiple background images
  • border-image
  • gradients

CSS3 IS the Solution!

  • Fewer HTTP Requests
  • Updatable
  • Scalable
  • Transitionable
  • Animatable
  • Fewer DOM Nodes

CSS3 ISN'T always the Solution!

  • Tiny Fonts
  • Box Shadow (inset)
  • Text Indent
  • Gradients
  • Animations
  • ‘Non-rendered’ content
  • Recalculating / Repainting the UI

Static images may render faster than CSS effects

Disney: "The Tortoise and The Hare"

Fonts

Fonts with Tall Ascenders Fonts with Tall Ascenders Fonts with Tall Ascenders Fonts with Tall Ascenders
Fonts: Zapfino, Helvetica, Savoye
Amount of space painted is large!

Shadows

  • Not rendered as static bitmap
  • Evaluated each repaint
Render order: rendered from back to front

Text-indent

MyLogo Text
Logo
  • Use CSS Clip
  • Position text up instead of left

Large Gradients

    iphone with large gradient
  • Keep gradients small
  • Requires CPU to create
  • Stored in memory
  • Memory: Radial > Linear
  • Render Speed:
    Images often faster than Gradients

transitions

code {
   color: black;
   font-size: 85%;
   background-color: rgba(255,255,255,0.9);
   transition: all 2s ease-in 50ms;
}
code:hover {
   color: red;
   font-size: 120%;
   background-color: rgba(255,255,255,0.8);
}

code {
   transition:
      color, font-size, background-color 2s ease-in 50ms;
}

Requires reflow!

transitions

code {
   color: black;
   font-size: 85%;
   background-color: rgba(255,255,255,0.9);
   transition: all 2s ease-in 50ms;
}
code:hover {
   color: red;
   transform: scale(1.4);
   transform-origin: 0 0;
   background-color: rgba(255,255,255,0.8);
}

code {
   transition:
      transform 2s ease-in 50ms;
}

Only repaints

Repaint v. Reflow

✔ Repaint

✘ Reflow

Repaint

When visual changes do NOT require recalculation of layout

  • Visibility
  • Colors
  • Transforms
  • Background images
  • Transparency

Reflow

When visual changes REQUIRE recalculation of layout

  • Page load, Layout & orientation change
  • DOM Changes: Adding, removing, updating nodes
  • JS style information request
  • Changing value of display property
  • Changing to CSS property alters box model value
  • Resizing, zooming and scrolling (desktop), but not necessarily on mobile devices (viewport)
  • The larger a DOM tree, the more expensive a reflow is
  • Opera lists repaint and reflow as one of the 3 main contributors to sluggishness
  • Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.

Reflow

Minimize the DOM

  • Minimize number of nodes
    • Uses up memory
    • Measures each node for each repaint
  • Cache DOM lookups
    • Store them!
  • Minimize DOM manipulations
    • Batch DOM queries & DOM manipulations separately

More nodes = more expensive!

Reuse the DOM

Pool Elements and Objects

Reuse instead of Allocate and Destroy

tetris
  1. Create a pool of DOM elements (more than you need)
  2. Use the nodes you created
  3. Release back into pool
  4. Go to step 2

Animations (and Gradients)

See Redial Gradients in Action

Hardware Acceleration: 3d Transforms

 div {
	transform: translateZ(0);
 }

translateZ(0)

Composited mage in memory == H x W x 4

Take advantage of hardware acceleration, but don't abuse it. GPU accelerated elements eat video memory

Out of viewport content

Elements not currently in view are still rendered
  • Everything is rendered*
  • On screen even if out of viewport
<meta name="viewport" content="width=320;
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

JavaScript affects UI

UI/JS is Single Threaded

UI Queue

  • JavaScript execution
  • UI Updates

UI will not update while JS is being executed

✔Always use
CSS for Animation

✘Never use
JS for Animation

Animation

Animation = UI's lowest priority

‘animation-delay’ expires even if UI thread is busy,
but animation has to wait.

Solutions:

  • delay in keyframes instead of animation-delay
  • change parent class to add in animations and delays

Other Tips

Test in Real Environments

iPhone showing which apps are running in the background
  • Test on Phone:
    • Simulator != Emulator
    • Cap your memory
  • Test with many apps open
  • Test on multiple devices
  • Test on mobile network

Use Tools

iPhone with Mobile Performance

Tricks

  • Scale down (not up)
  • Use average size fonts
  • Take advantage of HTML5 & native storage
  • Don't disable zoom (except for games)

Conclusion

  • Follow performance recommendations
  • Minimize Latency
  • Manage memory
  • Use CSS Judiciously
  • Use JS Minimally (and NOT for animation)
  • Batch query and manipulations separately
  • Reuse the DOM
  • Keep Mobile in Mind

Remember...

Your users may not be tethered

and their memory may be very limited.

Thank you

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook

Who to follow