• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Browsers. Magic is inside.

Browsers. Magic is inside.



Browser internal components

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



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Browsers. Magic is inside. Browsers. Magic is inside. Presentation Transcript

    • Browsers Magic is inside Alex Tokarenko tokarenko@devexperts.com
    • What we will talk about • Browser internal components • Main processes during page load or dynamic changes • Performance tips and tricks • Chrome Devtools in action
    • 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
    • High Level structure
    • Referenced rendering engines All examples will be from source code of WebKit, Blink, Gecko Why? – Because they are open sourced
    • Rendering engine basic flow Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
    • Main components and processes
    • Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
    • HTML Parser doings • Parses input HTML tag soup • Fixes web author mistakes • Requests to load resources • Constructs DOM tree
    • Turning ‘soup’ into DOM tree
    • 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)
    • Error tolerance example #1 WebKit source code: if (m_inStrayTableContent && localName == tableTag) popBlock(tableTag);
    • 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; }
    • HTML parsing flow
    • 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
    • Resources loading during parsing • Scripts • CSS • Other resources
    • Scripts loading VS Page Latency Script is loaded and executed immediately when achieved Parsing halts until script execution
    • Recommendation • Put the script at the end of document • HTML5 defer and async attributes
    • CSS Loading VS Latency Can block scripts execution until loaded
    • Browsers are smart Speculative parsers find resources references to load in parallel threads
    • Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
    • Rendering tree Holds: • Tree of visual elements in display order • Style information, computed metrics • Shadow DOM tree
    • Rendering tree VS DOM
    • Out of basic flow • “display:none” elements are excluded • Absolute and fixed position elements • Non visual elements like <head></head>
    • Computed style
    • 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
    • Browsers are smart • Style objects can be shared between render objects • Browser collect changes and process them on demand
    • Parse HTML to construct DOM tree Render tree construction Layout the render tree Paint
    • 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
    • How Layout Process Works • Parent determines its width • Parent places children with right coordinates • Accumulate children their heights • Caches calculated values
    • Global Layout • Occurs at least ones for whole tree • Happens on global changes (like window resize)
    • Incremental Layout Happens: • When new element added to the tree • When geometric attributes changes
    • Browser is smart Usually changes are batched and done asynchronously However script accessing geometry attributes can force synchronous layout
    • 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); };
    • Painting • Traversing the tree from the root • Global and Incremental paint • Dirty bit system
    • Painting order CSS2 specification defines the order of the painting elements: – background color – background image – border – children – outline
    • 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
    • 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
    • How we make a deal with all this stuff?! • Browser dev tools – Timeline – Logs – Heap profiler – Object allocations – CPU Profiler
    • 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/
    • Q?
    • Join us
    • Если Вам захотелось присоединиться к команде Devexperts, пишите и звоните нам: Тел.: (812) 438-16-26 E-mail: job@devexperts.com Вакансии: hh.ru и itmozg.ru. Наши новости: devexperts.com и ВКонтакте. Контакты
    • Мы создаем качественное и эффективное ПО для комплексной автоматизации брокерской, биржевой и финансовой деятельности Devexperts
    • Наша команда – это 300 профессионалов в области программирования, тестирования и поддержки ПО