Browsers. Magic is inside.

1,980
-1

Published on

Browser internal components
Main processes during page load or dynamic changes
Performance tips and tricks
Chrome Devtools in action

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,980
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Browsers. Magic is inside.

  1. 1. Browsers Magic is inside Alex Tokarenko tokarenko@devexperts.com
  2. 2. What we will talk about • Browser internal components • Main processes during page load or dynamic changes • Performance tips and tricks • Chrome Devtools in action
  3. 3. Why we will talk about it? • Mostly used software in the world • Internet Explorer 90% dominance • Nowadays browsers not a "black box“ - they became opensource
  4. 4. High Level structure
  5. 5. Referenced rendering engines All examples will be from source code of WebKit, Blink, Gecko Why? – Because they are open sourced
  6. 6. Rendering engine basic flow Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
  7. 7. Main components and processes
  8. 8. Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
  9. 9. HTML Parser doings • Parses input HTML tag soup • Fixes web author mistakes • Requests to load resources • Constructs DOM tree
  10. 10. Turning ‘soup’ into DOM tree
  11. 11. HTML Language • HTML approach is very "forgiving“ • HTML is not a context free grammar • Can’t be parsed by XML parser • Can’t be parsed by regular parsers (BNF) • Defined in DTD (Document Type Definition)
  12. 12. Error tolerance example #1 WebKit source code: if (m_inStrayTableContent && localName == tableTag) popBlock(tableTag);
  13. 13. Error tolerance example #2 • Start with closed tag • Not closed tags at all Handling </BR> in WebKit code: if (t->isCloseTag(brTag) && m_document->inCompatMode()) { reportError(MalformedBRError); t->beginTag = true; }
  14. 14. HTML parsing flow
  15. 15. Special parsing algorithm because • Forgiving nature of the language • Historically lack of documentation developers • Huge amount of invalid code HTML parsers 'guesses' the intention of the code author
  16. 16. Resources loading during parsing • Scripts • CSS • Other resources
  17. 17. Scripts loading VS Page Latency Script is loaded and executed immediately when achieved Parsing halts until script execution
  18. 18. Recommendation • Put the script at the end of document • HTML5 defer and async attributes
  19. 19. CSS Loading VS Latency Can block scripts execution until loaded
  20. 20. Browsers are smart Speculative parsers find resources references to load in parallel threads
  21. 21. Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
  22. 22. Rendering tree Holds: • Tree of visual elements in display order • Style information, computed metrics • Shadow DOM tree
  23. 23. Rendering tree VS DOM
  24. 24. Out of basic flow • “display:none” elements are excluded • Absolute and fixed position elements • Non visual elements like <head></head>
  25. 25. Computed style
  26. 26. Performance impact • Style is a very large construct • Lookup for matching CSS rule can cause performance issues div div div div { … } • Applying rules is complex
  27. 27. Browsers are smart • Style objects can be shared between render objects • Browser collect changes and process them on demand
  28. 28. Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
  29. 29. What is Layout process? • Calculation of geometry and position • Flow based model (left-to-right, top-to-bottom) • Coordinate system relative to top left coordinates
  30. 30. How Layout Process Works • Parent determines its width • Parent places children with right coordinates • Accumulate children their heights • Caches calculated values
  31. 31. Global Layout • Occurs at least ones for whole tree • Happens on global changes (like window resize)
  32. 32. Incremental Layout Happens: • When new element added to the tree • When geometric attributes changes
  33. 33. Browser is smart Usually changes are batched and done asynchronously However script accessing geometry attributes can force synchronous layout
  34. 34. Synchronous layout Synchronous layout demo // Animation loop function update(timestamp) { for(var m = 0; m < movers.length; m++) { movers[m].style.left = ((Math.sin(movers[m].offsetTop + timestamp/1000)+1) * 500) + 'px'; } raf = window.requestAnimationFrame(update); };
  35. 35. Painting • Traversing the tree from the root • Global and Incremental paint • Dirty bit system
  36. 36. Painting order CSS2 specification defines the order of the painting elements: – background color – background image – border – children – outline
  37. 37. What can trigger REcalculations? • Changes style will cause restyle and repaint of the element; • Changes of position will cause relayout and repaint; • Adding a DOM node will cause relayout and repaint of the node. • Major changes will cause invalidation of caches, relayout and repaint
  38. 38. Recommendations o Cache style values if possible for read o Change Non-visible element and set it to visible o Use documentFragment or cloned element and then swap it with old one o Use classes instead of inline styles o Try to keep changes lower in the tree
  39. 39. How we make a deal with all this stuff?! • Browser dev tools – Timeline – Logs – Heap profiler – Object allocations – CPU Profiler
  40. 40. Links • http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ • http://taligarsiel.com/Projects/howbrowserswork1.htm • https://developers.google.com/chrome-developer-tools/docs/demos/too-much-layout/ • http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ • https://www.webkit.org/blog/114/webcore-rendering-i-the-basics/ • http://www.chromium.org/blink • http://msdn.microsoft.com/en-us/library/aa741312(v=vs.85).aspx • https://lists.webkit.org/pipermail/webkit-dev/2013-April/024436.html • http://stackoverflow.com/questions/15804169/the-safari-javascript-engine-in-webkit • http://www.html5rocks.com/en/tutorials/speed/script-loading/ • http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html • http://royal.pingdom.com/2013/03/21/browser-wars-2013/ • http://www.html5rocks.com/en/tutorials/memory/effectivemanagement • http://www.html5rocks.com/en/tutorials/speed/static-mem-pools • http://www.html5rocks.com/en/tutorials/performance/mystery/ • http://en.wikipedia.org/wiki/V8_(JavaScript_engine) • http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ • https://code.google.com/p/v8/
  41. 41. Q?
  42. 42. Join us
  43. 43. Если Вам захотелось присоединиться к команде Devexperts, пишите и звоните нам: Тел.: (812) 438-16-26 E-mail: job@devexperts.com Вакансии: hh.ru и itmozg.ru. Наши новости: devexperts.com и ВКонтакте. Контакты
  44. 44. Мы создаем качественное и эффективное ПО для комплексной автоматизации брокерской, биржевой и финансовой деятельности Devexperts
  45. 45. Наша команда – это 300 профессионалов в области программирования, тестирования и поддержки ПО
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×