What the GPU is actually doing

Everything on screen is triangles. A vertex shader runs once per corner and decides where that corner lands on the screen; the rasteriser works out which pixels each triangle covers; a fragment shader runs once per covered pixel and decides what colour it is. Both shaders run in parallel across thousands of cores, which is why a scene can afford five million fragment evaluations a frame and cannot afford five thousand separate instructions from your JavaScript.

That asymmetry is the single most useful thing to hold onto. A draw call is your CPU telling the GPU to render one batch with one material: it costs driver overhead and state changes, and a few hundred of them will stall a frame on a phone long before the GPU breaks a sweat. Fragment work, by contrast, scales with screen area: the same shader is cheap in a thumbnail and ruinous full-screen at device pixel ratio 3.

You have sixteen milliseconds per frame at 60fps, and the browser wants some of them for layout, style and compositing. Treat the frame as a budget with two separate columns, CPU and GPU, because they run out independently and the fix for one makes the other worse surprisingly often.