Embed Size (px)
DESCRIPTION
Building a high performance front end is a balancing act. You need to understand all the different moving parts and subsystems in the browser and how they interact with each other. Small changes can significantly impact page and app load time, memory consumption, and processor use which has a huge impact on your user’s experience! In this session, we will dive into the subsystems of the browser and learn to optimize performance on sites and in web apps. We will also deep dive into the new performance analyzing tools available expose good and bad run-time patterns for your sites and web apps, and provide users with a fast and fluid experience.
Citation preview
The Perf Doctorjosh [email protected]@microsoft.com
#zen
#yum
#yum
#yum
#hero
#hero
#hero
#holycowdidthatjusthappen
Agenda• Defining Performance• Web Runtime Architecture• Performance Measurement Tools• Walkthroughs / Demos
Performance ExerciseHow much do you know about
performance?
• Anonymized data from each of the travel sites
Travel Site ContentTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS OtherScriptaculous
• Total size differs by almost a factor of four
Travel Site Content – Total SizeTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS OtherScriptaculous
• Constructed DOM elements differs by over a factor of four
Travel Site Content – Number Elements
Total Size (k)
Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS Scriptaculous Other
• Total CSS rules vary by nearly a factor of five
Travel Site Content – CSS RulesTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS Scriptaculous Other
• The image files downloaded on the sites vary by a factor of eleven
Travel Site Content – Image FilesTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS Scriptaculous Other
• Formatted JavaScript lines vary by almost a factor of eight
Travel Site Content – Script LinesTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS Scriptaculous Other
• Every site uses jQuery at the minimum but sites #1 and #2 are using additional libraries and frameworks as well.
Travel Site Content – Script LibrariesTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS OtherScriptaculous
Which site is fastest?
• Site #5 is the fastest despite having three times more script lines than sites #3 and #4
Site #5 Is FastestTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS Scriptaculous Other
Which site is slowest?
• Site #2 is the slowest despite having relatively low number of elements and staying in the middle of the pack on the other metrics.
Site #2 is SlowestTotal Size
(k)Number Elements
CSS Rules Image Files Script Lines
(F)Script
Libraries
Site #1 3,697 1,504 1,392 41 77,768
Site #2 2,278 1,100 5,325 29 39,183
Site #3 1,061 2,673 1,105 66 12,643
Site #4 1,812 4,252 1,672 12 10,284
Site #5 1,372 900 3,902 6 38,269
YUIjQuery Prototype ExtJS Scriptaculous Other
Web Performance Factors
What Makes Sites Faster?
Core 1 Core 2
Core 3 Core 4GPU
Web Runtime Architecture
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Networking Parsers
1
2 7
43 8 9
5 6
DOMTree
Formatting Layout Painting
1
2 7
43 8 9
5 6
Display Tree
Compositing
DOM API&
Capabilities
JavaScript
Touch
Hit Testing
InputCSS Cascade
Always start with a good profiler
Windows Performance Toolkithttp://aka.ms/WinPerfKit
F12 UI Responsiveness Tool
Event Tracing for Windows (ETW) allows us to see into the web platform architecture
Event Tracing for Windows (ETW)controller
Provider A
Provider B
Provider C
Trace Files
Session
Buffer
Windows
consumer
ETW
Enable / Disable
Session Control
F12 Developer Tools
F12 Developer Tools
F12 Developer Tools
F12 Developer Tools
Windows Performance ToolkitWindows Performance Toolkit contains an ETW controller (Windows Performance Recorder) and an ETW consumer (Windows Performance Analyzer) that we can use to analyze performance.
• Windows Performance Toolkit:http://aka.ms/performance
• Measuring Browser Performance:
• http://aka.ms/MeasureBrowser Perf
Where’s IE11 now?• Dev preview• Win 8.1• Windows 7 - No perf tools just yet but coming with RTM
• New features• F12 Dev Tools (like you just saw)• UA string change
Site compatibility just works• WebGL is awesome• Evergreen updates• More standards• More GPU• More awesomesauce
The Internet Explorer userAgent community recognizes, supports, and connects passionate web developers to raise awareness of web standards and the importance of delighting users with rich interoperable web experiences.
http://userAgents.ie
#thanks
