introduction to browser internals
DESCRIPTION
Session given in Barcamp Bangalore Monsoon 2013. barcampbangalore.org/bcb/bcb14/introduction-to-browser-internalsTRANSCRIPT
Introduction to Browser Internals
Sivasubramaniam Arunachalam
Sep 14, 2013
@sivaa_in
http://barcampbangalore.org/bcb/bcb14/introduction-to-browser-internals
It’s me!
It’s about you!
#barcampblr
#browser
Just Before We Get
Started
How many of you use
Internet Explorer
as your
Primary Browser?
http://www.w3schools.com/browsers/browsers_stats.asp
http://www.w3schools.com/browsers/browsers_stats.asp
Where do you fit?
The rise (Chrome) and fall (IE)
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
The Past
Now
Chrome
Chrome
What’s wrong?
Chrome
It’s Chrome. Not Google Chrome
Content
Dream to build an Operating System? Build a Browser First
Computer Users Spent more time on?
1 Billion Mobile Devices Alone (Android + iOS)
Hello Web Developers! Know your platform
Black Box
White Box Open
Parts of a Web Page
Just Contents. Nothing Else
• Text
• Links
• Images
Video
Classical Web
Web Server Web Browser HTML + CSS
Web Browser Engine
<h1> BarCamp </h1> h1 { color:rgb(255,0,0); }
BarCamp
What Layout Engine will do?
• Parsing
• DOM Construction
• Resource Dispatching & Loading
• Event Handling
• Painting
• JS Bindings
The Internals
• All are Objects
• Document Object Model
<html> Root Document • <head>
• <title>
• <body>
• <h1>
Access & Manipulation
• Web 1.0 (~ 0% Dynamic)
• Web 2.0
Objects are Waiting
• DOM
Need a Language
• Java Script
The Big Picture
OO DOM
• Members / Properties
• Methods / Behaviors
• Other Objects (recursive)
• DOT Notation
Examples:
• document.title
• Window.print()
Internal Objects of DOM
• window
• document
• navigator
• screen
• history
• location
DOM - Hierarchy
Node
Element
HTML Element
HTML Input Element
HTML Table Element
DOM - Versions
Legacy Intermediate
Standard (W3C) DOM 1
DOM 2 (getElementById)
DOM 3 (Xpath)
DOM 4
DOM Objects Lets Explore it in Chrome
Lets do a magic!
How many changes?
// 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"
How is it possible?
No No! Rajinikanth is not working for Chrome.
No Magic at All Its all about awesome engineering
(Lets revisit the basics)
A Brand New Request
Parse the URL
Domain
Protocol DNS Resolve
TCP Connection
HTTP Request
The Response
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
XML Mode
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
<html>
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
<html>
Quirks Mode
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
HTTP/1.1 200 OK Content-Type: application/xhtml+xml
Content-Type: text/html
<!doctype html>
<html>
Standard Mode
Sample HTML
DOM Tree
•Image •CSS
• JavaScript
Sub Resources
• Non-Blocking • Image Decoder
• Paint
Image
• Non-Blocking
• Bucket Identification
• Style Matching
• Element to CSS Selector
• Not like JS
CSS
• ~ Blocking
• <script>
• document.write()
JavaScript – Classical Browsers
• Non Blocking
• No DOM Tree
• Parsing the HTML
JavaScript – Modern Browsers
<script>
defer & async
http://stackoverflow.com/questions/10808109/script-tag-async-defer
JavaScript
JavaScript & DOM
= Programming Language + DB
• View Port
• Block
• Scroll
• Block
• Text
Frame Construction
• Positions
• Dimensions
• Related Attributes
• Margin
• Padding
Layout Construction
• Mostly done by CPU
• Now, delegates to GPU
Painting
A Scrollable Page with Fixed
Background Image
Lets Talk about the RajiniKanth Factor
Chrome’s Network Stack
Average Web Page Size?
# of Sub Resources?
DNS Resolve
DNS Pre Resolve
How about Wikipedia?
TCP Connect
TCP Pre Connect
http://www.igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-tcp-preconnect/
Pooling & Reuse, Caching
Chrome Internals chrome://dns chrome://omnibox/ chrome://net-internals/ chrome://predictors chrome://histograms/DNS.PrefetchResolution chrome://cache
Where to Start?
http://www.macdevcenter.com/lpt/a/4570
WebKit? Chrome? (5GB)
libwww
BYOB (Build Your Own Browser)
http://www.macdevcenter.com/lpt/a/4570
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/