An understanding of how modern browsers work is essential as it helps in optimizing perfromance and the rendering of each page; be it HTML, CSS or JS. The session was hosted by Daliya and Sneha, our UI Engineers and members Google's Women Techmakers Trivandrum chapter since it's inception.

1. How Modern Browsers Work
Presented by,
Daliya John and Sneha P P

2. Topic
● Browser
● Browser Components
● Rendering Engine
● Javascript Interpreter

3. What is Browser ?
A browser is a software application used to locate, retrieve and display content on
the World Wide Web, including Web pages, images, video and other files.

4. How Browser works behind the scene?
(request)
Browser
(Translate domain name)
IP Address
Domain Name Server
(Response)
Interpret
Render
Display

5. Browser Components

6. (1) User Interface
● The user interface is the space where user interact with the browser.
● It includes address bar, back and next button , refresh, bookmark etc

7. (2) Browser Engine
● It works as a bridge between user interface and rendering engine.
● According to the inputs from various user interface , it queries and manipulate
the rendering engine.

8. (3) Rendering Engine
● Responsible for rendering the requested web page on the browser screen.
● The rendering engine interprets the html , that are formatted using css and
generate layout.
● That is displayed in the user interface

9. Different browser use different rendering engine
1. Internet Explorer : Trident
2. Firefox & Mozilla : Gecko
3. Chrome : Blink
4. Safari : Webkit

10. (4) Networking
● Browser component which retrieves the URL using the internet protocols of
HTTP.
● It handle internet communication and security
● It implement a cache of retrieved documents to reduce network traffic.

11. (5) Javascript Interpreter
● Interpret and execute the javascript code embedded in website.
● The interpreted result are send to the rendering engine for display.

12. (6) UI Backend
● UI backend is used for drawing basic widgets like combo box and windows.

13. (7) Data persistence / storage
● Browser support storage mechanism such as local storage , Indexed DB,
websql and file system.
● It is a small database created on the local drive of the computer where the
browser is installed.
● It manage user data such as cache, bookmark and preference.

14. Performance insights
● Executes script immediately reaches the <script> tag.
● If script is external, then first the resource has to be fetched from the network.
● In both cases, the parser will be on hold until it gets executed.
● Not only <script> tag, but also <style> and <link> tag can halt the rendering.
● Use “defer” and “async”
● Use Best-Practice Layout Techniques
Inline style will affect layout.

15. ● Minimize the Number of CSS Rules
Tools like grunt-uncss, and gulp-uncss can significantly reduce your
style definitions and file sizes.
● Modify Hidden Elements
Elements hidden with display: none; will not cause a repaint or reflow when they are changed.
● Update Elements in Batch
var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';

16. Use this method
var myelement = document.getElementById('myelement');
myelement.classList.add('newstyles');
Css
.newstyles {
width: 100px;
height: 200px;
margin: 10px;
}

17. ● Does “rendering”
● Parse HTML and CSS
● Generates the layout and does painting
● Rendering engine used by different browser:
○ Internet Explorer: TRIDENT
○ Mozilla firefox: GECKO
○ Chrome : BLINK
○ Safari: WEBKIT
Rendering Engine

18. Rendering Engine
RENDER TREE
LAYOUT
PAINT
PARSING

19. ● Parse HTML
● Generate nodes
● Content tree/ DOM tree
● Parse CSS
● DOM nodes + parsed CSS info
● Actual representation of what to be displayed onto the
screen
● Render tree
● Give each node the exact coordinates where it should
appear on the screen
● Always start from the root node.
● Recursive process
● Each node is painted by traversing the render tree.
● Using the UI Backend layer

20. WEBKIT main flow

21. GECKO main flow

22. Parsing
● Translating into a structure the code can use
● Consists of grammar. It contains:
○ Vocabulary
○ Syntax rules
● Result : Parse tree
Eg: 1 + 2 * 3
1. Lexical Analysis: create tokens
2. Syntax Analysis: apply the syntax rules.
+
2
*1
3

23. Parsing
Conventional
Parsing
Non-Conventional
CSS HTMLJS

24. HTML Parsing
● Forgiving nature, try to recover.
● Not CFG
● HTML DTD
● Parsing DOM tree
● Can be halted
<html>
<head>
<title>
Sample Program
</title>
</head>
<body>
<div>
<p>
Hello World..!
</p>
</div>
</body>
</html>
<html>
<head>
<title>
Sample Program
</title>
</head>
<body>
<div>
<p>
Hello World..!
</body>
</html>

25. <html>
<head>
<title>
Sample Program
</title>
</head>
<body>
<div>
<p>
Hello World..!
</p>
</div>
</body>
</html>
HTML Dom Element
HTML Body element
HTML Paragraph element
HTML Div element
TEXT

26. CSS Parsing
● It creates CSS object model (CSSOM)
P{
Color: red;
}
CSSStyleSheet
CSSRule
DeclarationsSelectors
colorp red

27. Render tree
● Generated while DOM tree is constructed.
● DOM + CSSOM
● Order in which they are going to be displayed
● Elements in the render tree are called ‘renderer’ or ‘render objects’.
● Render object is a rectangle
● Actual representation of what will show on screen
● JS can affect them.

30. Layout
● Calculates position and size
● Most of the time possible to compute geometry in one pass
● Recursive process begin at the root object(<html>)
● Dirty-bit system
● Global and incremental
○ Global: affects all renders, screen resize
○ Incremental: dirty bit system

31. GECKO reflow visualization

32. CSS Reflow Visualization

33. Paint
● Traverse the render tree
● Calls the paint() method to display the contents on the page
● Global and Incremental painting
● Painting order
○ Background-color
○ Background-image
○ Border
○ outline

34. JAVASCRIPT Interpreter
● JS is dynamically typed.
● Used to parse and execute javascript code.
● Different browsers have different js engines:
○ SPIDERMONKEY
○ V8
○ NITRO
○ CHAKRA

35. JIT Compilers
● Just In Time Compilers
● CSS, HTML and JAVASCRIPT interpreter.
● Generate machine code during runtime not Ahead Of Time

36. AST Bytecode Machine codeSource code
Parser
Optimizing
compiler
Bytecode
Generator

37. ● MODERN BROWSERS have atleast 2 compilers.
● “Recompiling” Hot functions.
● It uses previously seen type information.
● De-optimize if the type is changed.

38. THANK YOU