Your SlideShare is downloading. ×
  • Like
Introduction to Browser Internals
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to Browser Internals

  • 2,297 views
Published

Session given in Barcamp Bangalore Monsoon 2013. …

Session given in Barcamp Bangalore Monsoon 2013.
barcampbangalore.org/bcb/bcb14/introduction-to-browser-internals

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,297
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
41
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction to Browser Internals Sivasubramaniam Arunachalam Sep 14, 2013 @sivaa_in http://barcampbangalore.org/bcb/bcb14/introduction-to-browser-internals
  • 2. It’s me!
  • 3. It’s about you! #barcampblr #browser
  • 4. Just Before We Get Started
  • 5. How many of you use Internet Explorer as your Primary Browser?
  • 6. http://www.w3schools.com/browsers/browsers_stats.asp
  • 7. http://www.w3schools.com/browsers/browsers_stats.asp Where do you fit?
  • 8. The rise (Chrome) and fall(IE)
  • 9. 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
  • 10. The Past
  • 11. Now
  • 12. Chrome
  • 13. Chrome What’s wrong?
  • 14. Chrome It’s Chrome. Not Google Chrome
  • 15. Content
  • 16. Dream to build an Operating System? Build a Browser First
  • 17. Computer Users Spent more time on?
  • 18. 1 Billion Mobile Devices Alone (Android + iOS)
  • 19. Hello Web Developers! Know your platform
  • 20. Black Box White BoxOpen
  • 21. Parts of a Web Page
  • 22. Just Contents. Nothing Else • Text • Links • Images
  • 23. Video
  • 24. Classical Web Web Server Web Browser HTML + CSS
  • 25. Web Browser Engine <h1> BarCamp </h1> h1 { color:rgb(255,0,0); } BarCamp
  • 26. What Layout Engine will do? • Parsing • DOM Construction • Resource Dispatching & Loading • Event Handling • Painting • JS Bindings
  • 27. The Internals • All are Objects • Document Object Model <html> Root Document • <head> • <title> • <body> • <h1>
  • 28. Access & Manipulation • Web 1.0 (~ 0% Dynamic) • Web 2.0  Objects are Waiting • DOM  Need a Language • Java Script
  • 29. The Big Picture
  • 30. OO DOM • Members / Properties • Methods / Behaviors • Other Objects (recursive) • DOT Notation Examples: • document.title • Window.print()
  • 31. Internal Objects of DOM • window • document • navigator • screen • history • location
  • 32. DOM - Hierarchy Node  Element HTML Element HTML Input Element HTML Table Element
  • 33. DOM - Versions  Legacy  Intermediate  Standard (W3C)  DOM 1  DOM 2 (getElementById)  DOM 3 (Xpath)  DOM 4
  • 34. DOM Objects Lets Explore it in Chrome
  • 35. Lets do a magic!
  • 36. How many changes?
  • 37. // 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"
  • 38. Lets browse www.google.com (other than Google Chrome)
  • 39. How is it possible?
  • 40. No No! Rajinikanth is not working for Chrome.
  • 41. No Magic at All Its all about awesome engineering (Lets revisit the basics)
  • 42. A Brand New Request  Parse the URL  Domain  Protocol  DNS Resolve  TCP Connection  HTTP Request
  • 43. The Response
  • 44. HTTP/1.1 200 OK Content-Type: application/xhtml+xml XML Mode
  • 45. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
  • 46. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html>
  • 47. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> Quirks Mode
  • 48. 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
  • 49. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <!doctype html> <html> Standard Mode
  • 50. Sample HTML
  • 51. DOM Tree
  • 52. •Image •CSS •JavaScript Sub Resources
  • 53. • Non-Blocking • Image Decoder • Paint Image
  • 54. • Non-Blocking • Bucket Identification • Style Matching • Element to CSS Selector • Not like JS CSS
  • 55. • ~ Blocking • <script> • document.write() JavaScript – Classical Browsers
  • 56. • Non Blocking • No DOM Tree • Parsing the HTML JavaScript – Modern Browsers
  • 57. <script> defer & async http://stackoverflow.com/questions/10808109/script-tag-async-defer JavaScript
  • 58. JavaScript & DOM = Programming Language + DB
  • 59. • View Port • Block • Scroll • Block • Text Frame Construction
  • 60. • Positions • Dimensions • Related Attributes • Margin • Padding Layout Construction
  • 61. http://www.youtube.com/watch?v=dndeRnzkJDU
  • 62. • Mostly done by CPU • Now, delegates to GPU Painting
  • 63. A Scrollable Page with Fixed Background Image
  • 64. Lets Talk about the RajiniKanth Factor Chrome’s Network Stack
  • 65. Average Web Page Size? # of Sub Resources?
  • 66. DNS Resolve
  • 67. DNS Pre Resolve
  • 68. How about Wikipedia?
  • 69. TCP Connect
  • 70. TCP Pre Connect
  • 71. http://www.igvita.com/2012/06/04/chrome-networking-dns-prefetch-and-tcp-preconnect/
  • 72. Pooling & Reuse, Caching
  • 73. Chrome Internals chrome://dns chrome://omnibox/ chrome://net-internals/ chrome://predictors chrome://histograms/DNS.PrefetchResolution chrome://cache
  • 74. Where to Start? http://www.macdevcenter.com/lpt/a/4570 WebKit? Chrome? (5GB)
  • 75. libwww
  • 76. BYOB (Build Your Own Browser) http://www.macdevcenter.com/lpt/a/4570
  • 77. Thank You! siva@sivaa.in bit.ly/sivasubramaniambit.ly/sivaa_in
  • 78. 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/