Stages of the Rendering and APIs of Houdini
The rendering process a web-page can be broken down into 4 broad stages...
In this stage the browser collects all elements and all the stylesheets in the document, and then cascades through the them to work out what style is to be applied to which element.
Once the browser knows the elements that have to be rendered and the styles that have to be applied to each element. It goes about with the layout process. Here it just calculates how big each element is and where it will be on the web-page, i.e. the position of each element alongwith its height and width.
Once the position of each element and its dimensions have been determined, the browser enters the painting stage. Here each of the different elements is drawn. When the pages are bigger than the browser's document display area (viewport), the paint stage optimizes the drawing process by only or first drawing the elements that need to be put-out in the viewport or the display window.
If time-based drawing / redrawing / movement of the elements is needed on the web-page then the browser starts to execute them and this gives the perception of movement or animation.
In the Houdini specs these are 4 high-level APIs - Parser, Layout, Paint and Animation.