Page 1
Introduction to Browser Internals
Sivasubramaniam Arunachalam
Sep 14, 2013
@sivaa_in
http://barcampbangalore.org/bcb/bcb14/introduction-to-browser-internals
Page 4
It’s about you!
#barcampblr
#browser
Page 5
Just Before We Get
Started
Page 6
How many of you use
Internet Explorer
as your
Primary Browser?
Page 7
http://www.w3schools.com/browsers/browsers_stats.asp
Page 8
http://www.w3schools.com/browsers/browsers_stats.asp
Where do you fit?
Page 9
The rise (Chrome) and fall (IE)
Page 10
http://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Usage_share_of_web_browsers_%28Source_StatCounter%29.svg/600px-Usage_share_of_web_browsers_%28Source_StatCounter%29.svg.png
Page 15
Chrome
What’s wrong?
Page 16
Chrome
It’s Chrome. Not Google Chrome
Page 18
Dream to build an Operating System? Build a Browser First
Page 19
Computer Users Spent more time on?
Page 20
1 Billion Mobile Devices Alone (Android + iOS)
Page 21
Hello Web Developers! Know your platform
Page 22
Black Box
White Box Open
Page 23
Parts of a Web Page
Page 24
Just Contents. Nothing Else
• Text
• Links
• Images
Page 26
Classical Web
Web Server Web Browser HTML + CSS
Page 27
Web Browser Engine
<h1> BarCamp </h1> h1 { color:rgb(255,0,0); }
BarCamp
Page 28
What Layout Engine will do?
• Parsing
• DOM Construction
• Resource Dispatching & Loading
• Event Handling
• Painting
• JS Bindings
Page 34
The Internals
• All are Objects
• Document Object Model
<html> Root Document • <head>
• <title>
• <body>
• <h1>
Page 35
Access & Manipulation
• Web 1.0 (~ 0% Dynamic)
• Web 2.0
Objects are Waiting
• DOM
Need a Language
• Java Script
Page 39
OO DOM
• Members / Properties
• Methods / Behaviors
• Other Objects (recursive)
• DOT Notation
Examples:
• document.title
• Window.print()
Page 40
Internal Objects of DOM
• window
• document
• navigator
• screen
• history
• location
Page 41
DOM - Hierarchy
Node
Element
HTML Element
HTML Input Element
HTML Table Element
Page 42
DOM - Versions
Legacy Intermediate
Standard (W3C) DOM 1
DOM 2 (getElementById)
DOM 3 (Xpath)
DOM 4
Page 43
DOM Objects Lets Explore it in Chrome
Page 46
How many changes?
Page 48
// Create and add Reset Box
var reset_box = document.createElement(‘input’)
reset_box.type = 'reset'
document.forms[0].appendChild(reset_box)
// Change the button Label
document.getElementById("gbqfsa").innerHTML = "SAP Search"
// Change the Font Size of footer
document.getElementById("flls").style.fontSize = '2em'
// Change the branding image
document.images[1].src = "http://upload.wikimedia.org/wikipedia/en/e/e4/Logo_SAP.gif"
Page 49
Lets browse www.google.com
(other than Google Chrome)
Page 52
How is it possible?
Page 54
No No! Rajinikanth is not working for Chrome.
Page 55
No Magic at All Its all about awesome engineering
(Lets revisit the basics)
Page 56
A Brand New Request
Parse the URL
Domain
Protocol DNS Resolve
TCP Connection
HTTP Request
Page 58
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
XML Mode
Page 60
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
Page 61
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
<html>
Page 62
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
<html>
Quirks Mode
Page 63
http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/W3C_and_Internet_Explorer_box_models.svg/300px-W3C_and_Internet_Explorer_box_models.svg.png
Page 64
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
<!doctype html>
<html>
Standard Mode
Page 67
•Image •CSS
• JavaScript
Sub Resources
Page 68
• Non-Blocking • Image Decoder
• Paint
Image
Page 69
• Non-Blocking
• Bucket Identification
• Style Matching
• Element to CSS Selector
• Not like JS
CSS
Page 70
• ~ Blocking
• <script>
• document.write()
JavaScript – Classical Browsers
Page 71
• Non Blocking
• No DOM Tree
• Parsing the HTML
JavaScript – Modern Browsers
Page 72
<script>
defer & async
http://stackoverflow.com/questions/10808109/script-tag-async-defer
JavaScript
Page 73
JavaScript & DOM
= Programming Language + DB
Page 76
• View Port
• Block
• Scroll
• Block
• Text
Frame Construction
Page 78
• Positions
• Dimensions
• Related Attributes
• Margin
• Padding
Layout Construction
Page 79
http://www.youtube.com/watch?v=dndeRnzkJDU
Page 82
• Mostly done by CPU
• Now, delegates to GPU
Painting
Page 83
A Scrollable Page with Fixed
Background Image
Page 84
Lets Talk about the RajiniKanth Factor
Chrome’s Network Stack
Page 85
Average Web Page Size?
# of Sub Resources?
Page 88
How about Wikipedia?
Page 91
http://www.igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-tcp-preconnect/
Page 92
Pooling & Reuse, Caching
Page 93
Chrome Internals chrome://dns chrome://omnibox/ chrome://net-internals/ chrome://predictors chrome://histograms/DNS.PrefetchResolution chrome://cache
Page 94
Where to Start?
http://www.macdevcenter.com/lpt/a/4570
WebKit? Chrome? (5GB)
Page 96
BYOB (Build Your Own Browser)
http://www.macdevcenter.com/lpt/a/4570
Page 97
Thank You! [email protected]
bit.ly/sivasubramaniam bit.ly/sivaa_in
Page 98
References http://www.clker.com/cliparts/6/7/0/f/o/X/birthday-cake-four-candles-md.png http://leashsstuff.blogspot.in/2011/06/browser-cartoon.html https://blog.mozilla.org/webdev/2012/05/04/how-browser-engines-work/