Downloaded 120 times
![// 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"](https://image.slidesharecdn.com/introductiontobrowserinternals-130914032727-phpapp02/85/Introduction-to-Browser-Internals-48-320.jpg)
![// 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"](https://image.slidesharecdn.com/introductiontobrowserinternals-130914032727-phpapp02/75/Introduction-to-Browser-Internals-48-2048.jpg)
Uploaded bySiva Arunachalam
Introduction to Browser Internals
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.
More Related Content
![The Box Model [CSS Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/chapter3-part2-boxmodel-150120083129-conversion-gate01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Introduction to Browser Internals
Introduction to Browser Internals
- 1. Introduction to Browser Internals SivasubramaniamArunachalam Sep 14, 2013 @sivaa_in http://barcampbangalore.org/bcb/bcb14/introduction-to-browser-internals
- 2.
- 4.
- 5. Just Before WeGet Started
- 6. How many ofyou use Internet Explorer as your Primary Browser?
- 7.
- 8.
- 9. The rise (Chrome)and fall(IE)
- 10.
- 11.
- 12.
- 14.
- 15.
- 16. Chrome It’s Chrome. NotGoogle Chrome
- 17.
- 18. Dream to buildan Operating System? Build a Browser First
- 19. Computer Users Spentmore time on?
- 20. 1 Billion MobileDevices Alone (Android + iOS)
- 21. Hello Web Developers! Knowyour platform
- 22.
- 23. Parts of aWeb Page
- 24. Just Contents. NothingElse • Text • Links • Images
- 25.
- 26. Classical Web Web ServerWeb Browser HTML + CSS
- 27. Web Browser Engine <h1> BarCamp</h1> h1 { color:rgb(255,0,0); } BarCamp
- 28. What Layout Enginewill do? • Parsing • DOM Construction • Resource Dispatching & Loading • Event Handling • Painting • JS Bindings
- 34. The Internals • Allare 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.
- 39. OO DOM • Members/ Properties • Methods / Behaviors • Other Objects (recursive) • DOT Notation Examples: • document.title • Window.print()
- 40. Internal Objects ofDOM • 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 Exploreit in Chrome
- 44. Lets do amagic!
- 46.
- 48. // Create andadd 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 thanGoogle Chrome)
- 52. How is itpossible?
- 54. No No! Rajinikanthis not working for Chrome.
- 55. No Magic atAll Its all about awesome engineering (Lets revisit the basics)
- 56. A Brand NewRequest Parse the URL Domain Protocol DNS Resolve TCP Connection HTTP Request
- 57.
- 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
- 63.
- 64. HTTP/1.1 200 OK Content-Type:application/xhtml+xml Content-Type: text/html <!doctype html> <html> Standard Mode
- 65.
- 66.
- 67.
- 68. • Non-Blocking • ImageDecoder • Paint Image
- 69. • Non-Blocking • BucketIdentification • 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.
- 73. JavaScript & DOM = ProgrammingLanguage + DB
- 76. • View Port •Block • Scroll • Block • Text Frame Construction
- 78. • Positions • Dimensions •Related Attributes • Margin • Padding Layout Construction
- 79.
- 82. • Mostly doneby CPU • Now, delegates to GPU Painting
- 83. A Scrollable Page withFixed Background Image
- 84. Lets Talk aboutthe RajiniKanth Factor Chrome’s Network Stack
- 85. Average Web PageSize? # of Sub Resources?
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92. Pooling & Reuse,Caching
- 93.
- 94.
- 95.
- 96. BYOB (Build Your OwnBrowser) http://www.macdevcenter.com/lpt/a/4570
- 97.
- 98.