How Browsers Render

Browser's rendering engine explained

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Transcript

1. how browsers render
2. As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices. Paul Irish, Chrome Dev Tools Team
3. Google Chrome 52.96% Internet Explorer 19.85% Firefox 18.27% Safari 5.23% Opera 1.73% Most used Desktop Browsers (May, 12, 2015) http://gs.statcounter.com
4. Google Chrome 32.30% Safari 19.49% Android Browser 17.96% UC Browser 13.69% Opera 9.09% http://gs.statcounter.com Most used Mobile Browsers (May, 12, 2015)
7. The responsibility of the rendering engine is… well… rendering.
8. Google Chrome Blink Internet Explorer Trident Firefox Gecko Safari WebKit Edge EdgeHTML
9. The rendering engine will start parsing the request document from the Networking layer. This is usually done in 8KB chunks.
16. HTML CSS Javascript
17. HTML parsing
18. HTML parsing
19. Browser’s error tolerance
21. CSS parsing
22. CSS parsing div div div div
23. CSS parsing #header div.main-nav a
24. blocking defer async Javascript parsing and execution
25. The model of the web is synchronous
26. What triggers a reflow?
27. What triggers a reflow? • Font Size Change • Screen Resize • Add/Remove Stylesheets • JS Changing DOM • User Input • :hover • Changing Class attribute • offset calculation
28. Reflows are unavoidable
29. Make DOM changes as low as possible in the DOM tree
30. Do not use inline styles When we edit inline styles the browser is gonna make a reflow for every property affected. Instead, you can use classes, just to make a single reflow.
31. Only animate absolute/fixed elements This way you do not make reflows on undesired elements.
32. tables… Tables often require multiple passes before the definitive layout is finally stablished. Every new element affects previous elements. Imagine the last cell of the table which is very very (very) wide, it will cause a reflow of the entire table. Another reason to avoid using tables is that the minimum change in a cell affects the entire table, forcing a new reflow.