I am looking for an explanation about how a browser renders / paints the actual pixels on your screen.
I found this answer that contains this great image on how a browser goes from html and css to an actual representation on the screen.
But this doesnt explain me how the actual painting step is implemented. So how is the actual frame tree painted?
Is it done with vertex buffers and shaders?
For example: A div could be rendered by creating a quad and then render this quad with a shader that for example adds a border, rounded corners etc to the div depending on the styling?
Or is there some other technique used?
And how would this be done with long pieces of text? Generating a quad for each letter doesnt sound very performant?
Let me know if extra context or clarification is needed!