Friday, January 29

Notes : Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015

So how does the browser actually render a website?
Browser - A complex software.



Components that make up a browser
1) Bindings - Based on OS, the API etc. Talking to Network etc.

2) Rendering - Parsing, layout, painting etc.
Constructing a webpage.

3) Platform -  Depends on OS.

4) Javascript VM


1) Parsing HTML
a) HTML is forgiving by nature, if you forget to close a tag, it will not throw an error.
b) Parsing isn't straightforward - In most languages if you make an error, it will not work
c) It can be halted.
d) It will do speculative parsing

Valid HTML5
<body>
<div class="wat">My first Website</div>
<div>Visitor Count : 0</div>
</body>

In above code, even though it is not complete HTML, browser will parse it correctly.

Parsing flow

P.S : The last step is the DOM creation.

Tokeniser


Parse Tree
Representation of your HTML



Dom Tree
Create a DOM tree where there is interaction of Javascript.


 HTML parsing can be halted by
<script></script>, <link></link> and <style></style>

The above tags will halt the parser as a script can alter the document

1) Network latency

2) Link and style could halt the JS execution


Speculative Parsing

The browser pauses for script etc. So it will create another thread or process and look ahead for images and other scripts, css etc.


Reentrant

Means the parsing process can be interrupted.


Performance Insights 1

1) Always put your </script> at the bottom
a) Parse is uninterrupted
b) Faster to render
c) Defer and async attributes . These are alternative to not putting script tag at bottom.
Defer will stop DOM content loading.
d) Trade off

CSS Parsing
It is pretty standard. We have a CSSOM i.e CSS Object Model.

2. Render/Frame tree
DOM + CSSOM
a) Combines the two object models, style rsolutions
b) This is the actual representation of what will show on screen
c) Not a 1 to 1 mapping of your HTML

So parsing of HTML and CSS can happen in parallel, Javascript can affect the parsing by interrupting.

Render tree has multiple trees as below
a) RenderObjects - Actual Node itself i.e the DOM node
b) RenderStyles
c) RenderLayers - The browser needs to know about the object if it is positioned absolute and if there is a z-index applied to it
d) Line boxes - Wrapping text, font size etc.

Things that are not in render tree
a) Non-visual elements head, script, title etc.
b) Nodes hidden by display: none;


Render Object has reference to DOM node
a) Visual output
b) Geometric info
c) Can layout and paint
d) Holds style an computed metrics

Calculating Visual Properties
a) Combine all styles
b) Defaults, external, style elements and inline
c) Complexity around matching rules for each element - CSS computation
d) Style computation - How much width, height etc to apply

3. Layout
Also called as reflow, re layout. It is a recursive process.
Traverse render tree
Nodes position and size
layout its children

Will batch layouts, incremental layouts
The browser will intelligently batch changes
Render tree items will flag themselves as dirty
The batch will traverse the tree and find all dirty trees
This happens asynchronously

Immediate layout
Doing a font size change will re-layout the entire document
same with browser re-size
Accessing certain properties via java script eg. node.setHeight

Performance Insight 2
Take note from the browser and batch
a) Act like the browser and batch your DOM changes
b) Do all your reads in one pass
c) Followed by writes

4.Paint
Takes all information from render tree and paints.
a) Will take the layed out render trees
b) It will create layers
c) Incremental process - Paint background color, background image, shadows etc.
d) Builds up over 12 phases.

Painting
a) Produces a bitmap from each layer. Bitmap is uploaded to the GPU as a texture, these texture will be composites into a final image

Performance Insight 3
Inline critical CSS
a) The most important bits of your site/app
b) Speeds up first paint times
c) External js and css can block
d) Delta last bitmap



Be the first one to Comment!!!

Post a Comment