Finley Home

Mind-Blowing Web Engineering from Flipboard

In order to optimize scrolling performance, we knew that we needed to keep paint times below 16ms and limit reflows and repaints. This is especially important during animations. To avoid painting during animations there are two properties you can safely animate: CSS transform and opacity. But that really limits your options.

60 fps on the mobile web

As an iOS developer and a web developer, the biggest difference I’ve seen is in the handling of performance. The average web developer doesn’t think for a second about optimizing rendering for mobile, preventing reflows and repaints, and far less garbage collection. If an iOS developer acted the same, their app would never run.

The engineering that went into producing Flipboard for the mobile web is absolutely stunning. The easy route would have been to make it with HTML and CSS, but the performance would have been very poor. To make it with Canvas required a lot more thought, but produced something magical.