braziljs perf doctor talk

The Perf Doctorjosh holmesjoshholmes.com@joshholmesjosh.holmes@microsoft.com

Josh Holmes@joshholmes

josh.holmes@microsoft.comhttp://www.joshholmes.com

http://slideshare.net/joshholmes

#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

http://www.flickr.com/photos/-bast-/349497988/

josh holmesjoshholmes.com@joshholmesjosh.holmes@microsoft.com