Performance (Browser)
How browsers work?
● Rendering Engine (Webkit, Blink, Gecko)
● Javascript Engine (Nitro, V8, *monkey)
● Networking
● Persi...
Browser flow
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● From hitting a URL to the usable ...
Loading Content
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

● HTTP Request
● DNS lookup, Data fetch...
Parsing HTML
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● HTML is a serialized tree
● Gramm...
Computing Style
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● CSS selector matching
● Comput...
Construct Frames
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● Create render tree
● Elements...
Layout (Reflow)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

● Laying out the elements using content...
Paint (Repaint)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

● Paints the layout on to the viewport ...
Optimizations
The way we write code can be used to optimize
each step the browser takes to build a
webpage and render it t...
Loading Content (Optimization)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

● Minify scripts and CSS...
Parse HTML (Optimization)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● Resources are loaded...
Computing Style(Optimization)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● Specificity of s...
Construct Frames (Optimization)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

● Frames are created only for v...
Layout(Optimization)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● Every time layout changes...
Paint(Optimization)
Load
Content

Parse
HTML

Compute
Style

Construct
Frames

Layout

Paint

● Minimise repaint in a page...
Javascript Optimization
Scoping
● Scope variables and functions properly. Avoid using the global
namespace (use var statem...
Javascript Optimization
Data Access
● Local variables and literals fastest
● Global variables are the deepest in the scope...
Demo
● http://codepen.io/paulirish/pen/nkwKs
vs
http://codepen.io/paulirish/pen/LsxyF

● Repaint demo : http://175.41.136....
Tools
● Chrome Dev Tools
● Pagespeed
● Yslow
● Fiddler
References
● How browsers work http://taligarsiel.
com/Projects/howbrowserswork1.htm
● Speed up Your Javascript : http://y...
Upcoming SlideShare
Loading in...5
×

Performance (browser)

209

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
209
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Performance (browser)

  1. 1. Performance (Browser)
  2. 2. How browsers work? ● Rendering Engine (Webkit, Blink, Gecko) ● Javascript Engine (Nitro, V8, *monkey) ● Networking ● Persistence
  3. 3. Browser flow Load Content Parse HTML Compute Style Construct Frames Layout Paint ● From hitting a URL to the usable web page
  4. 4. Loading Content Load Content Parse HTML Compute Style Construct Frames Layout ● HTTP Request ● DNS lookup, Data fetching, Server side processing ● HTTP Response Paint
  5. 5. Parsing HTML Load Content Parse HTML Compute Style Construct Frames Layout Paint ● HTML is a serialized tree ● Grammatical parsing based on doctype(DTD) or quirks ● Loading external files (JS, CSS, Images) ● Creates content tree ● Done on adding HTML http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-3.xhtml
  6. 6. Computing Style Load Content Parse HTML Compute Style Construct Frames Layout Paint ● CSS selector matching ● Computed Stylesheet ● CSS parser ● Computes style for each node ● Cascaded (Browser native style, external, inline) ● Done on adding Styles http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-8.xhtml
  7. 7. Construct Frames Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Create render tree ● Elements in render tree are called frames or render objects ● Tree has only displaying elements ● Not one to one mapped to content tree http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-6.xhtml
  8. 8. Layout (Reflow) Load Content Parse HTML Compute Style Construct Frames Layout ● Laying out the elements using content tree, render tree, computed styles ● Where to position the element wrt to the other elements and how much space it will take ● Done when style or html changes lead to layout changes Paint
  9. 9. Paint (Repaint) Load Content Parse HTML Compute Style Construct Frames Layout ● Paints the layout on to the viewport using 2D rendering api ● Tells GPU how to render the document ● Modern browsers use compositing and hardware acceleration of GPU to provide faster paint cycles ● Done when layout, or styles changes and even on scroll. Paint
  10. 10. Optimizations The way we write code can be used to optimize each step the browser takes to build a webpage and render it to user
  11. 11. Loading Content (Optimization) Load Content Parse HTML Compute Style Construct Frames Layout ● Minify scripts and CSS, make sprite images ● GZIP data from server ● Serve static content from cookieless domains, use multiple domains for serving static content ● Reduce network round trips(Combine script,css, images), Redirects ● Utilise browser caching to the max Paint
  12. 12. Parse HTML (Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Resources are loaded as the HTML is parsed ● Scripts are blocking in older browsers. (no document. write) ● FOUC (Flash of unstyled content),no @import ● Use an optimized approach of having basic scripts to show some state in the top of the page and rest of the scripts (majority) at the bottom
  13. 13. Computing Style(Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Specificity of selectors ● Parsed from right for each node ● No inline styles ● Club dynamic style changes into one (using a className) http://dbaron.org/talks/2008-11-12-faster-html-andcss/slide-8.xhtml
  14. 14. Construct Frames (Optimization) Load Content Parse HTML Compute Style Construct Frames ● Frames are created only for visible items ● Visibility vs Display property Layout Paint
  15. 15. Layout(Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Every time layout changes reflow is done. ● Can get really expensive because any change in any element can result in complete reflow of the page. ● Avoid as much DOM manipulation as possible ● Club all DOM insertion into a single object (DocumentFragment) and insert into dom once. ● DOM reflow happens even on querying layout properties
  16. 16. Paint(Optimization) Load Content Parse HTML Compute Style Construct Frames Layout Paint ● Minimise repaint in a page as much as possible ● Avoid changes while scrolling ● Try to use new CSS transform and animate rather than modifying the elements top/left properties (Avoid jquery animations as they cause both reflow and repaint) ● Don't over do optimization by trying to dispose of items outside the viewport (Maybe faster in older browsers but can make scrolling in most modern browsers slow)
  17. 17. Javascript Optimization Scoping ● Scope variables and functions properly. Avoid using the global namespace (use var statement) ● Global variables are the deepest in the scope chain ● with and try,catch add a level to scope chain ● Closure also add to a level in scope chain Activation object this Scope Chain Execution Context 0 window arguments [] variables undefined Scope 1 Global document (object) window (object)
  18. 18. Javascript Optimization Data Access ● Local variables and literals fastest ● Global variables are the deepest in the scope chain ● Accessing properties of objects and elements of array is more expensive ● If a property is accessed in a loop more than once store it in a local variable Loops ● Avoid for each, for in, and other function based iterators as they access all properties of the array object not just the elements
  19. 19. Demo ● http://codepen.io/paulirish/pen/nkwKs vs http://codepen.io/paulirish/pen/LsxyF ● Repaint demo : http://175.41.136.68:8090
  20. 20. Tools ● Chrome Dev Tools ● Pagespeed ● Yslow ● Fiddler
  21. 21. References ● How browsers work http://taligarsiel. com/Projects/howbrowserswork1.htm ● Speed up Your Javascript : http://youtu. be/mHtdZgou0qU ● Faster HTML and CSS: Layout Engine Internals for Web Developers be/a2_6bGNZ7bA http://youtu.
  1. A particular slide catching your eye?

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

×