Browser Rendering – How Do Browsers Paint a Render Tree to the Screen?

browserrendering

I'm interested in building a browser-like rendering engine. I understand a bit about how OpenGL and GUI toolkits work. But how do browsers actually put pixels on the screen? Are they like software rasterizers that scan every line and paint whatever's in the render tree? Or do they act like GUI toolkits and call functions to display elements at certain coordinates? Are there any libraries that focus specifically on the painting portion of the browser's critical rendering path?

Best Answer

At the very bottom level, the browser will request a window from the GUI toolkit and use its painting functions to draw in them.

At the middle level, there is a rendering engine which takes a DOM and turns it into draw commands, such as Mozilla's Gecko or the popular "Webkit".

See also this talk: https://stackoverflow.com/questions/3154753/how-does-gecko-or-any-other-layout-engine-render-a-document-page?rq=1

Related Topic