Introduction to Browser Internals
•
8 likes•5,079 views
This document discusses an introduction to browser internals presented at Barcamp Bangalore 2014. It covers how browsers work behind the scenes including parsing HTML, constructing the DOM tree, applying CSS styles, executing JavaScript, laying out pages, and more. The rise of Chrome and fall of Internet Explorer market share is shown. Hands-on demonstrations are provided of manipulating the DOM in real-time to see how browsers operate. Resources for learning more about browser engines like WebKit and building your own browser are also listed.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to Browser Internals
Similar to Introduction to Browser Internals (20)
More from Siva Arunachalam
More from Siva Arunachalam (18)
Recently uploaded
Recently uploaded (20)
Introduction to Browser Internals
- 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!
- 5. Just Before We Get Started
- 6. How many of you use Internet Explorer as your Primary Browser?
- 9. The rise (Chrome) and fall(IE)
- 11. The Past
- 12. Now
- 14. Chrome
- 16. Chrome It’s Chrome. Not Google Chrome
- 17. Content
- 18. Dream to build an Operating System? Build a Browser First
- 19. Computer Users Spent more time on?
- 20. 1 Billion Mobile Devices Alone (Android + iOS)
- 21. Hello Web Developers! Know your platform
- 23. Parts of a Web Page
- 24. Just Contents. Nothing Else • Text • Links • Images
- 25. Video
- 26. Classical Web Web Server Web Browser HTML + CSS
- 27. Web Browser Engine <h1> BarCamp </h1> h1 { color:rgb(255,0,0); } BarCamp
- 28. What Layout Engine will do? • Parsing • DOM Construction • Resource Dispatching & Loading • Event Handling • Painting • JS Bindings
- 34. The Internals • All are Objects • Document Object Model <html> Root Document • <head> • <title> • <body> • <h1>
- 35. Access & Manipulation • Web 1.0 (~ 0% Dynamic) • Web 2.0 Objects are Waiting • DOM Need a Language • Java Script
- 37. The Big Picture
- 39. OO DOM • Members / Properties • Methods / Behaviors • Other Objects (recursive) • DOT Notation Examples: • document.title • Window.print()
- 40. Internal Objects of DOM • window • document • navigator • screen • history • location
- 41. DOM - Hierarchy Node Element HTML Element HTML Input Element HTML Table Element
- 42. DOM - Versions Legacy Intermediate Standard (W3C) DOM 1 DOM 2 (getElementById) DOM 3 (Xpath) DOM 4
- 43. DOM Objects Lets Explore it in Chrome
- 44. Lets do a magic!
- 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"
- 49. Lets browse www.google.com (other than Google Chrome)
- 52. How is it possible?
- 54. No No! Rajinikanth is not working for Chrome.
- 55. No Magic at All Its all about awesome engineering (Lets revisit the basics)
- 56. A Brand New Request Parse the URL Domain Protocol DNS Resolve TCP Connection HTTP Request
- 57. The Response
- 58. HTTP/1.1 200 OK Content-Type: application/xhtml+xml XML Mode
- 60. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html
- 61. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html>
- 62. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> Quirks Mode
- 64. HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <!doctype html> <html> Standard Mode
- 65. Sample HTML
- 66. DOM Tree
- 68. • Non-Blocking • Image Decoder • Paint Image
- 69. • Non-Blocking • Bucket Identification • Style Matching • Element to CSS Selector • Not like JS CSS
- 70. • ~ Blocking • <script> • document.write() JavaScript – Classical Browsers
- 71. • Non Blocking • No DOM Tree • Parsing the HTML JavaScript – Modern Browsers
- 72. <script> defer & async http://stackoverflow.com/questions/10808109/script-tag-async-defer JavaScript
- 73. JavaScript & DOM = Programming Language + DB
- 76. • View Port • Block • Scroll • Block • Text Frame Construction
- 78. • Positions • Dimensions • Related Attributes • Margin • Padding Layout Construction
- 82. • Mostly done by CPU • Now, delegates to GPU Painting
- 83. A Scrollable Page with Fixed Background Image
- 84. Lets Talk about the RajiniKanth Factor Chrome’s Network Stack
- 85. Average Web Page Size? # of Sub Resources?
- 86. DNS Resolve
- 87. DNS Pre Resolve
- 89. TCP Connect
- 90. TCP Pre Connect
- 92. Pooling & Reuse, Caching
- 94. Where to Start? http://www.macdevcenter.com/lpt/a/4570 WebKit? Chrome? (5GB)
- 95. libwww
- 96. BYOB (Build Your Own Browser) http://www.macdevcenter.com/lpt/a/4570