Browsers. Magic is inside.

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

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

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;
}

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

Rendering tree
Holds:
• Tree of visual elements in display order
• Style information, computed metrics
• Shadow DOM tree

Out of basic flow
• “display:none” elements are excluded
• Absolute and fixed position elements
• Non visual elements like <head></head>

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

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/

Если Вам захотелось присоединиться к команде Devexperts,
пишите и звоните нам:
Тел.: (812) 438-16-26
E-mail: job@devexperts.com
Вакансии: hh.ru и itmozg.ru.
Наши новости: devexperts.com и ВКонтакте.
Контакты

Мы создаем качественное и эффективное ПО для
комплексной автоматизации брокерской, биржевой и финансовой
деятельности
Devexperts

Наша команда – это 300 профессионалов в области программирования,
тестирования и поддержки ПО

Browsers. Magic is inside.

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Browsers. Magic is inside.

Similar to Browsers. Magic is inside. (20)

Recently uploaded

Recently uploaded (20)

Browsers. Magic is inside.