Browser Repaint/Reflow - reactjs

Question

I'm trying to understand animation loops in WebGl, along with React.
Basically, does the browser repaint specific elements without repainting the whole screen? Does a a reflow always refresh the whole screen? What exactly is the difference between what happens when you manually refresh the window with a refresh button, verses what reflow or repaint? I know this technology has been around awhile, but I never really dove into it much before.
I'm just trying to to understand how a webGL code animates on a canvas element and how React changes elements on a screen, without the whole screen reloading. I've read about requestAnimationFrame, and about how React bundles and diffs virtual dom changes, reducing the number of requests for rerender, but my question is more about the entire window reloading, verses rerendering individual components only. Im building a site with gatsby/react and babylonjs, and just trying to wrap my head around the underlying concepts. Thanks.

Answer 1

What the browser does is somewhat undefined. You give it HTML elements, it somehow draws them on the screen. How it optimizes that process is undefined, all that's defined is what the results are kind of supposed to be like. I say "kind of" because even a simple element like <p>Hello world</p> will be rendered differently on different browsers and differently on the same browser on different OSes or in the same browser on the same OS but with different OS settings etc..
In general the browser builds a tree of nodes (the elements and their contents) called the DOM. It then walks that tree and builds whatever it needs to apply the CSS and then render those elements. Most browsers would try to cache data at various points in that process so that if something changes on the page they don't have to compute everything from scratch. Example might include they generate a glyph (The pixel for a letter), store those pixels somewhere, next time they need to draw the letter at the same size they can just use the pixels they already generated instead having to rasterize that letter from the font definition.
does the browser repaint specific elements without repainting the whole screen?
That's up to the browser.
Does a a reflow always refresh the whole screen?
That's up to the browser. If the browser has way to figure out it only has to compute a partial reflow of some branch of the tree then it might not have to refresh the whole screen.
What exactly is the difference between what happens when you manually refresh the window with a refresh button, verses what reflow or repaint?
Refreshing a window is like killing a program and re-running it from scratch. All the data has to be reloaded either from the network or from the cache, the text gets parsed into elements, etc..
Reflow is computing where all the elements belong, where words or elements wrap, what size they are.
Repaint is drawing the elements. You can repaint without reflow.
how a webGL code animates on a canvas element
A canvas is just a rectangle of pixels, similar to an <img>. The difference is you can get one of several APIs to affect those pixels ("2d", "webgl", "webgl2", "webgpu", ...)
When you change those pixels the browser knows that <canvas> element needs to be re-drawn. How it re-draws it is up to the browser but at does have to at least follow the rules of the spec so for example a <canvas> like pretty much all elements, has CSS applied (it could have border, a background image/color/pattern, rounded corners, etc....). Elements are composited on top of each other so you might have elements in front of the canvas, you might have elements behind the canvas.
Like I said above, what the browser does to draw the elements is undefined but you can certainly imagine that if it can figure out the only thing that changed is the canvas's content, and there are no elements in front of the canvas, and there is nothing behind the canvas, and the canvas is opaque, then it could, potentially, just re-draw the canvas area only.
That situation is rare though. For example, most three.js examples have text at the top positioned over the canvas (the title of the example). Many also have an FPS meter. Some have a drop down UI. All of that is drawn over the canvas so at a minimum, the new contents of the canvas have to be drawn into the window and then those other elements have to rendered on top of that.
Again, how that, happens is up to the browser. It could use software rendering to draw those elements pixel by pixel, or it's possible it has stored the contents of those elements in textures and draws them as quads on top using the GPU.
how React changes elements on a screen, without the whole screen reloading
I'm not sure what you mean by reloading. React keeps its own "virtual DOM". It then tries to apply the changes in the virtual DOM to the actual browser DOM. If there are no changes needed to some elements those elements will not be affected.
From the POV of the browser, nothing is different. All the browser sees is the DOM. If you make changes to the DOM (using React or anything else), then, once your current event exits, the browser will schedule a task to walk the DOM and re-draw the page (using optimizations to re-compute/re-draw less is up to the browser).