Understanding Visual Persistence, Frames, FPS, Hz, and Screen Tearing in Graphics and Browsers

Visual Persistence

When we look at an object, its image is formed on the retina and transmitted to the brain; however, after the object moves away, the impression on the retina lingers for about 0.1–0.4 seconds, a phenomenon known as visual persistence.

Frames

Video is composed of a series of static images called frames; because of visual persistence, we perceive a sequence of frames as motion.

Frame Rate (FPS)

Frame rate measures how many frames are displayed per second (FPS). To avoid choppy motion, a minimum of 30 FPS is required, while 60 FPS provides smooth playback; beyond roughly 100 FPS the human eye notices little difference.

Refresh Rate (Hz)

The monitor’s refresh rate indicates how many times per second it draws a new image, measured in hertz (Hz). For example, a 144 Hz monitor refreshes the screen 144 times each second.

FPS vs. Hz

FPS refers to the content generation rate, while Hz is the display hardware’s limit. FPS can be arbitrarily high, but the monitor’s refresh rate caps the visible output. For instance, playing a 60 FPS video on a 120 Hz phone feels similar to playing it on a 60 Hz phone.

Hz is usually constant, whereas FPS varies with scene complexity; GPU rendering speed determines the actual FPS.

Screen Tearing

When FPS and Hz are mismatched, screen tearing can occur: the monitor displays parts of two different frames in a single screen, producing a split image.

Screen tearing happens when the GPU finishes rendering a frame either slightly before or after the monitor finishes scanning the previous frame.

Graphics Card (GPU)

The graphics card (or video card) outputs visual data; its main chip, the GPU, creates the frames that the monitor scans line by line.

If the GPU renders slower than the monitor’s scan, the monitor may start scanning the next frame before the previous one is fully displayed, causing tearing; the opposite timing also leads to tearing.

Vertical Synchronization (VSync)

VSync forces the monitor to wait until it has finished scanning the current frame before starting the next one, eliminating tearing but potentially adding an extra frame of latency, which can affect fast‑paced games.

Movies’ 24 FPS

Movies use a stable 24 FPS, capturing each frame with exposure time that creates natural motion blur, making 24 FPS appear smooth. Games render each frame sharply; low FPS feels jumpy, and even high FPS can appear blurry due to visual persistence, so games often add motion‑blur effects.

Moreover, movies have a constant frame rate, while games may have fluctuating FPS, leading to perceived stutter if frame output is not stable.

Browser 60 Hz?

In web development, concepts like React’s Concurrent Mode and Time Slicing reference a 16 ms frame budget, derived from a 60 Hz display (1000 ms / 60 ≈ 16.6 ms). The browser cannot control the hardware refresh rate but must supply frames within this budget to avoid jank.

A browser frame includes handling input, running scripts, processing layout, painting, and more; only a few milliseconds remain for JavaScript execution (React’s default time slice is about 5 ms).

The next article will discuss two frame‑related APIs: requestAnimationFrame and requestIdleCallback .