7

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.

enter image description here

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!

FutureCake
  • 2,614
  • 3
  • 27
  • 70
  • 4
    It depends on the browser, and the version of the browser. This is a great article: https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/ – clankill3r Jun 02 '20 at 12:49
  • Quite an awesome article! So i guess it is done with shaders and vertex buffers in the end. – FutureCake Jun 02 '20 at 17:25
  • @clankill3r if you post it as an answer i will accept it :) – FutureCake Jun 08 '20 at 14:41

1 Answers1

-1

It depends on the browser, and the version of the browser. This is a great article.

Joel Castro
  • 485
  • 6
  • 20