Browsers. Magic is inside.
45
-
Upload
devexperts -
Category
Technology
-
view
1.703 -
download
4
description
Browser internal components Main processes during page load or dynamic changes Performance tips and tricks Chrome Devtools in action
Transcript of Browsers. Magic is inside.
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 ofWebKit, 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 loopfunction 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 reado Change Non-visible element and set it to visibleo Use documentFragment or cloned element and then swap it with
old oneo Use classes instead of inline styleso 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: [email protected]
Вакансии: hh.ru и itmozg.ru.
Наши новости: devexperts.com и ВКонтакте.
Контакты
Мы создаем качественное и эффективное ПО для
комплексной автоматизации брокерской, биржевой и финансовой
деятельности
Devexperts
Наша команда – это 300 профессионалов в области программирования,
тестирования и поддержки ПО
