Jank

I first learned about jank when I joined the Chrome team. It’s a weird slang word with multiple meanings,  so I am going to use a narrower definition, custom-crafted just for this narrative. To get there, I will make a brief detour into the land of rendering Web pages. Hold on to your hats.

Suppose you are visiting a site. I’ll be the browser in this story. You just clicked on a button, and I need to play out a lively animation as a result. Like humans, browsers are mesmerizingly complicated, but at a very high level, the animation is a sequence of frames — pictures of the intermediate states between its beginning and end. Each frame is rendered — that is, created on demand in a very brief moment of time. For example, to play out an animation at a common-for-computers rate of 60 Hz (that’s 60 frames per second), I have just under 17 milliseconds to render each frame.

Rendering itself is a multi-step process, usually called a pipeline (does this start to remind you of something?) To produce a frame, I must go through each step in the rendering pipeline. Think of it as a clock that ticks every 16.667 milliseconds. If I was able to fit all the steps between the two ticks, I have a frame of animation that I can show to you. Yay!

However, if going through the rendering pipeline takes longer than that, the next tick will arrive before I have the frame ready. Bad news. Despite all the work that I’d done, you won’t see this frame. It’s dropped. Worse news: because I had to finish all the steps (those are the pipeline rules), I accumulated a deficit — my work on the frame that follows begins with the negative time balance. For example, instead of 16.667 milliseconds, I might only have 12. What’s the likelihood that this frame will get dropped as well? Pretty high.

As a user, you will see this phenomenon as “jank”: instead of a smooth animation, it’ll look like a stuttering janky mess. Put very dryly, jank is the observed effects of a regularly scheduled pipeline-like process not fitting into its allotted time budget.

Wow. That is very dry. Let’s see if we can make it a bit more useful by applying what we learned here to the OODA loop. Let’s unroll the OODA loop.