Popular posts

The article shared by @hipkiss91 is indeed an excellent resource to get a better understanding of how browsers work under the hood.

Thank you for sharing the link, @chilimatic. The diagram he is referring to is this one, the workflow of a browser's rendering engine:

Here is an excerpt from the How Browsers Work article, that answers your particular question:

While the DOM tree is being constructed, the browser constructs another tree, the render tree. This tree is of visual elements in the order in which they will be displayed. It is the visual representation of the document. The purpose of this tree is to enable painting the contents in their correct order.

Firefox calls the elements in the render tree "frames". WebKit uses the term renderer or render object. A renderer knows how to lay out and paint itself and its children. WebKit's RenderObject class, the base class of the renderers, has the following definition:

class RenderObject{
  virtual void layout();
  virtual void paint(PaintInfo);
  virtual void rect repaintRect();
  Node* node;  //the DOM node
  RenderStyle* style;  // the computed style
  RenderLayer* containgLayer; //the containing z-index layer
}

So in your case, here is a very high-level overview of what exactly happens — as soon as you change the innerHTML attribute; the DOM tree is updated, and further along the flow, styles are attached to the node, creating a render object; which would be replaced with the corresponding old node in the Render Tree. Whenever there is a change, the render tree is traversed, and for all the visible render objects, their corresponding paint methods are called.