Browser Rendering

The web browser is possibly the single most important piece of software on many computers. It is, of course, one of the primary gateways to the internet. Understanding a more about what a browser does and how may help shine further light on TripleLift's value proposition.

The browser consists of a few different components - a user interface (what you see), the browser engine, the rendering engine, and a data layer. The rendering engine is the component that actually draws the webpage that the user interacts with.

webkitflow.png

First and foremost, the browser "renders." This means its takes a representation of where things should go and how they should interact with each other and actually makes them do that. So, for example, if you say that you want a table with 3 columns, each 1/3 the width of the browser window - with text in each one - then the browser has to figure out the size of the browser window, divide it up appropriately, "paint" the table with the right dimensions, and place the font in the table. As you then resize the browser window, it needs to "repaint" the table given the new dimensions. This is, of course, a very simple example.

HTML is the language used to construct web pages (we'll discuss CSS and javascript in a minute). A simple example of HTML is:

<html>
 <head><title>Example</title></head>
  <body>
   <h1>Hi!</h1>
   <p>TripleLift Rules</p>
  </body>
</html>

The start and end of an "element" of HTML is represented by the <tag> and </tag>, as appropriate. Without getting into what HTML does, if you think about the text above, you can see every tag is either a child of another tag - and some tags can have multiple children. The browser defines this structure for the entire page and keeps the representation as the Document Object Model (DOM). The browser - at all times - has a representation of the webpage as a DOM state. This can be manipulated by javascript adding or removing elements - but it's always done with reference to the DOM.

CSS is the styling of the HTML - sizes, colors, and more complex attributes. This is often a separate file or files - so the browser needs to fetch the HTML and then the CSS file specified in the HTML. Like the DOM, the CSS is turned in a CSS Object Model (CSSOM) by the browser.

When the DOM and CSSOM are complete on the page's initial load, the next step is creating the render tree. This is basically rectangles with attributes like sizes, colors, etc., and in the correct order to be shown on the screen (pairing DOM w/ CSSOM). DOM elements that are invisible or not meant to be shown (e.g. metadata) won't be in the render tree. Similarly, a single DOM element that floats on the page, has multiple states, is text flowing onto multiple lines (each line is its own element), etc may have complex representations in the render tree.

The browser then creates a layout of the render tree, by giving each element a precise coordinate for where it should actually be placed on the screen. Finally, each element is "painted" to the screen in a specific order (background color / image, border, children). Layout can be re-triggered on the entire render tree when there is a global style change, like javascript changing the site's default font or the browser is resized. In this instance, you may see a flicker or non-responsiveness. There may be incremental layouts for smaller changes, like a modification of the DOM by javascript. In this case, a small piece of the render tree is laid out and painted.

TripleLift ads are generally rendered by injecting our ad content into the DOM of the page, using the same sort of content structure as the rest of the page, and generally using that page's CSSOM. This makes for a significantly more integrated ad experience that's better for user experience and often much quicker and more effective in the way the ad loads.