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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Browser Internals

2,723

Published on

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
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,723
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
0
Likes
6
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/

×