Download as PDF, PPTX
![Optimization
• Optimize time to first render by minimizing[1]
• number of critical resources
• critical path length
• number of critical bytes](https://image.slidesharecdn.com/techtalk-howbrowserswork002-170410093945/75/How-Browsers-Work-39-2048.jpg)
![References and further reading
[1] Google Web Fundamentals: Critical Rendering Path by Ilya Grigorik
[2] Google Web Fundamentals: Rendering Performance by Paul Lewis
[2] How browsers work: Behind the scenes of modern web browsers by Tali Garsiel
[3] W3C: HTML 5 - A vocabulary and associated APIs for HTML and XHTML
[4] W3C: Cascading Style Sheet Level 2 Revision 1 (CSS 2.1) Specification
[5] W3C: DOM4
[5] A Reference Architecture for Web Browsers by Alan Grosskurth and Michael W. Godfrey
[6] Understanding the critical rendering path, rendering pages in 1 second by Luis Vieira
[7] Usability Engineering by Jakob Nielsen
[8] Response Times: The 3 Important Limits by Jakob Nielsen
[9] Optimising the Critical Rendering Path by Stephan Max
[10] CSS Mastery - Advanced Web Standard Solutions by Andy Budd](https://image.slidesharecdn.com/techtalk-howbrowserswork002-170410093945/75/How-Browsers-Work-40-2048.jpg)
Uploaded bymyposter GmbH
How Browsers Work
Browsers work by parsing HTML and CSS to construct a DOM and render tree, laying out elements and painting them to the screen. The main components are the user interface, browser engine (which handles networking, JavaScript interpretation, etc.), and rendering engine. The rendering engine constructs the DOM from HTML and CSSOM from CSS, builds the render tree by combining them, then lays out and paints elements to display the final webpage. Optimization focuses on minimizing critical resources, path length, and bytes to speed up the initial render.
More Related Content
![Fundamental JavaScript [UTC, March 2014]](https://cdn.slidesharecdn.com/ss_thumbnails/fundamentaljavascriptutcmarch2014-140305104047-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to How Browsers Work
![Automating ISP Networks Using Ansible and IPAM as a Source of Truth [SoT]](https://cdn.slidesharecdn.com/ss_thumbnails/automatingispnetworksusingansibleandipamasasourceoftruthsot-v25-1-251124105117-d7d4ca24-thumbnail.jpg?width=640&height=640&fit=bounds)
How Browsers Work
- 1. How Browsers Work TheCritical Rendering Path Explained
- 2. Main Browser Components UserInterface Browser Engine Rendering Engine Networking JavaScript Interpreter XML Parser Display Backend DataStorage Source: “A Reference Architecture for Web Browsers” by Alan Grosskurth and Michael Godfrey
- 3. Main Browser Components UserInterface Browser Engine Rendering Engine Networking JavaScript Interpreter XML Parser Display Backend DataStorage Source: “A Reference Architecture for Web Browsers” by Alan Grosskurth and Michael Godfrey
- 4. Rendering Engines Browser RenderingEngine Safari WebKit Chrome Blink Opera Blink Firefox Gecko Internet Explorer Trident Edge EdgeHTML
- 5. Rendering Engine: The MainFlow DOM Render Tree Layout Painting CSSOM
- 6. Rendering Engine: The MainFlow DOM Render Tree Layout Painting CSSOM
- 7.
- 8. HTML Parser Characters TokensNodes DOMBytes
- 9. HTML Parser Characters TokensNodes DOMBytes Tokenisation Tree construction
- 10. HTML Parser: Bytes CharactersTokens Nodes DOMBytes 3C 68 74 6D 6C 3E 3C 68 61 64 3E 3C 6D 65 74 61 6E 61 6D 65 3D 22 76 69 65 77 70 6F 72 74 22 … 3C 2F 68 74 6D 6C 3E
- 11. HTML Parser: Characters CharactersTokens Nodes DOMBytes <html><head>…</head><body><h1>DOM Example</h1><p>…</p></body></html>
- 12. HTML Parser: Tokens CharactersTokens Nodes DOMBytes StartTag: <html> EndTag: </html> Text AttributeName: class AttributeValue: “outer”
- 13. Tokenisation: Output StartTag: htmlStartTag: head EndTag: head StartTag: body EndTag: htmlEndTag: body StartTag: h1 DOM Example EndTag: h1 … StartTag: meta StartTag: link StartTag: title EndTag: title DOM Example StartTag: p EndTag: pStartTag: span EndTag: span… … StartTag: img AttributeName: src AttributeValue: example.jpg
- 14. HTML Parser: SyntaxAnalysis Characters Tokens Nodes DOMBytes html head body meta link title h1 p img Lorem ipsum dolor sit amet, span DOM Example elit, sed do eiusmod tempor incididunt ut labore et dolore magna aligua. consectetur adipiscing
- 15. HTML Parser: DOM CharactersTokens Nodes DOMBytes html head body meta link title h1 p img DOM Example span elit, sed do … consectetur adipiscing Lorem ipsum dolor sit amet,
- 16. Rendering Engine: The MainFlow DOM Render Tree Layout Painting CSSOM
- 17.
- 18. CSS Parser Characters TokensNodes CSSOMBytes
- 19. CSS Style Objects CSSStyleSheet CSSRuleCSSRuleCSSRule Selector Declaration Selector Declaration Selector Declaration body h1 p font-sizefont-size 12px 16px color red
- 20. CSS Object Model body h1p img span font-size: 12px font-size: 12px font-size: 16px font-size: 12px float: right font-size: 12px color: red font-size: 12px color: red color: blue display: none
- 21. Rendering Engine: The MainFlow Render Tree Layout Painting DOM CSSOM
- 22. Render tree construction DOMCSSOM + = Render tree
- 23. Render tree construction:DOM html head body meta link title h1 p img DOM Example span elit, sed do … consectetur adipiscing Lorem ipsum dolor sit amet,
- 24. Render tree construction:DOM html head body meta link title h1 p img DOM Example span elit, sed do … consectetur adipiscing Lorem ipsum dolor sit amet,
- 25. Render tree construction: stylecomputation body h1 p img DOM Example elit, sed do … Lorem ipsum dolor sit amet, font-size: 12px font-size: 16px font-size: 12px color: red font-size: 12px float: right
- 26. Rendering Engine: The MainFlow Render Tree Layout Painting DOM CSSOM
- 27.
- 28. Box types inline inlineinline inline block block
- 29. Positioning • Normal flow •box formatting context (block and inline) • relative positioning • Floats • first: lay out box according to normal flow • then: push as far left/right as possible • Absolute and fixed positioning • box is taken out of normal flow • positioned dependent on the box’s containing block (absolute) or the viewport (fixed)
- 30. Layout process • globalvs. incremental layout • dirty bit system • placement, width & height calculation
- 31.
- 32.
- 33.
- 34. Rendering Engine: The MainFlow Render Tree Layout Painting DOM CSSOM
- 35.
- 36. Reflow vs. Repaint JSStyle Layout Paint Composite JS Style Layout Paint Composite JS Style Layout Paint Composite • reflow and repaint • repaint • no reflow/repaint
- 37. Summary Render Tree LayoutPainting DOM CSSOM
- 38. JavaScript Execution <script> <script defer> <scriptasync> Parse HTML HTML parser idle Download script Execute script
- 39. Optimization • Optimize timeto first render by minimizing[1] • number of critical resources • critical path length • number of critical bytes
- 40. References and furtherreading [1] Google Web Fundamentals: Critical Rendering Path by Ilya Grigorik [2] Google Web Fundamentals: Rendering Performance by Paul Lewis [2] How browsers work: Behind the scenes of modern web browsers by Tali Garsiel [3] W3C: HTML 5 - A vocabulary and associated APIs for HTML and XHTML [4] W3C: Cascading Style Sheet Level 2 Revision 1 (CSS 2.1) Specification [5] W3C: DOM4 [5] A Reference Architecture for Web Browsers by Alan Grosskurth and Michael W. Godfrey [6] Understanding the critical rendering path, rendering pages in 1 second by Luis Vieira [7] Usability Engineering by Jakob Nielsen [8] Response Times: The 3 Important Limits by Jakob Nielsen [9] Optimising the Critical Rendering Path by Stephan Max [10] CSS Mastery - Advanced Web Standard Solutions by Andy Budd