By Addy Osmani CHAPTER 6further Reading
- HTML5 Rocks: Performance
http://www.html5rocks.com/en/features/performance - Jank Busting For Better Rendering Performance by Tom Wiltzius
http://www.html5rocks.com/en/tutorials/speed/rendering/ - Making a 60fps mobile Web app
http://aerotwist.com/blog/making-a-60fps-mobile-app/ - Solving Rendering Performance Puzzles
http://jakearchibald.com/2013/solving-rendering-perf-puzzles/
Rendering Jank and Hitting 60fps
The human eye perceives a continuous stream of information. It does not
naturally see motion as a series of frames. In the worlds of animation, film
and gaming, using a series of still frames to simulate motion creates some
interesting perceptual artifacts — especially if the frames are played back
too slowly. When the frame rate varies, our eyes perceive jerkiness and
jitter rather than smoothness in the motion, and what we see appears to
flicker. For an optimal user experience on the Web, animations need to be
silky, scrolling^10 must be buttery-smooth and your page needs to contain
little to no jank, a term that means a disruption in consistent frame rate
that manifests itself visually.
You’ve probably experienced jank before. Have you ever visited a site
where scrolling through just felt really sluggish? Or perhaps there was a
lot of complex animation or new UI being dynamically introduced that
blocked you from being able to do anything. It’s these types of experiences
that we want to avoid.
In the life of a Web page we generally perform three core tasks: fetch-
ing resources; parsing and tokenizing these resources (HTML/CSS/JS); and
finally drawings things to screen. During a user’s interaction with a page,
only parts of it will be changed. For example, they may perform an action