Web Runtime Performance

handslustyInternet and Web Development

Dec 14, 2013 (3 years and 7 months ago)

163 views

Anonymized data
from each of the
travel sites

Travel Site Content

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

Total size differs by
almost a factor of
four

Travel Site Content


Total Size

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

Constructed DOM
elements differs by
over a factor of four

Travel Site Content


Number Elements

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

Total CSS rules vary
by nearly a factor of
five

Travel Site Content


CSS Rules

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

The image files
downloaded on the
sites vary by a
factor of eleven

Travel Site Content


Image Files

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

Formatted
JavaScript lines vary
by almost a factor
of eight

Travel Site Content


Script Lines

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

Every site uses
jQuery at the
minimum but sites
#1 and #2 are using
additional libraries
and frameworks as
well.

Travel Site Content


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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

Site #5 is the fastest
despite having
three times more
script lines than
sites #3 and #4

Site #5 Is Fastest

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

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 Slowest

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

YUI

jQuery

Prototype

ExtJS

Other

Scriptaculous

Core 1

Core 2

Core 3

Core 4

GPU

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

Networking

Parsers

1

2

7

4

3

8

9

5

6

DOM

Tree

Formatting

Layout

Painting

1

2

7

4

3

8

9

5

6

Display

Tree

Compositing

DOM API

&
Capabilities

JavaScript

Touch


Hit Testing


Input

CSS Cascade

controller

Session




Buffer

Windows

consumer

ETW

Enable /

Disable

Session Control

http://
aka.ms/performance

http://aka.ms/MeasureBrowserPerf

Overview Concepts

High Performance Websites

Steve
Souders
, September 2007


Event Faster Websites: Best Practices

Steve
Souders
, June 2009


JavaScript Patterns

High Performance JavaScript

Nicholas
Zakas
, March 2010


JavaScript

the Good Parts

Douglas
Crockford
, May 2008


JavaScript Patterns

Stoyan

Stefanov
, September 2010


JavaScript Cookbook

Shelley Powers, July 2010

Microsoft Guidance

Windows Store App: JavaScript Best Practices

MSDN, December 2012


Performance Tricks to Make Apps & Sites Faster

Jatinder Mann, Build 2012



50 Performance Tricks for Windows Store Apps

Jason Weber, Build 2011


Engineering Excellence

Performance Guidance

Jason Weber, EE Forum 2011


Internet Explorer Architectural Overview

Jason Weber, PDC 2011


W3C Web Performance

Web

Performance Working Group Homepage

Performance Timeline Specification

Navigation Timing Specification


Blog Posts

1)
Measuring Performance with ETW/
XPerf

2)
Measuring Performance in Lab Environments

3)
Browser Subsystems Overview

4)
What Common Benchmarks Measure


Tools

WPT Standalone SDK

Windows Performance Toolkit

Fiddler Web Debugger





Tobin
Titus

Twitter:
@
tobint

Email:
tobint@microsoft.com