Scribd
Upload
40 views

Browser Architecture

Uploaded by

sivajikondeti40
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

Browser Architecture

Uploaded by

sivajikondeti40
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 210

The Lion King - Hotstar Premium +

hotstar.com/in/movies/the-lion-king/1660000046

WELCOME
Browser Architecture under the hood:
How webpages work in modern-day

+
The Lion King - Hotstar Premium
+
hotstar.com/in/movies/the-lion-king/1660000046
Who am I?
Who am I?

Ankush Dharkar
@ankushdharkar
Technical Cofounder

https://yudek.com/
Ex- Web Developer

https://hotstar.com/
Coach / Mentor, Real Dev Squad

https://realdevsquad.com
Why do you need a
browser?
What is a browser?
Internet

✨ Magic⚡✨
How does a website
load?
Specialized
Software

Reads data and converts it into a page


1. Request
2. Response
3. Build
4. Render
1. Request
2. Response
https://varvy.com/pagespeed/display.html
Syntax
Syntax

Documents
Images
JS
CSS
Document

HTML
HTML
Hyper
Text
Markup
Language
Hyper-links

https://www.hotstar.com/

https://www.meetup.com/

https://www.google.com/
Markup

Tags
Tags

< word >


Content
< /word >
Example

<button>
Login
</button>
Attribute

<button class=“btn-login”>
Login
</button>
3. Build
What should show up?
Critical Rendering
Path
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="btn-login"> Login </button>
<script src="script.js"></script>
</body>
</html>
DOM
window

document

html

head body

meta meta link title section article div script

h1 img p p
CSSOM

body
font-size: 16px
font-size: 16px

section article div


font-size: 20px

h1 img p p
font-size: 32px font-size: 20px font-size: 20px
1. Browser examines your HTML and
builds the DOM

2. Browser examines your CSS and


builds the CSSOM

3. Browser combines the DOM and


the CSSOM to create a “Render tree”

4. Browser displays your webpage


4. Render
• Layout / Reflow
• Paint
• Layers
• Compositing
• Layout / Reflow
• Paint

Convert each node and calculations in the render


tree to actual pixels information
• Layers
• Compositing
Browser Basics
User Interface

Data Persistence
Browser Engine

Rendering Engine

Networking JS UI Backend
Browser engine

• Marshals UI <> Rendering engine

• High level interface to RE

• Initiates loading of URL, reload, back, etc

• UI + Feedback: error, loading messages etc


Rendering engine

• Visual representation of a URL page

• Key component HTML Parser

• Creates layout
Networking

• IPs: HTTP, FTP

• Communication + security

• Character set translations, MIME types resolve

• Caching
JS interpreter

• JS Code

• Results passed to rendering engine


UI Backend

• Basic widgets Combo boxes, widgets

• Operating system user interface methods


Data Storage

• Cookies, LS, SS, preferences

• “web database” IndexedDB


Under the hood of a
modern web browser
Application

OS
Hardware

Application
Process
Application that’s currently executing its code

may spawn Threads


Process talks to other processes using
IPC (Inter process Communication)
Moore’s Law: Is it the
only case?
CPU
GPU
I am taking this

Browser

Memory
The Lion King - Hotstar
+
hotstar.com/in/movies/the-lion-king/

Processes & their Threads


Thread

Process
Browser Architecture
One process
The Lion King - Hotstar
+
hotstar.com/in/movies/the-lion-king/1660000046

Networking

Storage

UI Painting
Multi-process

UI UI
Network Process Browser Process UI Process

UI UI

Storage Process GPU Process

Device Process
Plugin Process
Rendering Process
Architectures are just
implementations of Standards
’s Architecture
Storage

UI
UI
Networking
Utility Process
Browser Process

GPU Process
Main Compositor

Renderer Process

Plugin Process
The Lion King - Hotstar Premium All about JS prototype +
hotstar.com/in/movies/the-lion-king/1660000046
Browser Process

The Lion King - Hotstar Premium +


hotstar.com/in/movies/the-lion-king/1660000046

Render Process
Plugin Process

GPU Process
Servicification in Chrome
Processes have their own private memory
space

They often contain copies of common


infrastructure
(like V8 which is a Chrome's JavaScript engine)
In order to save memory, Chrome puts a limit on
how many processes it can spin up

The limit varies depending on how much memory and


CPU power your device has
When Chrome hits the limit, it starts to run multiple
tabs from the same site in one process
Important areas of interest

• Security
• Sandboxing
Operating systems provide a way to restrict
processes’ privileges

So the browser can sandbox certain processes from


certain features
e.g Restricting arbitrary file access from Renderer
Site Isolation
The Same Origin Policy is the core security
model of the web

A site cannot access data from other sites


without consent

e.g prevent Meltdown & Spectre


Site Isolation is a feature in Chrome that runs a
separate renderer process for each cross-site iframe

Enabled on desktop by default since Chrome 67


1.Navigation
When you type a URL into the address bar, your input is
handled by browser process’s UI thread.

1. Handling Input
2. Start Navigation
3. Read Response
4. Renderer process
5. Commit navigation
The Lion King - Hotstar Premium +
hotstar.com/in/movies/the-lion-king/1660000046

Search Query or URL?

UI

Browser Process
UI thread initiates a network call to get site
content

Loading spinner is displayed on the corner


of a tab

Network thread goes through appropriate


protocols like DNS lookup and establishing
TLS Connection for the request
Network thread may receive a server redirect header
like HTTP 301

In that case, it communicates with UI thread about


redirect request
Then, another URL request will be initiated.
Payload
• First few bytes

Content-Type header should say what type of data it is, but since it
may be missing or wrong, additionally MIME Type Sniffing may be
done

header
Content-Type: text/html
Content-Length: 44235

payload
f5 a3 b6 b0 02 2a 4c 33 f1
b6 b7 c1 10 2d ba c1 4a 64
...
Checks:

• SafeBrowsing

• Cross Origin Read Blocking (CORB)


SafeBrowsing

If the domain and the response data seems to


match a known malicious site, then the
network thread alerts to display a warning
CORB

Makes sure that sensitive cross-site data does


not make it to the Renderer process
Other handling

HTML file, pass the data to the renderer process

Zip file or some other file then that means it is a


download request so they need to pass the data to
download manager
Once all of the checks are done and Network
thread is confident that browser should navigate
to the requested site, the Network thread tells UI
thread that the data is ready

UI thread then finds a renderer process to carry


on rendering of the web page
Optimization
The network request could take several hundred milliseconds to get a response

When the UI thread is sending a URL request to the network thread, it already
knows which site they are navigating to

The UI thread tries to proactively find or start a renderer process in parallel to the
network request

This way, if all goes as expected, a renderer process is already in standby


position when the network thread received data

This standby process might not get used if the navigation redirects cross-site, in
which case a different process might be needed
• Data stream via IPC for HTML

• Address bar is updated

• Security indicator and site settings UI reflects the site


information of the new page

• Session history for the tab will be updated so back/


forward buttons will step through the site that was just
navigated to

• To facilitate tab/session restore when you close a tab


or window, the session history is stored on disk
• beforeunload
• unload
Navigation Preload

Round trip between the browser process and renderer process could result
in delays, if service worker eventually decides to request data from the
network

Navigation Preload is a mechanism to speed up this process by loading


resources in parallel to service worker startup

It marks these requests with a header, allowing servers to decide to send


different content for these requests; for example, just updated data instead
of a full document
Renderer Process

Convert HTML, CSS, and JavaScript into a web page that the user can
interact with

The renderer process is responsible for everything that happens inside of


a tab

In a renderer process, the main thread handles most of the code you send
to the user (except Web/Service worker threads)

Compositor and Raster threads are also run inside of a renderer


processes to render a page efficiently and smooth
• Commit message : HTML Data
Construction of DOM

• Receives Commit Message

• Parsing based on HTML standard


Preload Scanner

In order to speed up external resources, "preload scanner"


is run concurrently

If there are things like <img> or <link> in the HTML


document, preload scanner peeks at tokens generated by
HTML parser and sends requests to the network thread in
the browser process
https://html.spec.whatwg.org/multipage/parsing.html#overview-of-the-parsing-model
• async

• defer

• Javascript Modules <script type="module" src="main.mjs"></script>

<link rel="preload">
Style calculation
Layout

The main thread walks through the DOM and


computed styles and creates the layout tree

(information like x y coordinates and bounding box size)


Layout tree may be similar structure to the
DOM tree, but it only contains information
related to what's visible on the page.
Hello, my name is Ankush

Viewport
Paint

Layout Paint Records

What item comes above what?


Paint new pixels in the blank spot

This process of figuring out what has changed


and then only updating the changed elements or
pixels is called invalidation
Invalidation techniques example:

Rectangle invalidation

Figure out the smallest rectangle around each part of the


screen that changed. Then, you only redraw what’s inside those
rectangles
Viewport
This process of arranging layers together is called
compositing

• source bitmaps: the background (including a blank


box where the scrollable content should be) and the
scrollable content itself

• a destination bitmap: which is what gets displayed on


the screen
Turning information into pixels on
the screen is called rasterizing
Compositing
Compositing is a technique to separate
parts of a page into layers,

rasterize them separately,

and composite as a page in a separate


thread called compositor thread
If scroll occurs, since layers are already
rasterized, all it has to do is to composite
a new frame

Animation can be achieved in the same


way by moving layers and compositing a
new frame
Tips
• Stick to transform and opacity changes for your
animations

• Promote moving elements


with will-change or translateZ

• Avoid overusing promotion rules;


layers require memory and management
Composting doesn’t involve Main Thread

• Transforms
• Opacity

Layout / Paint requires Main Thread


Avoid
* {
will-change: transform;
transform: translateZ(0);
}
The problem here is that every layer you create requires
memory and management, and that’s not free

If limited memory the impact on performance can far outweigh


any benefit of creating a layer

Every layer’s textures needs to be uploaded to the GPU, so


there are further constraints in terms of bandwidth between
CPU and GPU, and memory available for textures on the GPU
Raster & Composite

Raster and composite off of the main thread


Once the layer tree is created and paint orders
are determined, the main thread commits that
information to the compositor thread
The compositor thread then rasterizes each
layer

A layer could be large like the entire length of a


page, so the compositor thread divides them
into tiles and sends each tile off to raster
threads
Raster threads rasterize each tile and store
them in GPU memory
The compositor thread can prioritize
different raster threads so that things
within the viewport (or nearby) can be
rastered first

A layer also has multiple tilings for different


resolutions to handle things like zoom-in action
A compositor frame is then submitted to the
browser process via IPC

Another compositor frame could be added from


UI thread for the browser UI change or from other
renderer processes for extensions

These compositor frames are sent to the GPU to


display it on a screen. If a scroll event comes in,
compositor thread creates another compositor
frame to be sent to the GPU
Once tiles are rastered, compositor thread gathers tile
information called draw quads to create a compositor
frame
Updating Rendering
Pipeline is costly
JS

Style

Layout

Paint

Composite
Frame budgets for 60 fps+
Input events
From the browser's point of view, input means any gesture
from the user

Browser

Event, (x,y)
Coordinates

Renderer
Find event target,
run event handlers
If no input event listeners are attached to the page,
Compositor thread can create a new composite frame
completely independent of the main thread.

Things change when it does have to handle events


Non fast scrollable region
Compositor thread marks a region of the page that has
event handlers attached as "Non-Fast Scrollable
Region”

Sends input event to the main thread if the event


occurs in that region

If input event comes from outside of this region, then


the compositor thread carries on compositing new
frame without waiting for the main thread
Finding the event target

Hit test uses paint records data that was


generated in the rendering process to find out
what is underneath the point coordinates
Minimize event dispatches

https://developers.google.com/web/updates/2018/09/inside-browser-part4
Chrome coalesces continuous events and delays dispatching
until right before the next requestAnimationFrame
(getCoalescedEvents)

discrete events are dispatched immediately e.g click, keypress

https://developers.google.com/web/updates/2018/09/inside-browser-part4
Parallelism problem
Coarse-grained
Parallelism
Idle 0%

CPU 1 CPU 2 CPU 3

The Lion King - Hotstar Premium All about JS prototype +


hotstar.com/in/movies/the-lion-king/1660000046
Coarse-grained parallelism makes better use of the
hardware, but it doesn’t make the best use of it

When you split up these web pages across different cores,


some of them don’t have work to do

At the same time, a new page being fired up on a new


core takes just as long as it would if the CPU were
single core
But with coarse-grained parallelism, you
can’t split off any of the work from one
core to the other cores

There are no boundaries between the work


Fine-grained parallelism
With fine-grained parallelism, you break up
this larger task into smaller units that can
then be sent to different cores
Fine-grained parallelism means you usually need to
share memory between the cores

This causes complications

But browsers had to make this shift


How moved towards it
“It’s been kind of like replacing the parts of a
jet engine mid-flight”

- Lin Clark
Firefox started investing in research

A language that was free of data races —

Rust
A browser engine — Servo
that made full use of this fine-grained parallelism
Electrolysis

Multiprocess the default for all users (coarse-grained)


Electrolysis laid the groundwork for Project Quantum

Because it was such a big change, they introduced it slowly,


testing it with small groups of users starting in 2016 before
rolling it out to all Firefox users in mid-2017
Quantum Flow

Focusing on specific important use-cases, instead of


overall performance of a particular subsystem

e.g loading your social media feed


Quantum DOM
Even when you split up the content windows between
cores and have a separate main thread for each one,
there are still a lot of tasks that main thread needs to do

And some of them are more important than others

E.g responding to a keypress is more important than


running garbage collection
Quantum DOM gives a way to prioritize these tasks

This makes Firefox more responsive

Most of this work has landed, but they still plan to take this
further with something called pre-emptive scheduling.
Quantum Compositor
Compositor to its own process

It made Firefox more stable

Having a separate process means that if the


graphics driver crashes, it won’t crash all of Firefox.
Also makes Firefox more responsive
Quantum CSS: Stylo

With Stylo, the work of CSS style computation is


fully parallelized across all of the CPU cores
Linear Speed-Up

A technique called work-stealing to efficiently


split up the work between the cores so that they
all stay busy
Quantum Render:
WebRender

Render = Paint + Composite

Just one step


WebRender isn’t really about making rendering
faster
It’s about making it smoother

It fundamentally changes the way the rendering


engine works to make it more like a 3D game
engine
CSS Engine
Optimizations
What’s a CSS Engine?

The CSS engine is part of the browser’s


rendering engine

The rendering engine takes the website’s


HTML and CSS files and turns them into
pixels on the screen
CSS engine needs to do two things:

• Selector matching
• Cascade
Struct Style Sharing

CSS has hundreds of properties

If the CSS engine managed a value for each


property for each DOM node, it would soon run out
of memory
N DOM Nodes X (Selector Matching + Rules)
COMPUTED STYLES

Color
Color
color: blue;

Margin

Font

Margin

margin-left: 20px;
margin-right: 20px;
RULE tree
root

div span
(stylesheet)

div .red p

div.warning div.error
On restyle, the engine does a quick check to see
whether the change to the parent could
potentially change the rules that match children
If not, then for any descendants, the engine can
just follow the pointer on the descendant node to
get to that rule

It can follow the tree back up to the root to get the


full list of matching rules, from most specific to
least specific

This means it can skip selector matching and


sorting completely
Style Sharing Struct
—inspired by Safari and Chrome, In Firefox

Few checks to see whether it can use something


from the cache:

• Do the 2 nodes have the same ids, classes, etc?


Then they would match the same rules

• For anything that isn’t selector based—inline styles, for


example—do the nodes have the same values?
Then the rules from above either won’t be overridden,
or will be overridden in the same way

• Do both parents point to the same computed style


object?
Then the inherited values will also be the same
body

Cache div#nav div.main

COMPUTED #23

section section

p p p p p p p p p

COMPUTED #52

COMPUTED #119

Are they Same?


psedo-selector
Complications

e.g :first-child

p:first-child can be different from p


Quantum CSS gathers up all of those
selectors and check whether they apply to
the DOM node

It stores the answers as ones and zeros. If


the two elements have the same ones and
zeros, they match

: rst- :last-
child child
0 1 0 0

0 1 1 0
fi
JS Engine Optimizations
JS Engine Pipeline
Source
Parser AST
Code

Byte Code Interpreter

Deoptimize Optimize
Profiling Data

Optimized Optimizing
code Compiler
Optimized
Byte Code
code

Generated Generated
quickly slower

Runs slow Runs fast


Re-compile “hot” functions, with type info from
previous execution

Deoptimize if assumption fails to hold


Interpreter Byte Code

Profiling Data Deoptimize


Optimize

Optimizing Optimized
Compiler code
V8

Ignition Byte Code

Profiling Data Deoptimize


Optimize

Optimized
Turbofan
code
Spidermonkey

Interpreter Byte Code

Optimize

Somewhat
Baseline Optimized
code

Profiling Data Deoptimize


Optimize

Optimized
IonMonkey
code
Chakra

Interpreter Byte Code

Optimize
Profiling Data
Deoptimize
Somewhat
SimpleJIT Optimized
Optimize code

Profiling Data
Optimize

Optimized
FullJIT
code
JavascriptCore (JSC)
Safari, React Native

LLInt bytecode

Optimize

somewhat
Baseline optimized
code

mostly
DFG optimized Deoptimize
code

Optimized
FTL code
JS is dynamic

Great for humans to write

Painful for compilers to optimize


function getAge(user) {
return user.age;
}
Compiler doesn’t know finer
details of ‘user’ object

Does user have ‘x’?


Is it in prototype chain?
Sequence of properties?
Object are dictionaries with string keys

Keys map to ( values + property attributes )


user1 = { name: 'Alex', age: 29 }

[[Value]]: ‘Alex’
[[Writable]]: true
Object [[Enumerable]]: true
[[Con gurable]]: true

‘name’
Property Attributes
‘age’
[[Value]]: 29
[[Writable]]: true
[[Enumerable]]: true
[[Con gurable]]: true
fi
fi
user1 = { name: 'Alex', age: 29 }

user2 = { name: 'Rahul', age: 37 }

[[Value]]: ‘Alex’ [[Value]]: ‘Rahul’


Object Object
[[Writable]]: true [[Writable]]: true
[[Enumerable]]: true [[Enumerable]]: true
‘name’ [[Con gurable]]: true
‘name’ [[Con gurable]]: true

‘age’ ‘age’
[[Value]]: 29 [[Value]]: 37
[[Writable]]: true [[Writable]]: true
[[Enumerable]]: true [[Enumerable]]: true
[[Con gurable]]: true [[Con gurable]]: true
fi
fi
fi
fi
validUserNames = [ ‘Alex’, ‘Rahul’ ];

[[Value]]: 2
Array
[[Writable]]: true
[[Enumerable]]: false
‘length’ [[Con gurable]]: false

‘0’
[[Value]]: ‘Alex’
[[Writable]]: true
‘1’ [[Enumerable]]: true
[[Con gurable]]: true
[[Value]]: ‘Rahul’
[[Writable]]: true
[[Enumerable]]: true
[[Con gurable]]: true
fi
fi
fi
Object Object

‘name’ ‘name’

‘age’ ‘age’

Shape

‘name’

‘age’
Shape
O set: 1
[[Writable]]: true
‘name’
[[Enumerable]]: true
[[Con gurable]]: true
‘age’

Property Information
ff
fi
JSObject

‘Alex’

29 O set: 1
[[Writable]]: true
Shape [[Enumerable]]: true
[[Con gurable]]: true
‘name’
Property
Information
JSObject ‘age’

Rahul
user1 = { name: 'Alex', age: 29 }
user2 = { name: 'Rahul', age: 37 }
39
ff
fi
Object Shapes

“hidden classes”
SpiderMonkey: Shape
V8: Maps
JSC: Structure
Shape(empty)

user1 = {}
‘name’
user1.name ='Alex'
user1.age = 29

Shape(name)

O set: 0
‘name’
[[Writable]]: true
JSObject
[[Enumerable]]: true
‘age’ [[Con gurable]]: true
‘Alex’

Shape(name, age)
29

‘name’ O set: 1
[[Writable]]: true

‘age’ [[Enumerable]]: true


[[Con gurable]]: true
ff
ff
fi
fi
https://mathiasbynens.be/notes/shapes-ics
Inline Cache
user1 = { name: 'Alex', age: 29 }
user2 = { name: 'Rahul', age: 37 }

function getAge(user) {
return user.age;
}

get_by_id loc0, arg1, age


return loc0

Byte Code
Shape(name, age) O set: 0
[[Writable]]: true
‘name’ [[Enumerable]]: true
[[Con gurable]]: true

‘age’
O set: 1
[[Writable]]: true
[[Enumerable]]: true
function getAge(user) { [[Con gurable]]: true
return user.age;
}

get_by_id loc0, arg1, age Shape O set


return loc0
ff
ff
ff
fi
fi
Key Takeaways

• Always initialize the same way (reduce new


shapes)

• Don’t change property values in arrays

• Write code as if it was statically-typed


user1 = { name: 'Alex', age: 29, isPaidUser: false }
user2 = { name: 'Rahul', age: 37 }
arrUsers = [ user1, user2 ]

function getAge(user) {
return user.age;
}

arrUsers.forEach(usr => {
var age = getAge(usr)
// doSomething(age)
})

user1 = { name: 'Alex', age: 29, isPaidUser: false }


user2 = { name: 'Rahul', age: 37 , isPaidUser: undefined }
arrUsers = [ user1, user2 ]

Same shape
getFullName({ firstName: ‘Alex’, lastName: ‘Super’ })

getFullName(Alex’, ‘Super’)
Where should I
start?
Inspect Elements
Console
Debugger
Network Tab
Application
Performance
Auditing
React
https://reactjs.org/
MDN Docs
https://developer.mozilla.org/
Don’t skip learning
Javascript

https://developer.mozilla.org/en-US/docs/Web/JavaScript
• Parse

• Style

• Layout

• Paint

• Composite

• Render
https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/
Ref
https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/
https://hacks.mozilla.org/2017/11/entering-the-quantum-era-how- refox-got-fast-again-and-where-
its-going-to-get-faster/
https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/
https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/
https://www.slideshare.net/quangntta/web-browser-architecture-49196378
https://v8.dev/features/modules
https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-
properties-and-manage-layer-count
https://developers.google.com/web/updates/2018/09/inside-browser-part1
https://mathiasbynens.be/notes/shapes-ics
https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/
https://www.youtube.com/watch?v=cCOL7MC4Pl0
fi
QUESTIONS?
THANK YOU !
@ankushdharkar

Happy to have your questions/doubts


on LinkedIn, Twitter

You might also like