David Baron wrote an excellent presentation on the Gecko
rendering engine more than four years ago. Though many changes have occurred during all these years, the basic concepts behind Gecko remain the same and are well explained in the following data flow that shows what happens when Firefox loads and renders a web document:
First comes the markup, which is parsed by the Firefox SGML parser. When a rough sketch of the future DOM tree is constructed, it's said that we are in the content sink phase. In this phase, style sheets are parsed by the CSS parser of Firefox. Once parsed, a set of style rules have been constructed. After the content sink phase, the DOM is fully build up in a content model. At this point, content model and style rules can actually work together on the frame constructor, which later yields a frame tree.
In the Gecko terminology, a frame is a rectangular region of the screen defined by the x. y and z coordinates. A frame can be affected by the reflow, that is, a change in its own state, for example when we define a CSS property on it or an user changes the base font size of the page or adjusts the window dimensions.
When all the frame hierarchy is in a proper order, we enter in the painting and display phases, where the final layout of a web document actually takes place.