Question

I occasionally heard the keywords marshalling, style recalculation, IO, reflows, painting, etc. in context of web browsers. Can someone who knows these well put it simple? What are the responsibilities of each and how do they work together, if at all?

For example, this is what IE blog has to say about performance: http://blogs.msdn.com/b/ie/archive/2010/09/14/performance-what-common-benchmarks-measure.aspx

Here’s a picture of what V8 test actually tests:

I wonder what all of these really mean. I have never heard of any explanation of Marshalling and Formatting and so on. I assume display is rendering/painting and layout is reflow.

Answer 1

On that exact same page which you link to there’s a link to a page that describes the various subsystems.

I quote:

Here’s a brief overview of these subsystems in the order they’re
encountered when you load a web site:

Networking: The first subsystem generally encountered is networking.
The networking subsystem is responsible for all communication between
the client and server, including local caching of web content. The
networking subsystem is generally gated on the performance of the
user’s network

HTML: As HTML documents are downloaded from the server they’re passed
to an HTML subsystem which parses the document, initiates additional
downloads in the networking subsystem, and creates a structural
representation of the document. Modern browsers also contain related
subsystems which are used for XHTML, XML and SVG documents.

CSS: When CSS is encountered, whether that’s inside an HTML document
or a CSS document, it’s passed to a CSS subsystem which parses the
style information and creates a structural representation that can be
referenced later.

Collections: HTML documents often contain metadata, for example the
information described in the document head or the attributes applied
to an element. The collections subsystem is responsible for storing
and accessing this metadata.

JavaScript: When script is encountered, it’s passed directly to the
JavaScript subsystem which is responsible for executing that script.
The JavaScript subsystem is probably the most well-known of the
browser subsystems thanks to the visibility it has received over the
last few years.

Marshaling: Because most JavaScript engines are not directly
integrated into the browser, there is a communication layer between
the browser and the script engine. Passing information through this
communication layer is generally referred to as marshaling.

Native OM: JavaScript interacts with the document through the Document
Object Model API’s. These API’s are generally provided through a
subsystem which knows how to access and manipulate the document and is
the primary interaction point between the script engine and the
browser.

Formatting: Once the document is constructed, the browser needs to
apply the style information before it can be displayed to the user.
The formatting subsystem takes the HTML document and applies styles.

Block Building: CSS is a block based layout system. After the document
is styled, the next step is to construct the rectangular blocks that
will be displayed to the user. This process determines things like the
size of the blocks and is tightly integrated with the next stage –
layout.

Layout: Now that the browser has styled the content and constructed
the blocks, it can go through the process of laying out the content.
The layout subsystem is responsible for this algorithmically complex
process.

Rendering: The final stage of the process occurs inside the rendering
subsystem where the final content is displayed to the user. This
process is often referred to as “drawing to the screen” and may occur
on the CPU, the GPU, or a combination of both.