#HowBrowsersWork

[industr-pulse]

How Does Your Web Browser Work? What Is a Browser- Explained in 60 Secon...

[bicentennialmanbangalore]

Browser internals..

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/?    Phew exhausting… I’ll never look at web programming the same way again… also will go back and read up on modular decomposition tree from graph theory again..

[michaelmackend]

Browser Mechanics 4

LI

Continued study of browser mechanics via:

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork http://taligarsiel.com/Projects/howbrowserswork1.htm#Introduction

The article wrapped up with a high level tour of the box model and some positioning rules. Even though this struck me as more specification than mechanics, it seemed worth my time to round out my comprehension of browser mechanics with renderer positioning details.

Boxes and Blocks

The CSS Box model clearly defines the real estate of a particular renderer element. I took the following image from the article for quick reference:

I hadn't considered it before, but a Box can be thought of as a proper entity in the overall conceptual model. It should definitely be mentally modeled when authoring web content.

The display property defines the type of box that is generated per element.

block: a "block" box. inline: N inline boxes none: no box

Natural next question: what is a "block" vs an "inline" box?

A "block" box is a box that has it's own rectangle in the browser canvas.

An "inline" box does not have it's own block, but must be inside of a special "block" box. This box is called a line box or just lines. It is essentially a box of dynamic height that fully encapsulates the inline boxes belonging to it.

A key difference between block and inline has to do with positioning. In flow positioning, "block" boxes are laid out vertically (as in with newlines), and "inline" boxes are laid out horizontally.

Positioning

While inline and block boxes dictate a lot about how elements in a document are layed out during flow, there are other considerations. First is the positioning "scheme", which is determined by two properties, position and float

The position attribute can be: 1. static : layed out in accordance with layout flow rules (default) 2. absolute : positioned relative to it's first static ancestor 3. fixed : positioned relative to the browser window 4. relative : positioned as by "static", and then offset accordingly.

The float attribute can be: 1. left : element floats to the left of it's container 2. right : element floats to the right of it's container 3. none : does not float at all (default)

Layering

Layering in browsers is handled by a boxes z axis propery, called the z-index

The browser divides all boxes into z layers based on their indices, and then paints them all from back to front. Note that this presents an overdraw scenario if not handled carefully.

The article was unclear as to whether z-index impacts x-y flow, but I suspect not. I will look into this in future studies.

This topic wrapped up the article. There's a lot more to understand, but I feel as though I have come away with a better understanding of Browser Mechanics, and look forward to experimenting with this knowledge in the near future.

fin

[codified-likeness-utility]

How browsers work internally - Tali Garsiel - Front-Trends 2012

[michaelmackend]

Browser Mechanics 3

Continued study of browser mechanics via:

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork http://taligarsiel.com/Projects/howbrowserswork1.htm#Introduction

CSS Parsing

CSS is a context free grammar. The output of it's parser is a StyleSheet object whose purpose ultimately is to obtain style rules from selectors.

Script Processing

Typically, script tags are processed immeditely as they are encountered. The parser halts until the script has been downloaded and processed unless it has been marked as async or deferred.

Some browsers optimize this by "parsing ahead" and looking for more files to download. This optimization does not affect the DOM tree.

Tree construction wraps up by executing any scripts that were set as "deferred".

Script and CSS interaction

Typically CSS can be processed asynchronously to the DOM as it cannot affect it's logical construction. A complication occurs when a script attempts to access style info. Browsers may handle this differently but any good browser will favor determinism over performance. It is logical to conclude that JS querying CSS may introduce load hitches.

Render Tree Construction

The Render Tree is actually constructed while the DOM Tree is constructed. The root node is the full browser render viewport dimension; created by the discovery of html and body tags. The render tree relies heavily on the CSS to determine how it gets constructed. It must compute style data for each DOM node.

Style computation faces 3 priciple challenges- size of style data, scope of workload matching selectors, and sheer complexity of resolving cascading behaviors.

To help cope, various optimizations may be relied upon. WebKit relies on sharing style objects so long as they meet a set of criteria. Think of this as a dictionary.

Firefox, on the other hand, relies on an additional tree- the Rule Tree. This tree consists of nodes that correspond to previously generated css resolutions. As document nodes are processed, the rule tree is simultaneously generated and relied upon as a sort of cache of css style determinations.

In any case, it can be concluded that a page can be made to perform more optimally by attempting to minimize the number of unique css selector scenarios a browser must resolve.

Cascade Ordering

Due to the fact that there may be many conflicting style rules, a procedure for resolving conflicting styles has been established and is implemented by the browsers in accordance with the specification.

There are two hierarchies as it comes to cascading styles: 1) Order of style sheet origin 2) Order of selector specificity.

The first is simple- favor as follows (most to least):

User Important, Author Important, User Normal, Author Normal, Browser Default.

The second, selector specificity, assigns a score of specificity to selectors based on how granular the selector is. Without bogging down with the exact details, the number is basically incremented by counting the number of id's, classes, etc are used in the selector and an appropriately high base number is used to ensure the specificiations priorities. for example (but not confirmed accurate): ...

Layout Computation

The layout process is carried out left-to-right, top-to-bottom. This is called the layout flow. Later elements typically do not impact earlier elements.

The root frame begins at the very top left of the render viewport.

Layout is recursive. Parents compute their frame, and children are wholly contained therein.

Layout can be retriggered for a few reasons. The entire layout tree can be recomputed when the browser is resized or when style or font changes are made. Conversely, layout can be recomputed incrementally, in the event of asyncrhonous DOM changes (such as script driven DOM insertions etc). In either event, layout it flow is recomputed (sometimes called "reflow"), but flagging a "dirty" bit on the renderer element affected by the change.

Similar to style, scripts that query layout information (such as offsets) may force the otherwise asynchronous layout procedure to be carried out synchronously.

The Recursive Layout Process

func ComputeLayout(Renderer renderer) { var width = renderer.ComputeWidth(); var height = 0; foreach(var child in renderer.children) { SetChildPosition(child); ComputeLayout(child); height = max(height, child.height); } renderer.height = height; renderer.dirty = true; }

Painting

In the painting stage, the render tree is traversed each node's "paint" method is called.

Like the layout stage, the paint stage can be comprehensive or incremental. I'm not sure what causes global repainting. Incremental repaints occur when renderer nodes repaint but do not affect other parts of the rendered view.

When a rectangle is invalidated due to painting, the OS generates a paint event.

Painting Order

BG Color

BG Image

Border

Children

Outline

Painting occurs in this way back to front, and is likely subject to overdraw, which is a natural performance hit. Some browser specific otpimizations are made to minimize the impact of this, but authoring should still take overdraw into consideration.