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. 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
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. Error tolerance example #1
WebKit source code:
if (m_inStrayTableContent && localName == tableTag)
popBlock(tableTag);
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;
}
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
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. Browsers are smart
• Style objects can be shared between render
objects
• Browser collect changes and process them
on demand
28. Parse HTML to construct DOM tree
Render tree construction
Layout the render tree
Paint
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. How Layout Process Works
• Parent determines its width
• Parent places children with right coordinates
• Accumulate children their heights
• Caches calculated values
31. Global Layout
• Occurs at least ones for whole tree
• Happens on global changes (like window resize)
36. Painting order
CSS2 specification defines the order of the painting elements:
– background color
– background image
– border
– children
– outline
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. 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. How we make a deal with all this stuff?!
• Browser dev tools
– Timeline
– Logs
– Heap profiler
– Object allocations
– CPU Profiler
43. Если Вам захотелось присоединиться к команде Devexperts,
пишите и звоните нам:
Тел.: (812) 438-16-26
E-mail: job@devexperts.com
Вакансии: hh.ru и itmozg.ru.
Наши новости: devexperts.com и ВКонтакте.
Контакты
44. Мы создаем качественное и эффективное ПО для
комплексной автоматизации брокерской, биржевой и финансовой
деятельности
Devexperts
45. Наша команда – это 300 профессионалов в области программирования,
тестирования и поддержки ПО