Collection of Performance-Related Articles

The current status of caching on mobile devices:
http://www.webperformancetoday.com/2012/07/12/early-findings-mobile-browser-cache-persistence-and-behaviour/

EdgeCast Networks is a CDN that is now using Google’s mod_pagespeed to help with performance:
http://googledevelopers.blogspot.de/2012/06/edgecast-networks-makes-web-faster-with.html

A quick test measuring graphics performance:
http://updates.html5rocks.com/2012/07/How-to-measure-browser-graphics-performance

General performance techniques that most of us probably already know, but can’t hurt to look over again:
http://www.html5rocks.com/en/mobile/optimization-and-performance/

Slideshows about Hardware Acceleration

http://www.slideshare.net/ariyahidayat/understanding-hardware-acceleration-on-mobile-browsers-13463369
Key Points:

  • Slide 11 explains the order of rendering “from waves to pixels”:
    1. Network stack
    2. Layout engine
    3. JavaScript engine
    4. Graphics
    5. User interface
  • Slide 16 explains the GPU workflow:
    1. Vertices
    2. Matrix
    3. Rendered
    4. Textured
  • Slide 27 shows estimated rendering speeds for solid vs. gradient:
    1. Linear gradient up to 14x slower than solid color fill
    2. Radial gradient about 2x linear gradient…
  • Slide 31 shows estimated rendering speeds for solid vs. blur shadow:
    1. Blur shadow up to 20x slower…
  • Slide 53 explains the principles of fluid animation:
    1. At the beginning, push as many resources as possible to the GPU
    2. During animation, minimize CPU-GPU interaction
  • Slides 62-67 explains the process of a simple background color change:
    1. I wish the slideshow had the author’s notes, because a lot of information is missing, but hopefully at least you understand how expensive even simple animation can be

http://www.slideshare.net/joone/hardware-acceleration-in-webkit
Key Points:

  • Slide 6 explains graphics acceleration in WebKit, showing which effects are done in Video acceleration, 2D acceleration, or 3D acceleration.
  • Slide 8: “iPad plays only one video due to hardware acceleration”
  • Slide 10 explains how 2D acceleration works.
  • Slides 12-14 explain how the Document and Render Trees work.

Does IndexedDB Store Files Outside of Database?

I was reading this article this morning:
http://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/

And this statement caught my eye:

In Firefox’s IndexedDB implementation (and I believe IE’s too) the files are transparently stored outside of the actual database. This means that performance of storing a file in IndexedDB is just as good as storing the file in a filesystem. It does not bloat the database itself slowing down other operations, and reading from the file means that the implementation just reads from an OS file, so it’s just as fast as a filesystem.

Does this mean that storing physical files (images, mp3s, etc.) does not affect the size of the database?

If so, this could be huge for storing sites like the BMW Showcase for offline!

This, in addition to the IndexedDB ployfill mentioned in this video from Google I/O 2012 (starts at about 15:30), could make this functionality useful, right now…

Images Blinking and Scrolling Stuttering…

A bug was reported recently regarding JavaScript scrolling on iOS devices (including iPad 3, iOS 5.1.1).

On initial page load, when users scrolled down the page images were blinking and the scrolling was very choppy (staggering and stuttering). Once the entire page had been scrolled once, images stopped blinking, but the scrolling was still very choppy.

The first solution, regarding the images blinking, was adding the following CSS to any images that are scrolled:
img { -webkit-transform: translateZ(0); }
Although the containing scroller was moved using translate3D, the images were apparently not being hardware-accelerated; this does that and solved the blinking.

But that didn’t solve the choppy scrolling. The solution to that was removing references to the :hover and :active pseudo-classes in the CSS. Although these pseudo-classes were only changing background & font colors, for some reason they were completely destroying the scrolling action. It now looks as smooth as native scrolling…