← Back to context

Comment by Rohansi

16 hours ago

> This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy'.

It's not crazy. That is literally what 99.99% of video games do. They repaint everything constantly, only limited by either your vsync rate or hardware.

A website shouldn't be pinning CPU or GPU. When people run a game they expect some sort of battery drain. People don't expect that some websites will thrash your CPU/GPU like a game.

  • > A website shouldn't be pinning CPU or GPU.

    That's exactly what I was saying. Rendering a few widgets shouldn't pin your CPU or GPU because it's so little work.

    This page, however, has an animated SVG and moving DOM elements in the header which consume far more resources than the widgets it is trying to showcase. Compare usage before and after deleting the header element (`section.hero`) in the inspector to see for yourself.

    • > > A website shouldn't be pinning CPU or GPU.

      > That's exactly what I was saying. Rendering a few widgets shouldn't pin your CPU or GPU because it's so little work.

      Your comment doesn't say this at all:

      > > This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy'.

      > It's not crazy. That is literally what 99.99% of video games do. They repaint everything constantly, only limited by either your vsync rate or hardware.

      Am I missing something? Are you referring to some other part of the thread?

      1 reply →

Presumably in a video game the majority of the screen changes every frame. Not so in web pages.

  • My point was more that rendering a few widgets at 60+ FPS is nothing for anything with a GPU, and everything has a GPU these days.

    Anyway, something like this only needs to paint when states change or animations are running. That's an easy optimization to make here if it doesn't do it already. And games don't even bother with it, they repaint all UI even if it doesn't change.

    • Waste the cycles, everyone has too many cycles, is it even waste if the cycles would just go unused, GPUs are expensive, they better do their bit, who's got no GPU, go play somewhere else without your GPU, pal. It's all a game, anyway.

      Point being: your comment made me sad and I needed to lighten myself up a bit.

      1 reply →

    • Video games only get away with this because their energy draw is obvious: one launched the video game, so one expects the power draw. Visiting a web page does not have that action-reaction causality in people’s minds. Having a random web page introduce maximally-inefficient repaints also leads browsers to start reducing timeslices — especially those with any sort of power drain cognizance, such as Safari — which, here, leads to hella janky animations that can’t cope without their inefficient repaint loop.

      All this work to replicate the animated blobbiness of Liquid Glass. I thought everyone hated it! So, then, why is this a thing?

      5 replies →

The browser and OS does that as well (unless absolute zero updates and you don't even move your pointer around).

But many smaht people out there don't know that.

  • This is just plain false. Retained UIs like the DOM and what your OS uses only ever render when something changes, so the vast majority of the time they sit idle. There's extensive effort throughout the entire stack to do as little work as possible.

    For instance, the mouse cursor is composited on the GPU during scanout. That means simply moving your cursor requires zero rendering.

    Another example: When typing only the newly typed character and caret are rendered. The rest of your entire screen is reused.