How Browsers Work

1. How Browsers Work The Critical Rendering Path Explained

2. Main Browser Components User Interface 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 User Interface 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 Rendering Engine Safari WebKit Chrome Blink Opera Blink Firefox Gecko Internet Explorer Trident Edge EdgeHTML

5. Rendering Engine: The Main Flow DOM Render Tree Layout Painting CSSOM

7. Example Markup

8. HTML Parser Characters Tokens Nodes DOMBytes

9. HTML Parser Characters Tokens Nodes DOMBytes Tokenisation Tree construction

10. HTML Parser: Bytes Characters Tokens 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 Characters Tokens Nodes DOMBytes <html><head>…</head><body><h1>DOM Example</h1><p>…</p></body></html>

12. HTML Parser: Tokens Characters Tokens Nodes DOMBytes StartTag: <html> EndTag: </html> Text AttributeName: class AttributeValue: “outer”

13. Tokenisation: Output StartTag: html StartTag: 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: Syntax Analysis 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 Characters Tokens Nodes DOMBytes html head body meta link title h1 p img DOM Example span elit, sed do … consectetur adipiscing Lorem ipsum dolor sit amet,

17. Example CSS

18. CSS Parser Characters Tokens Nodes CSSOMBytes

19. CSS Style Objects CSSStyleSheet CSSRule CSSRuleCSSRule Selector Declaration Selector Declaration Selector Declaration body h1 p font-sizefont-size 12px 16px color red

20. CSS Object Model body h1 p img span font-size: 12px font-size: 12px font-size: 16px font-size: 12px ﬂoat: right font-size: 12px color: red font-size: 12px color: red color: blue display: none

21. Rendering Engine: The Main Flow Render Tree Layout Painting DOM CSSOM

22. Render tree construction DOM CSSOM + = 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: style computation 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 ﬂoat: right

27. Box Model margin border padding width x height

28. Box types inline inline inline 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 • global vs. incremental layout • dirty bit system • placement, width & height calculation

31. Layout example

32. Layout process: width calculation viewportdiv.outerdiv.inner

33. Example Markup

35. Painting

36. Reflow vs. Repaint JS Style Layout Paint Composite JS Style Layout Paint Composite JS Style Layout Paint Composite • reflow and repaint • repaint • no reflow/repaint

37. Summary Render Tree Layout Painting DOM CSSOM

38. JavaScript Execution <script> <script defer> <script async> Parse HTML HTML parser idle Download script Execute script

39. Optimization • Optimize time to ﬁrst render by minimizing[1] • number of critical resources • critical path length • number of critical bytes

40. 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) Speciﬁcation [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

How Browsers Work

How Browsers Work

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Similar a How Browsers Work

Similar a How Browsers Work (20)

Mais de myposter GmbH

Mais de myposter GmbH(10)

Último

Último(20)

How Browsers Work