How Browsers Work Ehsan Akhgari /* ehsan@mozilla.com */ Mozilla Corporation Follow along: mzl.la/hbw-talk
Browser engines Gecko (used in Firefox, Thunderbird, etc.) WebKit (used in Safari, Android Browser, etc.) Blink (used in Chrome, Opera, etc.) Trident (used in IE, etc.) Presto (used in Opera, now deceased.)
Communication (network) layer Input: a URI, output: a stream of bytes Protocol implementations Local file system access Encryption facilities Caches
Processing layer Input: a stream of bytes and some metadata, output: some form of presentation Event handling
DOM tree HTML documents == Tree structures <html><body><div>hello</div>world</body></html> html head body div "world" "hello"
CSS div { color: red; } body > p.text { font: serif; border: thick solid blue; } Result of parsing: a set of style rules
Data structures for layout Typical data structure: tree of boxes Internal to the browser engine Limited access from the outside world
Javascript Varying implementations Interpretation JIT Compilation Optimization Highly competitive area today
How does my JS code run? Parse the source code into IR (Optional) Analyze the code Generate runnable code Bytecode Native machine code (JIT) Run it Modify the generated code if needed
Dynamic modifications Layout tree changes Modifications to the DOM tree Modifications to the styles Changes in the presentation environment Recreate or update the layout tree
Presentation layer Presentation media Screen Paper (printing) Screen readers Speakers Network (yikes!) Event handling
Challenges Large software (Gecko @~3.3MLOC) Memory management Testing Implementing specifications Backwards compatibility
Recent/future trends New features WebGL: OpenGL 3D API for the web WebRTC: P2P communication WebSockets, Web Workers Web Components Performance improvements Tools for web developers